什么是Ajax

Ajax 全称(Asynchronous JavaScript And XML)中文名阿贾克斯
Ajax 异步 JavaScript 和 XML
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如何创建Ajax请求

GET请求

//1.创建ajax对象
var ajax = new XMLHttpRequest();
//2.连接服务器
//第一个参数为请求方式常用的get/post 第二个参数为请求的接口地址url 第三参数为同步或异步默认为true异步
ajax.open('GET', 'login.php?key='+value, true); 
//3.发送请求 GET请求的参数跟在url后面
ajax.send();
//监听响应状态
ajax.onreadystatechange = function () {if (xhr.readyState == 4) {  //判断请求是否完成if(xhr.status == 200){	//判断请求是否成功//根据返回的数据类型获取responseXML或者xhr.responseTextvar res = ajax.responseXML?ajax.responseXML:ajax.responseText;console.log(res)}}
}

POST请求

//1.创建ajax对象
var ajax = new XMLHttpRequest();
//2.连接服务器
//第一个参数为请求方式常用的get/post 第二个参数为请求的接口地址url 第三参数为同步或异步默认为true异步
ajax.open('post', 'login.php', true); 
//3.设置请求头信息 POST请求需要加请求头
ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送请求
ajax.send('key=' + value);
//监听响应状态
ajax.onreadystatechange = function () {if (xhr.readyState == 4) {  //判断请求是否完成if(xhr.status == 200){	//判断请求是否成功//根据返回的数据类型获取responseXML或者xhr.responseTextvar res = ajax.responseXML?ajax.responseXML:ajax.responseText;console.log(res)}}
}

GET请求缓存问题

浏览器机制决定了当发送GET请求时url地址没有发生变化将会直接从缓存获取数据而不向服务器发送请求
这就导致了当服务器数据发生变化时请求不到最新的数据
解决方法是在get请求的url后面追加一个时间戳

ajax.open('get', 'login.php?key='+value+"&_t="+new Date().getTime(), true); //解决GET缓存问题 

对原生Ajax进行封装

原生Ajax请求的步骤比较繁琐如果不把它封装起来会导致代码的冗余也降低了开发效率
可以封装一个ajax方法来方便后期的开发

//封装Ajax请求
function ajax(params) {params.method = params.method ? params.method.toLowerCase() : "get";  //get或者post请求不传默认getparams.sync = params.sync == undefined ? true : params.sync; //是否异步不传默认异步params.cache = params.cache ? params.cache : false; //是否使用浏览器缓存不传默认不使用缓存params.url = params.cache || params.method == 'post' ? params.url : params.url + "?&t=" + new Date().getTime();//拼接url地址主要是为了解决缓存问题if (params.data) {  //判断data是否传入var str = "";   //拼接date字符串for (const key in params.data) { //循环data对象str += key + "=" + params.data[key] + "&";//拼接data}params.data = str.substring(0, str.length - 1);//把str重新赋值给data这里并去掉最后一个&} else {params.data = null;//如果data没有传入设为null}var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(); //构建请求对象xhr.open(params.method, params.url, params.sync);   //设置连接if (params.method == "post") {    //判断是否为post请求xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//为post请求设置请求头}xhr.send(params.data);//发送请求xhr.onreadystatechange = function () {  //监听请求状态if (xhr.readyState == 4) {  //判断请求是否完成switch (xhr.status) {   //判断返回状态码case 200:   //如果为200表示请求成功//调用success回调函数并传入相应的数据params.success && params.success(xhr.responseXML?xhr.responseXML:xhr.responseText);break;default:    //不为200表示请求失败params.fail && params.fail(xhr.status);break;}//无论成功或者失败都会调用params.complete && params.complete(xhr);}}
}

请求示例

// 请求示例get(不带参数)
ajax({url: "data/test3.json",success(res) {console.log(JSON.parse(res));}
})
//  请求示例get(带参数)
ajax({url: "data/form.php?user=laowang&pass=12345",success(res) {console.log(res);}
})
// 请求示例get(xml)
ajax({url: "data/test4.xml",success(res) {console.log(res);}
})
// 请求示例post(不带参数)
ajax({method: 'post',url: "data/test3.json",success(res) {console.log(JSON.parse(res));},complete:function(xhr){console.log(xhr);}
})
//请求示例post(带参数)
ajax({method: 'post',url: "data/post.php",data: { age: 18, sex: 'nan' },success(res) {console.log(res);}
})

Ajax是前端开发工作非常重要也非常常用的,市面上也有很多第三方封装的Ajax例如jQuery的$.ajax或者是vue的axios但无论是哪一个它的底层都是原生的Ajax所有学习原生的Ajax有利于加深对各种第三方ajax的理解