XMLHttpRequest对象_Ajax异步请求重点(推荐)
一、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()); }
以上这篇XMLHttpRequest对象_Ajax异步请求重点(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:JQuery 选择器、DOM节点操作练习实例