目录
一、什么是Ajax?
二、同步与异步
三、Ajax工作原理
四、Ajax实现步骤
五、Ajax应用场景
六、Ajax常见问题
1.缓存问题
2.跨域问题
3.请求超时与网络异常
4.取消请求
七、常见Ajax三种请求方式
1.jQuery请求
2.Axios请求
3.Fetch请求
一、什么是Ajax?
Ajax 即 Asynchronous Javascript And XML(异步JavaScript和XML),是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
二、同步与异步
- 同步: 发送一个请求,需要等待响应返回,然后才可以发送下一个请求,如果该请求没有响应,则需等待
- 异步:发送一个请求,不需要等待响应返回,随时可以发送下一个请求
三、Ajax工作原理
Ajax的目的是提高用户体验,较少网络数据的传输量。Ajax在客户端和服务器之间加了一个中间层,使客户端操作与服务器响应异步化,一些数据验证和数据处理交给Ajax引擎自己来做,而不需要交给服务器,只有确定需要从服务器读取新数据时才会通过Ajax引擎代为向服务器提交请求
四、Ajax实现步骤
- 创建XMLHttpRequest核心对象xhr
const xhr = new XMLHttpRequest();
- 通过XMLHttpRequest对象的open()方法给当前对象提供访问方式、URL等与服务端建立连接
xhr.open(method, url, [async][, user][, password])
//method:表示当前的请求方式,常见的有GET、POST
//url:服务端地址
//async:布尔值,表示是否异步执行操作,默认为true
//user: 可选的用户名用于认证用途;默认为null
//password: 可选的密码用于认证用途,默认为null
- 通过XMLHttpRequest对象的send()方法发送给服务端
xhr.send([body])
//body: 在 xhr 请求中要发送的数据体,如果不传递数据则为 null 如果使用GET请求发送数据的时候,需要注意如下:
//将请求数据添加到open()方法中的url地址中
//发送请求数据中的send()方法中参数设置为null
- 接受返回值并处理
request.onreadystatechange = function(e){if(request.readyState === 4){ // 整个请求过程完毕if(request.status >= 200 && request.status <= 300){console.log(request.responseText) // 服务端返回的结果}else if(request.status >=400){console.log("错误信息:" + request.status)}}
}//readyState 属性一共有5个值,分别表示不同的请求响应阶段://0: 还未创建请求,即未调用 open() 方法
//1: 已调用 open() 方法,但未发送 send() 方法
//2: 已调用 send() 方法,但未接收到响应
//3: 已接收到部分响应
//4: 已接收到全部的响应
五、Ajax应用场景
-
动态加载内容:Ajax可以在不刷新整个页面的情况下,通过异步请求从服务器获取数据并动态更新页面的部分内容,从而实现更流畅的用户体验
-
表单验证:Ajax可以在不刷新整个页面的情况下,实时验证表单数据的合法性(如手机号、唯一性校验)并提供反馈信息
-
搜索建议:当用户在搜索框中输入内容时,Ajax可以在输入框下方实时显示相关的搜索建议,帮助用户更快速地找到自己需要的信息
-
购物车更新:Ajax可以在不刷新整个页面的情况下,实时更新购物车中的商品数量以及总价等信息
-
实时聊天:Ajax可以实现与服务器的实时通信,让用户在不刷新页面的情况下,实时接收到其他用户的消息(如直播评论、点赞、礼物等)
六、Ajax常见问题
1.缓存问题
在一些浏览器中存在缓存机制,Ajax只会发送一次请求,剩余请求则不会再发送给浏览器,而是直接读取缓存中的数据
解决方案:浏览器缓存是通过URL地址记录,只需更改URL地址即可解决缓存问题,xhr.open("get","/demo?t="+Date.now())
2.跨域问题
当一个页面向另一个不同域名/不同协议/不同端口的页面请求资源时,因为浏览器的同源策略,会产生跨域问题
解决方案:
- 后台Http请求转发
- 后台配置Cors
- 使用SpringCloud网关
- 使用Nginx转发
3.请求超时与网络异常
当请求时间过长或网络出现问题时,可单独做一些特殊处理
javascript">btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();//超时时间设置为2sxhr.timeout = 2000;//超时处理xhr.ontimeout = function(){// 超时相关操作}//网络异常处理xhr.onerror = function(){// 网络异常相关操作}xhr.open("GET",'http://127.0.0.1:8080/demo');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})
4.取消请求
当请求发出但并未响应时,可通过abort()取消请求
javascript">const btns = document.querySelectorAll('button');let x = null;btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8080/demo');x.send();}// 取消请求btns[1].onclick = function(){x.abort();}
七、常见Ajax三种请求方式
1.jQuery请求
jQuery是⼀个优秀的js框架,对JS原⽣的Ajax进⾏了封装,封装后的Ajax的操作⽅法更简洁,功能更强⼤,jQuery三种常见请求方式:
请求方式 | 语法 |
Ajax请求 | $.ajax([settings]) |
GET请求 | $.get(url,[data],[callback],[type]) |
POST请求 | $.post(url,[data],[callback],[type]) |
参数名称 | 描述 |
url | 请求地址 |
data | 请求参数 |
type | 请求类型 |
async | 布尔类型true/false,代表异步和同步,默认为true |
dataType | 回传数据类型 |
success | 成功回调函数 |
error | 失败回调函数 |
javascript">// Ajax请求
$.ajax({url:"",data:{},type:"post/get",async:true,dataType:"text",success:function(obj){},error:function(){}
})
javascript">// GET请求
$("button").click(function(){$.get("demo_test.asp",function(data,status){alert("Data: " + data + "\nStatus: " + status);});
});
javascript">// POST请求
$("button").click(function(){$.post("demo_test_post.asp",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "\nStatus: " + status);});
});
2.Axios请求
javascript"> //配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8080';btns[2].onclick = function () {axios({//请求方法method: 'POST',//urlurl: '/axios-server',//url参数params: {vip: 10,level: 30},//头信息,此部分如果使用自定义的头信息,需要服务端进行相应修改,正常不设置headers: {a: 100,b: 200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response => {//响应状态码console.log(response.status);//响应状态字符串console.log(response.statusText);//响应头信息console.log(response.headers);//响应体console.log(response.data);})}
3.Fetch请求
javascript">btn.onclick = function () {fetch('http://127.0.0.1:8080/fetch-server?vip=10', {//请求方法method: 'POST',//请求头headers: {name: 'aodi'},//请求体body: 'username=admin&password=admin'}).then(response => {// return response.text();return response.json();}).then(response => {console.log(response);});}