ajax
是2005年被Jesse James Garrett提出的新术语,它是一种web数据交互的方式,我们也叫它异步JavaScript和XML,可以快速的将数据呈现在用户面前,而不需要整体页面进行刷新(★)。接下来就是简单的ajax封装:
ajax运行原理图
ajax
1.ajax底层运行原理就是通过
JavaScript
来操作。ajax他并不是一门编程语言,而是为了更好与web端产生交互的技术。
2.ajax通过httpRequest
来向服务器端发送请求,通过httpRequest
, JavaScript 可在不重载页面的情况与 Web 服务器交换数据,也就是说在不需要刷新的情况下,就可以产生局部刷新的效果。服务器进行数据处理之后,通过XML
返回给ajax需要的数据。
3.通过HTML,和css进行页面展示数据,显示给用户界面。
function ajax(data){
let xhr = null;
let params = formsData(data.data);
//创建对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//链接
if (data.type === 'GET') {
//open三个参数,请求方式,请求数据,是否同步异步
xhr.open(data.type,data.url + "?" + params,data.async);
xhr.send(null) //发送数据
}else if(data.type === 'POST'){
xhr.open(data.type,data.url,data.async);
//设置请求头(POST)
xhr.setRequestHeader("Authori-zation","Bearer " + '需要拼接的token' );
xhr.send(params) //发送数据
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
data.success(xhr.responseText);
}
}
//循环post传输数据分解成formData格式
function formsData(data){
let arr = [];
for (const i in data) {
arr.push(i + '=' + data[i])
}
return arr.join('&');
}
}
通过上面的ajax封装,我们进行简单的调用
ajax({
type:'GET', //请求方式
url:'url' , //路径
async:true, //同步异步
data:null, //传输数据
success:function(data){
console.log(data);
}
})
以上就是对ajax的简单封装!