原生ajax的封装
作者:互联网
1.什么是Ajax?
Ajax定义:Ajax(Asynchronous JavaScript+XML,即异步JavaScript加XML), 是一种通过异步请求的方式向服务器请求数据,在无需重新刷新整个网页的情况下,能够更新部分网页的技术。
作用:更好的提升用户的体验,并减少网络数据的传输量。
2.ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
3.ajax应用场景
ajax主要应用与表单验证、动态加载数据,按照需求取数据、改善用户体验、数据局部刷新等等。
4.实现ajax的核心
(1)XMLHttpRequest对象
所有现代浏览器都通过XMLHttpRequest构造函数原生支持XHR对象
let xhr = new XMLHttpRequest();
(2)open()方法
open()方法接收3个参数,分别是:请求类型("get"、"post"等)、请求URL,以及表示请求是否异步的布尔值(true 异步,false 同步),格式如下:
xhr.open('get','/api/login','true');
调用open方法不会实际发送请求,只是为发送请求做好准备。
注意:只能访问同源URL,也就是域名相同、端口相同、协议相同。如果请求的URL与发送请求的页面在任何方面有所不同,则会抛出安全错误。
(3)send()方法
要发送定义好的请求,必须调用send()方法,调用send()之后,请求就会发送到服务器
let xhr.open("get","example.text",true);
xhr.send(null);//send方法接收一个参数,是作为请求体发送的数据,如果不需要发送请求体,则必须传null
(4).readyState:返回当前文档的载入状态(即当前处在请求/响应过程的那个阶段)
0:未初始化(Uninitialized)。尚未调用open()方法。
1:已经打开(Open)。已经调用open()方法,尚未调用send()方法。
2:已发送(Sent)。已调用send()方法,尚未收到响应。
3:接收中(Receiving)。已经收到部分响应。
4:完成(Complete)。已经收到所有的响应,可以使用了。
每次readyState从一个值变为另一个值,都会触发readystatechange事件。因此,可以借此机会检查readyState的值。一般我们只关心readyState值是4,表示数据已就绪。为保证跨浏览器兼容,onreadystatechange事件处理程序应该在调用open()之前赋值。如下:
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);//成功时响应体返回的实体
}else{
alert('Request was unsuccessful:'+xhr.status);//失败时返回响应的状态
}
}
};
xhr.open('get','example.txt',true);
xhr.send(null);
(5).responseText:作为响应体返回的文本。
(6).responseXML:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应的数据的XML DOM文档。
(7)status:响应的HTTP状态码
1XX:信息性状态码,表示接受的请求正在处理
2XX:成功状态码,表示请求正常处理
3XX:重定向状态码,表示需要附加操作来完成请求
4XX:客户端错误状态,表示服务器无法处理请求
5XX:服务器错误状态,表示服务器处理请求出错
(8)HTTP头部
每个HTTP请求和响应都会携带一些头部字段,XHR对象会通过一些方法暴露于请求和响应相关的头部字段。默认情况下,XHR请求会发送一下头部字段。
Accept:浏览器可以处理的内容类型。
Accept-Charset:浏览器可以显示的字符集。
Accept-Encoding:浏览器可以出来的压缩编码类型。
Accept-Language:浏览器使用的语言。
connection:浏览器与服务器的连接类型。
Cookie:页面中设置的cookie。
Host:发送请求的页面所在的域。
Referer:发送请求的页面的URL。
User-Agent:浏览器的用户代理字符串。
发送额外请求头可以使用setRequestHeader()方法,这个方法接收两个参数,分别是请求头的名称和值。注意:为保证请求头部被发送,必须在open()之后,send()之前被调用setRequestHeader()
例子如下:
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
alert(xhr.responseText);//成功时响应体返回的实体
}else{
alert('Request was unsuccessful:'+xhr.status);//失败时返回响应的状态
}
}
};
xhr.open('get','example.txt',true);
xhr.setRequestHeader("MyHeader","MyValue");//open()之后send()之前
xhr.send(null);
(9)GET请求与POST请求的区别
1.GET请求
最常用的请求方法,用于向服务器查询某些信息,必要时,需要在get请求的URL后面添加查询字符串参数,对于XHR而言,查询字符串必须正确编码后添加到URL后面,然后在传给open()方法。
查询字符串中的每个名和值都必须使用encodeURICompenent编码,所有的名/值对必须以和号(&)分隔,如下所示:
xhr.open('get','example.php?name1=value1&name2=value2',true);//get请求参数拼接在url上面
2.POST请求
第二个最常用的请求,用于向服务器发送 应该保持的数据。例子如下:
xhr.open("post",'/api/login',true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//配置请求头
xhr.send('username=xx&password=xxx');//发送的请求数据,post放在send里面
(10)原生JS封装ajax请求
/*
*@method jsonUrl(josn) 处理json格式数据,返回成get请求URL数据格式name1=value1&name2=value2
*/
function jsonUrl(json){
var res='';
var arr=[];
for(var key in json){//for in 遍历对象获取属性和值key为属性,json[key]为对应属性值
arr.push(key+'='+json[key])
}
res=arr.join('&');
return res;
}
/*
*@method ajax(json) 封装ajax
*/
function ajax(json){
if(!json){
alert('需要传值');
return;
}
//默认值的设定
if(!json.url){
alert('后台的地址必填项');
return
}
json.type=json.type || 'get';
json.data=json.data || {};
//1、创建一个ajax对象
var oAjax;
//考虑兼容性
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else if(window.ActiveObject){ //兼容IE6一下版本
oAjax=new ActiveXobject('Microsoft.XMLHTTP');
}
//.toLowerCase() 转换成小写
switch (json.type.toLowerCase()){
case 'get':
//2、创建链接 oAjax.open('请求的方式','请求的地址',是否异步)
oAjax.open('get',json.url+'?'+json2url(json.data),true)
//3、发送
oAjax.send();
break;
case 'post':
//2、创建链接 oAjax.open('请求的方式','请求的地址',是否异步)
oAjax.open('post',json.url,true);
//请求头的类型
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3、发送
oAjax.send(json2url(json.data));
break;
}
//4.等待接收消息
oAjax.onreadystatechange=function () {
if(oAjax.readyState==4){//通讯已经完成,数据全部接收
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){//网络状态是成功
/*console.log(oAjax.responseText)*/
json.success && json.success(oAjax.responseText);
}else{
json.error && json.error(oAjax.status);
}
}
}
}
基本的使用示例:
ajax({
url:'api/login'//后台的地址
type:'post',
data:{
username:'username',
password:'password',
},
success:function(data){
//服务器返回响应
}
//异常处理
error:function(err){
console.log(err)
}
})
标签:原生,封装,请求,oAjax,json,send,xhr,ajax,open 来源: https://blog.csdn.net/goutaohandsome/article/details/118738151