当前位置：首页 > news >正文

AJAX技术

news 文章来源：https://blog.csdn.net/qq_39756007/article/details/129088506 2024/11/5 11:42:34

AJAX技术

浏览器是多进程的，简单的说就是，浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。但是js是基于单线程的，而这个线程就是浏览器的js引擎，浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。如果需要实现多线程文件操作，则需要依赖js中Work类来实现。

JavaScript作为一门客户端的脚本语言，主要的任务是处理用户的交互，而用户的交互无非就是响应DOM的增删改，使用事件队列的形式，一次事件循环只处理一个事件响应，使得脚本执行相对连续。如果JS引擎被设计为多线程的，那么DOM之间必然会存在资源竞争，那么语言的实现会变得非常臃肿，在客户端跑起来，资源的消耗和性能将会是不太乐观的，故设计为单线程的形式，并附加一些其他的线程来实现异步的形式，这样运行成本相对于使用JS多线程来说降低了很多。

问题的引入：校验用户名是否重复

@Controller
public class UserController{@GetMapping("/add")public String add(Model model){User user=new User(); model.addAttribute("user",user);return "users/add"; 打开输入页}
}

输入页面 thymeleaf

<form th:action="@{/add}" method="post" th:object="${user}">
<input name="username" th:field="*{username}"/>
...还有很多的输入域....
</form>

如果需要用户名称唯一，则需要填充完所有的输入域后，点击提交按钮才能将数据发送到服务器端，由Controller调用Service进行用户名称的存在性判断。这里实际很麻烦，因为仅仅是一个用户名的问题，提供了很多的数据

解决方案1：

输入用户名后点击一个额外的连接，进行用户名称的验证

<form>
<input name="username" th:field="*{username}" /><a href="">验证用户名</a>
... ...
</form>

问题1是如何生成响应页面，问题2是由于采用的是同步处理机制，所以在服务器端接收并处理数据的过程中，客户端只能处于等待状态

目前所采用的请求/响应的同步处理会导致一种不连续的客户体验

解决方案2：Ajax的交互方式

可以将不连续的客户体验转换为对客户比较友好的连续的客户体验

同步和异步

举个例子：普通B/S模式(同步) AJAX技术(异步)

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式

易懂的理解:

异步传输: 你传输吧，我去做我的事了，传输完了告诉我一声
同步传输: 你现在传输，我要亲眼看你传输完成，才去做别的事

什么是Ajax

AJAX是异步的JavaScript和XML，传输的是XML的格式数据，可以通过JavaScript的XMLHttpRequest对象来进行数据交互，Ajax包括：

XHTML和CSS进行显示
使用文档对象模型DOM（Document Object Model）作动态显示和交互
使用XML和XSLT做数据交互和操作
使用XMLHttpRequest进行异步数据接收
使用JavaScript将它们绑定在一起

理解

Ajax一种不用刷新整个页面便可与服务器通讯的办法

AJAX编程模型

在这里插入图片描述

用户名称的唯一性校验

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var xhr=null; //由于在多个方法中使用，所以定义为页面全局
function ff(){
//1、实例化xhr对象---XMLHttpRequest，不管使用什么浏览器，只要经过认证的浏览器都
会包含这个组件。不需要额外安装
createXHR();//由于浏览器的差异性，所以构建xhr对象的具体方法不完全一致
if(xhr){
//2、定义请求回调事件处理
//获取用户输入的数据
let nn=document.getElementById('username').value;
xhr.open('GET','exists?name='+nn,true);//打开服务器的连接，参数1是请求方
法，参数2是请求地址URL，参数3是否采用异步请求
xhr.onreadystatechange=callback;//注册回调事件处理，当特定事件发生时
【readystate发生变化时】，会自动执行这里注册的方法
//3、发送请求
xhr.send();//由于采用的是get请求，所以没有协议体，是采用请求URL地址传递数据
}else{
alert('您的浏览器不支持异步操作！');
}
}
function createXHR(){
//浏览器的实现差异主要体现在IE10以前的版本和非IE浏览器两大类
if(window.ActiveXObject){ //判断窗口对象中是否有ActiveXObject组件，从而判断
IE浏览器
xhr=new ActiveXObject('Microsoft.XMLHttp'); //实际上不同版本的浏览器参
数不同
} else{ //针对非IE浏览器，例如FireFox、Chrome等
xhr=new XMLHttpRequest();
}
}
function callback(){
//在一个异步请求处理过程中,XMLHttpRequest的readyState有0-4共5种状态，4表示处理
完毕，并接收到服务器的响应信息
var ss=document.getElementById('show');
if(4==xhr.readyState){
if(200==xhr.status){ //status是服务器的响应状态码，例如404、500等，200表
示处理正确
//处理响应信息 XMLHttpRequest对象中有2个属性可以用于接收服务器的响应信息，
responseText将响应内容当作文本进行处理，responseXML将响应内容当作一个xml文档进行处理
let tt=xhr.responseText;
//使用DOM进行页面的部分更新
ss.innerHTML=tt;
} else {
ss.innerHTML='请求出现问题!';
}
}else{
ss.innerHTML='数据正在处理中....'
}
}
</script>
</head>
<body>
<form th:action="@{/add}" method="post" th:object="${user}">
<!-- onblur用于定义输入域失去焦点事件，当input:username失去焦点时则立即触发ff函数的
执行; onfocus获取焦点事件 -->
<input name="username" id="username" th:field="*{username}"
placeholder="请输入用户名称" onblur="ff()"/><span id="show"></span><br/>
<input name="password" id="password" th:field="*{password}"
placeholder="请输入口令"/>
</form>
</body>
</html>

对应的控制器，一般不会在SpringMVC中使用response生成响应内容。注意AJAX是客户端技术，和浏览器相关，但是和所使用的服务器技术无关

@GetMapping("/exists")
public void exists(String name,HttpServletResponse response) throws
IOException {
System.out.println("exists.....");
String msg="";
if("yanjun".equals(name))
msg="<font color=red>用户名称已经被占用</font>";//偷懒，因为这种写法在
html5中不允许
else
msg="<font color=blue>用户名称可以使用</font>";
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(msg);
out.close();
}

具体开发过程中可以使用浏览器的开发者工具进行js代码的调试

特点

传统的web应用允许用户填写表单form，当提交表单时就向web服务器发送一个请求。服务器接收并处
理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后2个页面中的大部分
HTML代码往往是相同的。

优势

AJAX应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应

缺点

AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性
AJAX更新页面内容的时候并没有刷新整个页面，因此网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个需要在明显位置提醒用户“数据已更新”
对流媒体的支持没有FLASH、Java Applet好
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax

区别

与传统的WEB应用不同， AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中，它负责编译用户界面及与服务器之间的交互
因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果就能看到响应更快
的应用。同时很多的处理工作可以在发出请求的客户端上完成，所以Web服务器的处理时间也减少了
使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据，这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息

总结

Ajax在本质上是一个浏览器端的技术，和具体的服务器端技术无关
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，
Refresh without Reload
与服务器之间的沟通，完全是透过Javascript来实现
使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络应用更像一个桌面程
序

AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流

用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，像内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求都可以交给AJAX来执行

AJAX工作原理

Ajax的核心是JavaScript对象XMLHttpRequest

xhr对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，
XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户

AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介xhr，从而消除了网络交互过程中的处理—等待—处理—等待缺点

用户的浏览器在执行任务时即装载了AJAX引擎。引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互

AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。可用
Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行
在这里插入图片描述

XMLHttpRequest

使用XMLHttpRequest可以用 JavaScript 发出到服务器的请求，并在不阻塞用户的情况下处理响应

在创建 Web 站点并用 XMLHttpRequest 在客户机浏览器上无刷新地执行屏幕更新的同时，它还提供了更多灵活性和丰富的用户体验。XMLHttpRequest应用程序的示例包括Google 的 Gmail 服务、Google的 Suggest 动态查询界面以及 MapQuest 的动态地图界面

没有一样东西在不同的浏览器上得到同样的结果。针对不同的浏览器创建xhr对象

function createXHR(){
//浏览器的实现差异主要体现在IE10以前的版本和非IE浏览器两大类
if(window.ActiveXObject){ //判断窗口对象中是否有ActiveXObject组件，从而判断IE浏览器
xhr=new ActiveXObject('Microsoft.XMLHttp'); //实际上不同版本的浏览器参数不同
} else{ //针对非IE浏览器，例如FireFox、Chrome等
xhr=new XMLHttpRequest();
}
}

xhr常用方法

abort()停止当前请求
getAllResponseHeaders() 作为字符串返回完整的headers
getResponseHeader(“headerLabel”) 作为字符串返回单个的header
open(“method”,“URL”[,asyncFlag[,“userName”[, “password”]]])设置未决的请求的目标URL，方
法和其他参数。主要使用的方法样例为open(“GET”,“/bb.do?id=123”,true)
send(content) 发送请求
setRequestHeader(“label”, “value”) 设置header并和请求一起发送

get请求

get请求使用URL传递请求参数

let nn=document.getElementById('username').value; //获取输入框中用户输入的数据
xhr.open('GET','exists?name='+nn,true);//打开服务器的连接，参数1是请求方法，参数2是
请求地址URL，参数3是否采用异步请求。这里利用URL传递请求参数?name=abcd
xhr.onreadystatechange=callback;//注册回调事件处理，当特定事件发生时【readystate发生
变化时】，会自动执行这里注册的方法
//发送请求
xhr.send();//由于采用的是get请求，所以没有协议体，是采用请求URL地址传递数据

post请求

post请求实际上就是模拟form表单的post提交

xhr.open('POST','exists',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange=callback;
xhr.send('name='+nn+'&age=18');

xhr属性

onreadystatechange注册状态改变的事件触发器，当xhr的readyState发生变化时自动回调的函数
readyState是xhr对象状态值，属于integer类型，不同的状态值表示不同的状态。0=未初始化、1=
读取中、2=已读取、3=交互中、4 =完成。实际上使用onreadystatechange不可能获取到5种状态
值
responseText服务器进程返回数据的文本版本，事实上不管服务器生成的内容，都会当作文本字符串进行处理
responseXML服务器进程返回数据的兼容DOM的XML文档对象
- 当前的具体开发种一般不载使用xml进行数据传输，建议使用 JSON 格式
status服务器返回的状态码，如404=文件未找到、200 =“成功”
statusText服务器返回的状态文本信息，例如返回内容为200 OK

注册回调事件

onreadystatechange事件：当请求状态发生变化，即readyState的值发生变化的时候激发的事件

xhr.onreadystatechange=callback;

注意:这个函数名称不加括号，不指定参数。也可用Js函数直接量方式定义响应函数。如
XMLHttpReq.onreadystatechange = function() { };

onreadystatechange属性接收一个EventListener值，保证在事件触发时激活该对象
指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对
象的onreadystatechange属性就可以了

事件处理函数

function callback(){
//在一个异步请求处理过程中,XMLHttpRequest的readyState有0-4共5种状态，4表示处理完
毕，并接收到服务器的响应信息
var ss=document.getElementById('show');
if(4==xhr.readyState){
if(200==xhr.status){ //status是服务器的响应状态码，例如404、500等，200表示处理
正确
//处理响应信息 XMLHttpRequest对象中有2个属性可以用于接收服务器的响应信息，
responseText将响应内容当作文本进行处理，responseXML将响应内容当作一个xml文档进行处理
let tt=xhr.responseText;
ss.innerHTML=tt;
} else {
ss.innerHTML='请求出现问题!';
}
}else{
ss.innerHTML='数据正在处理中....'
}
}

改进

AJAX 虽然可以实现无刷新更新页面内容，但是也不是什么地方都可以用，主要应用在交互较多、频繁读数据、数据分类良好的Web 应用中

开发步骤：AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：

对象初始化
发送请求
服务器接收
服务器返回
客户端接收
修改客户端页面内容

只不过这个过程是异步的

Javascript对象编程

为了简化AJAX编程，可以利用js的对象编程将繁琐的步骤进行封装

function AjaxObject(){
this.xhr=null;
this.getXMLHttpRequest=function (){
if(window.ActiveXObject){
this.xhr=new ActiveXObject("Microsoft.XMLHttp");
} else {
this.xhr=new XMLHttpRequest();
}
};
//url是请求地址，必须的；params是请求参数，格式应该为key=value&key=value；
HttpMethod是请求方法
this.sendRequest=function(url,params,HttpMethod){
//如果调用时没有传递HttpMethod参数，则默认请求方法为post
if(!HttpMethod)
HttpMethod='POST';
//创建XMLHttpRequest对象
this.getXMLHttpRequest();
if(!this.xhr) {
//建立和服务器的连接
this.xhr.open(HttpMethod,url,true);
//注册回调事件处理函数
this.xhr.onreadystatechange=this.callback;
if('POST'==HttpMethod){
this.xhr.setRequestHeader('Content-Type','application/x-wwwform-urlencoded');
}
//发送请求
this.xhr.send(params);
} else {
alert('您的浏览器不支持异步操作!');
}
};
this.callback=function(){};
}

模板化操作已经定义在AjaxObject中，页面中需要使用则仅仅进行引入即可

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../static/jslib/ajax.js" th:src="@{/jslib/ajax.js}">
</script>
</head>
<body>
<form action="#" th:action="@{/add}" method="post" th:object="${user}">
<input name="username" id="username" th:field="*{username}"
onblur="ff()"/>
<span id="errusername"></span><br/>
<input name="password" type="password" th:field="*{password}"/>
</form>
<script>
function ff() {
//获取用户在<input id=username/>中的输入数据
var uname = document.getElementById('username').value;
var errname = document.getElementById('errusername');
console.log(errname);
if (uname != '') {
var obj = new AjaxObject();
//覆盖定义AjaxObject中的callback函数
obj.callback = function () {
console.log(errname);
if (4 == obj.xhr.readyState) {
if (200 == obj.xhr.status) {
let ss = obj.xhr.responseText;
console.log(ss);
errname.innerHTML = ss;
}
}
}
obj.sendRequest('exists?username=' + uname);
} else {
errname.innerHTML = '请输入用户名称';
}
}
</script>
</body>
</html>

AJAX技术

问题的引入：校验用户名是否重复

解决方案1：

解决方案2：Ajax的交互方式

同步和异步

什么是Ajax

AJAX编程模型

用户名称的唯一性校验

特点

优势

缺点

区别

总结

AJAX工作原理

XMLHttpRequest

xhr常用方法

get请求

post请求

xhr属性

注册回调事件

事件处理函数

改进

Javascript对象编程

相关文章：