XMLHttpRequest对象_Ajax异步请求重点

 

XMLHttpRequest对象

一、XMLHttpRequest对象

1.Ajax能够是实现异步传输，所依赖的就是JavaScript中的XMLHttpRequest

2.XMLHttpRequest对象是XMLHttp组件的对象，它是一个抽象对象，允许脚本从服务器获取返回的eXML数据或将数据发送到服务器端

3.XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互，不必每次刷新页面

4.XMLHttpRequest最早在Microsoft Internet Explorer5.0中作为一个ActiveX控件提供，后受到广泛应用

5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XMLHttpRequest对象

6.XMLHttpRequest不是W3C标准，可采用多种方法用JavaScript来创建XMLHttpRequest实例

7.在IE中XMLHttpRequest实现为一个ActiveX控件，而其他浏览器则实现为一个JavaScript内置对象

二、XMLHttpRequest对象创建

<script type="text/javascript">

 

三、XMLHttpRequest对象属性（接收并显示当前状态）

1.readySate-记录返回请求的状态

。0-为初始化：对象已经建立，单位初始化，open方法还未调用；

。1-初始化：对象已经建立，但还未调用send方法发送请求；

。2-发送数据：send方法已调用，但HTTP头未知；

。3-数据传输中：已经接受部分数据，但响应不完全；

。4-完成：数据接受完成，此时才可以获取完整的返回数据

2.responseText-接收客户端的HTTP响应的文本内容

。只读

。当readySate为1/2，responseText值是一个空字符串；

。当readyState为3，响应信息正在接受还未完成；

。当readyState为4，表示可以响应信息已经接收完成

。xmlHttp默认响应数据编码为UTF-8

3.responseXML-在send（）执行后，将返回的信息格式化为XML Document对象

。Content-Type指定的MIME类型应该为text/HTML

。如果Content-Type不包含这种类型，responseXML在接收时将会得到一个null值

4.status-在send（）执行后，可使用status读取事物状态

。长整型数据

。返回当前请求的HTTP的状态码

。只有当readyState为3或4时才使用该属性，否则读取status会发生错误

。100-客户必须继续发送请求

。200-交易成功

。400-错误请求

。403-请求不允许

。404-没有发现文件、查询、URL

。500-服务器内部错误

。502服务器暂时不可使用

。505-服务器不支持或拒绝不支持请求头中的HTTP版本

5.statusText-send（）执行后，可通过statusText读取事物状态

。返回当前HTTP请求的状态行

。只有当readyState为3或4时才可使用该属性，否则读取state会发生错误

6.Onreadystatechange-readyState发生变化时所要执行的操作

。通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理

。在事件处理函数中根据readyState的状态值进行相应的处理

。例：

function test(){

xmlHttp.onreadystatechange=showInfo;

var url=”/ajax/urlInfo”;//请求路径

xmlHttp.open(“GET”,url,true);

xmlHttp.send(null);

}

Function showInfo(){

If(xmlHttp.readyState==4){

alert(“success”);

}

}

四、XMLHttpRequest对象方法（动态处理各种信息：数据的发送和接收、请求与响应的处理等）

1.abort（）-终止当前操作

。停止XMLHttpRequest对象对HTTP的请求，把该对象恢复到初始状态

2.open（）-xmlHttp.open(method,url,mode,user,pwd)

。创建一个新的HTTP请求，并指定该请求的方法、URL、验证信息等

。method：POST、GET、PUT（可忽略大小写）

。url:请求的目标地址

。mode：指定请求是否为异步，默认true；当为true时，当state的状态改变时会调用onreadystatechange属性所指定的处理函数

。调用open（）后，XMLHttpRequest对象将readyState属性设为1并恢复responseText、responseXML、status、statusText等属性的初始值，并且复位请求头部信息

调用open（）时，readyState为4，则XMLHttpRequest对象将复位以上的值

3.send（）-xmlHttp.send（content）

。发送请求到服务器并接受回应

4.setRequestHeader（）-setRequestHeader（header，value）

。单独设定某个请求的HTTP头信息

。当readyState为1时，可在send（）后调用此方法，否则返回一个异常

。如果已经存在该名称的HTTP头，则将原来信息覆盖

。header-头名称：字符串型

。value-头名称的值：字符串型

5.getResponseHeader（）-读取服务器发出信息的头部

。HEAD请求忽略内容，所以其响应比对GET或POST响应小

获取内容：

。Content-Type：内容类型

。Content-Length：内容长度

。Last-Modify：最后一次修改的日期

。例：function getHeadInfo（）{

if(xmlHttp.readyState==4){

if(headeyType==”Content-Type”){

window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”);

}

else if(headType==”Content-Length”){

window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”);

}

else if(headType==”Last-Modify”){

window.alert(“Last-Modify:”+xmlHttp.getResponseHeader);

}

}

}

。在获取头部信息时，并不是所有信息都能获取

6.getAllResponseHeaders（）-获取所有头部信息

。在获取时只用HEAD即可获取

。例:fuction headRequest(){

creatXMLHttpRequest();

xmlHttp.onreadystatechange=getHeadInfo;

xmlHttp.open(“HEAD”,”url”,false);

xmlHttp.send(null);

}

function getHeadInfo(){

if(readyState==4){

Alter(xmlHttp.getAllResponseHeaders());

}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有