Javaweb-Ajax

一、Ajax简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

二、Ajax的特点

（1）AJAX 的优点

1. 可以无需刷新页面而与服务器端进行通信。
2. 允许你根据用户事件来更新部分页面内容。

（2）Ajax的缺点

1. 没有浏览历史，不能回退
2. 存在跨域问题(同源)
3. SEO 不友好

三、原生Ajax

1、XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

2、当前端想设置自定义的请求头时,需要让后端设置响应头

//表示接收任意类型的请求							
app.all('/server', (request, response) => { //响应头 允许跨域     运行自定义响应头
response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Headers', '*');}

3、ajax请求状态:xhr.readyState

0:请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了

四、Ajax的使用

1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();2) 设置请求信息
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');3) 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用4) 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}}

（1）Get方式

//绑定事件
btn.onclick = function () {//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置请求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on  when 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// change  改变xhr.onreadystatechange = function () {//判断 (服务端返回了所有的结果)if (xhr.readyState === 4) {//判断响应状态码 200  404  403 401 500// 2xx 成功if (xhr.status >= 200 && xhr.status < 300) {//处理结果  行 头 空行 体//响应 // console.log(xhr.status);//状态码// console.log(xhr.statusText);//状态字符串// console.log(xhr.getAllResponseHeaders());//所有响应头// console.log(xhr.response);//响应体//设置 result 的文本result.innerHTML = xhr.response;} else {}}}
}

（2）Post方式

//绑定事件result.addEventListener("mouseover", function(){//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化 设置类型与 URLxhr.open('POST', 'http://127.0.0.1:8000/server');//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.setRequestHeader('name','atguigu');//3. 发送xhr.send('a=100&b=200&c=300');// xhr.send('a:100&b:200&c:300');// xhr.send('1233211234567');//4. 事件绑定xhr.onreadystatechange = function(){//判断if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){//处理服务端返回的结果result.innerHTML = xhr.response;}}}});

（3）解决ie缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会再发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题 xhr.open(“get”,“/testAJAX?t=”+Date.now());

（4）请求超时与网络异常

当你的请求时间过长,或者无网络时,进行的相应处理

btn.addEventListener('click', function(){const xhr = new XMLHttpRequest();//超时设置 2s 设置xhr.timeout = 2000;//超时回调xhr.ontimeout = function(){alert("网络异常, 请稍后重试!!");}//网络异常回调xhr.onerror = function(){alert("你的网络似乎出了一些问题!");}xhr.open("GET",'http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status< 300){result.innerHTML = xhr.response;}}}})

（5）取消请求

在请求发出去后但是未响应完成时可以进行取消请求操作

let x = null;
btns[0].onclick = function(){x = new XMLHttpRequest();x.open("GET",'http://127.0.0.1:8000/delay');x.send();
}
// abort
btns[1].onclick = function(){x.abort();
}

（6）重复请求问题

利用之前取消请求知识点,当我点击时判断之前请求是否在发送中,如果是,则停止请求

btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}
————————————————版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/m0_72131231/article/details/140346480btns[0].onclick = function(){//判断标识变量if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求x = new XMLHttpRequest();//修改 标识变量的值isSending = true;x.open("GET",'http://127.0.0.1:8000/delay');x.send();x.onreadystatechange = function(){if(x.readyState === 4){//修改标识变量isSending = false;}}}

五、常见三种Ajax请求

1、jQuery发送AJAX请求

jQuery有三种发送请求方法:

当你只是简单的请求数据,可以直接使用前两种方式请求,当你需要设置的东西较多的时候,可以使用$.ajax()方法

（1）$.get()

$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);},'json');});

（2）$.post()

$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){console.log(data);});});

ajax_273">（3）$.ajax

$('button').eq(2).click(function(){$.ajax({//urlurl: 'http://127.0.0.1:8000/jquery-server',//参数data: {a:100, b:200},//请求类型type: 'GET',//响应体结果dataType: 'json',//成功的回调success: function(data){console.log(data);},//超时时间timeout: 2000,//失败的回调error: function(){console.log('出错啦!!');},//头信息headers: {c:300,d:400}});});

2、Axios发送AJAX请求

（1）axios.get()

axios.get(url,data,params)

//配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function () {//GET 请求axios.get('/axios-server', {//url 参数params: {id: 100,vip: 7},//请求头信息headers: {name: 'atguigu',age: 20}}).then(value => {console.log(value);});}

（2）axios.post()

axios.post(url,data,params)

 //配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';  
btns[1].onclick = function () {axios.post('/axios-server', {username: 'admin',password: 'admin'}, {//url params: {id: 200,vip: 9},//请求头参数headers: {height: 180,weight: 180,}});}

（3）axios() 常用

axios({})

 //配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';
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发送AJAX请求

btn.onclick = function () {fetch('http://127.0.0.1:8000/fetch-server?vip=10', {//请求方法method: 'POST',//请求头headers: {name: 'atguigu'},//请求体body: 'username=admin&password=admin'}).then(response => {// return response.text();return response.json();}).then(response => {console.log(response);});}

``java
btn.onclick = function () {
fetch(‘http://127.0.0.1:8000/fetch-server?vip=10’, {
//请求方法
method: ‘POST’,
//请求头
headers: {
name: ‘atguigu’
},
//请求体
body: ‘username=admin&password=admin’
}).then(response => {
// return response.text();
return response.json();
}).then(response => {
console.log(response);
});
}