相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的。
其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP !
<强>一、AJAX
AJAX的核心是XMLHttpRequest。
一个完整的AJAX请求一般包括以下步骤:
<李>实例化XMLHttpRequest对象李
<李>连接服务器李
<李>发送请求李
<李>接收响应数据李
我将AJAX请求封装成AJAX()方法,它接受一个配置对象params .
函数ajax (params) {
params=params | | {};
参数个数。data=https://www.yisu.com/zixun/params.data | | {};//判断是ajax请求还是jsonp请求
var json=参数。jsonp吗?jsonp (params): json (params);//ajax请求
函数json (params) {//请求方式,默认是得到的
参数个数。类型=(参数。类型| |“得到”).toUpperCase ();//避免有特殊字符,必须格式化传输数据
参数个数。data=https://www.yisu.com/zixun/formatParams (params.data);
var xhr=零;//实例化XMLHttpRequest对象
如果(window.XMLHttpRequest) {
xhr=new XMLHttpRequest ();
其他}{//IE6及其以下版本
xhr=new ActiveXObjcet (“Microsoft.XMLHTTP”);
}；//监听事件,只要readyState的值变化,就会调用readystatechange事件
xhr。onreadystatechange=function () {//readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
如果(xhr。readyState==4) {
var状态=xhr.status;//状态:响应的HTTP状态码,以2开头的都是成功
如果(状态祝辞=200,,状态& lt;300){
var="反应;//判断接受数据的内容类型
var type=xhr.getResponseHeader(“内容类型”);
如果(type.indexOf (“xml”) !==1,,xhr.responseXML) {
响应=xhr.responseXML;//文档对象响应
}else if (type===application/json) {
响应=JSON.parse (xhr.responseText);//JSON响应
其他}{
响应=xhr.responseText;//字符串响应
}；//成功回调函数
参数个数。成功,,params.success(响应);
其他}{
参数个数。错误,,params.error(状态);
}
}；
}；//连接和传输数据
如果参数个数。类型==玫健?{//三个参数:请求方式,请求地址(得到方式时,传输数据是加在地址后的),是否异步请求(同步请求的情况极少);
xhr.open(参数。类型,参数个数。url + & # 63;“+参数。数据,真实);
xhr.send(空);
其他}{
xhr.open(参数。类型,参数个数。url,真实);//必须,设置提交时的内容类型
xhr。setRequestHeader(“内容类型”、“应用程序/x-www-form-urlencoded;charset=utf - 8 ');//传输数据
xhr.send (params.data);
}
}//格式化参数
函数formatParams(数据){
var arr=[];
在数据(var的名字){//encodeURIComponent():用于对URI中的某一部分进行编码
arr.push (encodeURIComponent(名称)+ '=' + encodeURIComponent(数据[名字]));
}；//添加一个随机数参数,防止缓存
加勒比海盗。推动(' v=' +随机());
返回arr.join (', ');
}//获取随机数
函数随机(){
返回Math.floor (math . random () * 10000 + 500);
}
}
在上面的代码中readyState的值表示请求/响应过程的当前活动阶段,其值得含义如下:
使用实例:
ajax ({
url:“测试。php ',//请求地址
类型:“文章”,//请求类型,默认“得到”,还可以是“后”
数据:{“b”:“异步请求”},//传输数据
成功:函数(res){//请求成功的回调函数
console.log (JSON.parse (res));
}，
错误:函数(错误){}//请求失败的回调函数
});
<强>二,JSONP
AJAX之所以需要“跨域”,罪魁祸首就是浏览器的同源策略,即一个页面的AJAX只能获取这个页面相同源或者相同域的数据。如何叫“同源”或者”同域”呢?——协议,域名,端口号都必须相同,例如
http://example.com 和,https://example.com不同,因为协议不同,
http://localhost: 8080,和,http://localhost: 1000不同,因为端口不同,
http://localhost: 8080,和,https://example.com不同,协议,域名,端口号都不同,根本不是一家的。
