AJAX请求
目录
- 一、什么是AJAX
- 二、原生AJAX
-
- 2.1 发送请求
- 2.2 超时与网络异常
- 2.3 取消请求
- 2.4 重复请求问题
- 三、jQuery-AJAX
-
- 3.1 发送GET请求
- 3.2 发送POST请求
- 3.3 通用方法
- 四、axios-AJAX
-
- 4.1 发送GET请求
- 4.2 发送POST请求
- 4.3 通用方法
- 五、fetch发送请求
一、什么是AJAX
~~~~~~ Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
二、原生AJAX
2.1 发送请求
使用原生AJAX发送请求一共四个步骤：
- 创建对象
- 初始化，设置请求方法和url
- 发送请求
- 绑定事件，处理服务端返回的结果
//1.创建对象
let xhr = new XMLHttpRequest();
//2.初始化，设置请求方法和url
xhr.open("GET","http://127.0.0.1:8000/server?a=100");
//设置响应体类型，返回结果如果是json形式则自动转成json对象
xhr.responseType='json';
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//3.发送
xhr.send();
//4.绑定事件，处理服务端返回的结果
//readystate是xhr对象中的属性，表示状态0,1,2,3,4
xhr.onreadystatechange = function() {
//判断（服务端返回了所有结果）
if(xhr.readyState === 4 && xhr.status===200){
//1.响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result的文本
result.innerHTML = xhr.response;
}
}
2.2 超时与网络异常
ontimeout:设置超时的回调函数
onerror:设置网络异常的回调函数
let 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();
if(xhr.readyState === 4 && xhr.status===200){
result.innerHTML = xhr.response;
}
2.3 取消请求
使用abort()函数可以取消请求
//获取元素对象
let btn = document.querySelectorAll("button");
let xhr = null;
btn[0].addEventListener("click",function(){
xhr = new XMLHttpRequest();
xhr.open("GET","http://localhost:8000/delay");
xhr.send();
})
//abort
btn[1].onclick = function(){
xhr.abort();
}
2.4 重复请求问题
可以通过设置一个变量标识当前请求是否结束
//获取元素对象
let btn = document.querySelectorAll("button");
let xhr = null;
//标识变量
let isSending = false;//是否正在发送请求
btn[0].addEventListener("click",function(){
//判断标识变量
if(isSending) xhr.abort();//如果正在发送，则取消请求
xhr = new XMLHttpRequest();
isSending = true;
xhr.open("GET","http://localhost:8000/delay");
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState===4) {
isSending = false;
}
}
})
//abort
btn[1].onclick = function(){
xhr.abort();
}
三、jQuery-AJAX
头部需要引入jquery
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
3.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')
})
3.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);
})
})
3.3 通用方法
$('button').eq(2).click(function(){
$.ajax({
url:'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:{
}
})
})
四、axios-AJAX
首先引入axios
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js">script>
4.1 发送GET请求
//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick = function(){
//Get请求
axios.get('/axios-server',{
params:{
a:100,
b:200
},
//请求头信息
headers:{
age:20
}
}).then(value=>{
console.log(value)
})
}
4.2 发送POST请求
btns[1].onclick = function(){
//post请求
axios.post('/axios-server',{username:"admin"},{
params:{
a:100,
b:200
},
//请求头信息
headers:{
age:20
}
}).then(value=>{
console.log(value)
})
}
4.3 通用方法
btns[2].onclick = function(){
//post请求
axios({
//请求类型
method:"POST",
//请求地址
url:'/axios-server',
//请求参数
params:{
a:100,
b:200
},
//请求头信息
headers:{
age:20
},
//请求体参数
data:{
username:"admin"
},
}).then(res=>{
console.log(res)
})
}
五、fetch发送请求
文档地址:https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
const btn = document.querySelector('button');
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch-server',{
//请求方法
method:"POST",
//请求头
headers:{
name:"hello"
},
//请求体
body:"username=admin&password=123456"
}).then(res=>{
// return res.text()
return res.json()
}).then(res=>{
console.log(res)
})
}