“这里是云端源想IT，帮你轻松学IT”
嗨~ 本日的你过得还好吗？
这个天下泥泞破碎
却也能开出温顺的花来
- 2023.06.28 -
在web初期阶段，前端想要获取后端做事信息须要刷新全体页面，这种办法既耗时又让用户体验十分糟糕，那么怎么办理这个问题呢？
想要搭建起前端和后真个快速通道，这个时候就须要利用Ajax。本日
一、Ajax先容Ajax是什么？
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种利用现有技能凑集的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最主要的XMLHttpRequest。
利用Ajax技能网页运用能够快速地将增量更新呈现在用户界面上，而不须要重载（刷新）全体页面，这使得程序能够更快地回运用户的操作。
Ajax的优点：
可以无需刷新页面而与做事器端进行通信；许可你根据用户事宜来更新部分页面内容。Ajax的缺陷：
没有浏览历史，不能回退；存在跨域问题（同源）；SEO不友好。Ajax 事理（发送Ajax要求的五个步骤）
接下来我们来理解一下Ajax 事理是什么，以及发送Ajax要求的五个步骤，实在也便是利用 XMLHttpRequest 工具的五个步骤。
一个完全的 HTTP 要求须要的是：
要求的网址、要求方法 get/post。提交要求的内容数据、要求主体等。吸收相应回来的内容。发送 Ajax 要求的五个步骤：
1）创建异步工具，即 XMLHttpRequest 工具。
2）利用 open 方法设置要求参数。open(method, url, async)。参数阐明：要求的方法、要求的 url、是否异步。第三个参数如果不写，则默认为 true。
3）发送要求：send()。
4）注册事宜：注册 onreadystatechange 事宜，状态改变时就会调用。如果要在数据完全要求回来的时候才调用，我们须要手动写一些判断的逻辑。
5）做事端相应，获取返回的数据。
二、XMLHttpRequest 工具详解
在 JavaScript 中，XMLHttpRequest 是客户真个一个 API，它为浏览器与做事器通信供应了一个便捷通道。当代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。
发送要求
发送要求的方法：
open(method, url, async);
参数阐明：
method：要求的类型；GET 或 POSTurl：文件在做事器上的位置async：true（异步）或 false（同步）其余还有个方法：（仅用于 POST 要求）
send(string);
POST 要求时把稳：
如果想让像form表单提交数据那样利用POST要求，就须要利用 XMLHttpRequest 工具的 setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
xmlhttp.open('POST', 'ajax_test.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('name=smyhvae&age=27');
onreadystatechange 事宜
注册 onreadystatechange 事宜后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变革）
0: 要求未初始化1: 做事器连接已建立2: 要求已吸收3: 要求处理中4: 要求已完成，且相应已就绪status：
200: “OK”。404: 未找到页面。在 onreadystatechange 事宜中，当 readyState 即是 4，且状态码为 200 时，表示相应已就绪。
做事器相应的内容
responseText：得到字符串形式的相应数据。responseXML：得到 XML 形式的相应数据。如果相应的是普通字符串，就利用 responseText；如果相应的是 XML，利用 responseXML。
三、常用Ajax要求办法
手写第一个 Ajax 要求
get 要求：
//【发送ajax要求须要五步】
//（1）创建XMLHttpRequest工具
var xmlhttp = new XMLHttpRequest();
//（2）设置要求的参数。包括：要求的方法、要求的url。
xmlhttp.open('get', '02-ajax.php');
//（3）发送要求
xmlhttp.send();
//（4）注册事宜。 onreadystatechange事宜，状态改变时就会调用。
//如果要在数据完全要求回来的时候才调用，我们须要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了担保 数据 完全返回，我们一样平常会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//（5）做事端相应：如果能够进入这个判断，解释数据要求成功了
console.log('数据返回成功：' + JSON.stringify(xmlhttp.responseText));
// 伪代码：按业务须要，将接口返回的内容显示在页面上
// document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
};
post要求：
//（1）异步工具
var xmlhttp = new XMLHttpRequest();
//（2）设置要求参数。包括：要求的方法、要求的url。
xmlhttp.open('post', '02.post.php');
// 如果想要利用post提交数据,必须添加此行
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//（3）发送要求
xmlhttp.send('name=fox&age=18');
//（4）注册事宜
xmlhttp.onreadystatechange = function () {
//（5）做事端相应
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
封装 Ajax 要求（主要）
上面的代码，实行顺序很好理解，但在实战开拓中，是不会这么写的。如果你的页面中，须要调十次接口，那岂不是要手写十遍 Ajax 要求？这样会导致大量的重复代码。
以是，我们须要把重复代码封装成一个公共函数，然后通过回调函数处理成功和失落败的逻辑。
封装 Ajax 要求的代码如下：(get 要求为例)
// 封装 Ajax为公共函数：传入回调函数 success 和 fail
function myAjax(url, success, fail) {
// 1、创建XMLHttpRequest工具
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// 兼容IE5、IE6浏览器。不写也没紧要
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、发送要求
xmlhttp.open('GET', url, true);
xmlhttp.send();
// 3、做事端相应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var obj = JSON.parse(xmlhttp.responseText);
console.log('数据返回成功：' + obj);
success && success(xmlhttp.responseText);
} else {
// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。由于 fail 参数不一定会传。
fail && fail(new Error('接口要求失落败'));
}
};
}
// 单次调用 ajax
myAjax('a.json', (res) => {
console.log(res);
});
// 多次调用 ajax。接口要求顺序：a --> b --> c
myAjax('a.json', (res) => {
console.log(res);
myAjax('b.json', (res) => {
console.log(res);
myAjax('c.json', (res) => {
console.log(res);
});
});
});
学会了封装 get 要求之后，封装 post要求也是类似的写法。
下面再列举两种常见的要求办法：
Jquery-Ajax要求
// get要求
$('button').eq(0).click(()=>{
// 方法中有三个参数，给谁发,发什么参数（工具），回调
$.get('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{
console.log(data);
})
});
// post要求
$('button').eq(1).click(()=>{
// 方法中有四个参数，给谁发 ,发什么参数（工具），回调 ,相应体数据类型
$.post('http://127.0.0.1:8001/jquery-server', {a:100,b:200}, (data)=>{
console.log(data);
})
});
// ajax办法
$('button').eq(2).click(()=>{
// 参数是一个工具
$.ajax({
//url
url:'http://127.0.0.1:8001/jquery-server',
// 携带参数
data:{a:100, b:200},
// 相应体结果类型设置
// dataType:'json',
// 要求类型
type:'GET',
// 成功的回调函数
success:function(data){
console.log(data)
},
// 超时时间
// timeout:2000,
// 头信息设置
// headers:{},
// 失落败的回调
// error:function(){}
})
})
Axios-Ajax要求
// 配置baseURL
// axios.defaults.baseURL = 'http://127.0.0.1:8001'
// 有此配置项后，要求地址可省略一部分
const btn = document.querySelectorAll('button');
btn[0].addEventListener('click', ()=>{
//GET要求
axios.get('http://127.0.0.1:8001/axios-server',{
// 要求参数
params:{
a:700,
b:400
},
// 要求头信息
// headers:{
// name:'张三',
// age:20
// },
// 回调函数
}).then(value =>{
console.log(value)
});
});
btn[1].addEventListener('click',()=>{
axios.post('http://127.0.0.1:8001/axios-server',{
// 携带参数
username:'admin',
passward:'admin',
})
})
btn[2].addEventListener('click', ()=>{
axios({
// 要求方法
method:'POST',
//url
url:'http://127.0.0.1:8001/axios-server',
// 参数
params:{
a:10,
b:100,
},
// 要求头
Headers:{
c:100,
d:200
},
// 要求体参数
// data: {
// username:'admin',
// passward:'admin',
// },
})
})
以上便是比较常用的一些要求办法，希望对大家理解Ajax网络要求这一块有点帮助。无论是哪种要求办法，还是要根据自身所处环境决定如何利用，先容的只是方法，而详细逻辑还要看业务需求自行完成。
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
