Ajax和http协议

AJax和Http协议详解:
在jQuery中已经知道了ajax,并且通过 $.ajax()方法实现了和前后台完成的简单交互。但事实上在工作中jQuery所提供的功能是远远不够的,绝大部分的公司实际上并不希望他们的开发者使用现有的ajax框架,而是选择自行封装一个功能相似但针对性却更强的内容。因此要知道在js内部,ajax到底是怎样工作的。
Ajax全名为Asynchronous javascript and xml。是指围绕【由js向服务器发起http请求】这个功能而开发的一整套完整的做法。
由来:
99年Microsoft公司第一次在IE5.0中引入此功能。
04年Gmail发布、05年Google Map发布时此功能才被重视。
05年2月Ajax正式提出。
06年W3C发布其对应的国际化标准。
概述:
Ajax模块在处理网络请求的时候包括以下四个步骤:
1:创建Xhr对象
2:发出HTTP请求
3:接受服务器回传的数据
4:更新网页数据
Ajax可以发出同步请求,也可发出异步请求。但大多数情况下指的是异步请求,因为同步的ajax请求对浏览器会产生“阻塞效应”。
1:xhr对象
1.1xhr对象发送请求整体感知
【Ajax发送请求】这件事情并不是一句话带过就可以的,在ajax中整个请求从创建到发送都有着一套严格的标准流程。就好像车间生产产品,流水线上每一个步骤的操作完毕之后才能打包出售。
在ajax规则中,“请求”从创建到被发送需要至少经历一下几个步骤:
通过XMLHttpRequest类创建xhr对象
为xhr对象添加属性与回调方法
令xhr对象执行open()方法,指明请求被发送某处
令xhr对象执行send()方法,发送请求
说明:XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。通俗上来说将此对象称为request请求对象、请求对象或请求。
1.2xhr对象的常用属性与方法
(1)onreadystate属性
(2)readState属性
(3)status属性
(4)statusText属性
(5)responseText属性
(6)open()方法
(7)setRequestHeader()方法
(8)send()方法
(1)onreadystatechange属性
描述:onreadystatechange属性属性指向一个回调函数。当页面的加载状态发生改变的时候readyState属性就会跟随发生变化,而这时onreadystatechange属性所对应的回调函数就会自动被调用。
语法:
xhr.onreadystatechange = function(){};
(2)readState属性
描述:是一个读属性,用一个整数和对应得到常量来表示XMLHttpRequest请求当前所处的状态一般会在onreadystatechange事件的回调函数中,通过判断readState属性的值,进而执行不同状态对应的函数。
语法:
xhr.onreadystatechange = function(){
if(xhr.readState == n){
//执行对应的函数
}
}
说明:
值为0,对应常量UNSENT
表示XMLHttpRequest实例已经完成,但是open()方法还没有被调用。
值为1,对应常量OPEND
表示send()方法还没有被调用,仍然可以使用setRequestHeader()这顶HTTP请求头。
值为2,对应常量HEADERS_RECEIVED
表示send()方法已经执行,并且头信息和状态码已经收到。
值为3,对应常量LOADING
表示正在接受服务器传来的body部分的数据,如果responseType属性是text或者空字符串,responseText就会包含已经收到的部分信息。
值为4,对应常量ONDE
表示服务器数据已经完全接收,或者本次接收已经失败。
(3)status属性
描述:
表示本次请求所得到的HTTP状态码,它是一个整数。
语法:
if(xhr.readyState = = n){
if(xhr.status = = 200){
//通信成功
}
}
说明:
本属性是只读属性。
本属性有一下可能值:
200,OK,访问正常
301,Moved Permanently,永久移动
302,Moved temporarily,暂时移动
304,Not Modified,未修改
307,Temporary Redirect,暂时重定向
401,Unauthorized,未授权
403,Forbidden,禁止访问
404,Not Found,未发现指定网址
500,Internal Server Error,服务器发生错误
(4)statusText属性
描述:表示服务器发送的状态提示,是一个只读字符串。
语法:xhr.statusText
说明:不同于status属性,该属性返回状态码所对应的状态信息。比如OK。
(5)responseText属性
描述:返回从服务器接收到的字符串内容,该属性为只读。如果本次请求没有成功或者不完整,该属性就会等于null。如果服务器返回的数据格式json,就可以使用responseText属性来进行数据解析。
语法:xhr.responseText
(6)opend9()方法
描述:表示要将请求发往某处,只是设置而不是真的发送。
语法:xhr.opend(‘请求类型’ ,‘url地址’ ,是否异步);
说明:
第一个参数用来设置get/post请求。
第二个参数用来设置请求发送到的url地址。
第三个参数是布尔值用来设置是否异步发送,默认false表示同步。
(7)setRequestHeader()方法
描述:用于设置HTTP头信息。
语法:xhr.setRequestHeader(‘key’ , ‘value’);
说明:
本方法必须在open()之后、send()之前被调用。
本方法用来设置在请求发送时,一并被发送出的一些补充信息。
例子:
xhr.setRequestHeader(‘Content-Type’,‘application/json’);
xhr.setRequestHeader(‘Content-Length’,JSON.stringify(data ).length);
xhr.send(JSON.stringify(data));
(8)send()方法
描述:用于实际发出HTTP请求。
语法:xhr.send(formData);
说明:send()方法的参数是表单数据,为post请求准备。如果是get请求则参数直接写null即可。

发布了80 篇原创文章 · 获赞 0 · 访问量 3452

猜你喜欢

转载自blog.csdn.net/weixin_43786904/article/details/103999550
今日推荐