Ajax的核心技术XMLHttpRequest方法

前端之家收集整理的这篇文章主要介绍了Ajax的核心技术XMLHttpRequest方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

整个Ajax技术紧紧围绕在XMLHttpRequest对象的周围,Ajax整个技术的过程如下:XMLHttpRequest发送请求,在与服务器交互中,其readyState状态可以监听到服务器

的响应状态,当服务器的响应完成的时候,XMLHttpRequest负责解析服务器响应,获取到响应之后,解析出响应的数据,通过DOM操作来加载服务器的响应。

XMLHttpRequest方法
abort():停止发送当前请求
getAllResponseHeader():获取服务器返回的的全部响应头
getResponseHeader("headerLabel"):根据响应头的名字获取对应的响应
open("method","URL"[,asyncFlag[,"userName"[,"password"]])
建立连接,设置方法和是否使用异步请求。用户名及密码
send(content):发送请求
setRequestHeader("label","value"):发送请求前,先设置请求头

XMLHttpRequest 属性
onreadystatechange :用于指定XMLHttpRequest对象状态变化时的事件处理函数
readyState : XMLHttpRequest对象的处理状态
responseText :用于获取服务器的响应文本
responseXML :用于获取服务器响应的XML文档对象
status :服务器返回的状态码
statusText :服务器返回的状态文本信息
XMLHttpRequest 对象状态(readyState)
0 对象还没有完成初始化
1 对象开始发送请求
2 对象的请求发送完成
3 对象开始读取服务器的响应
4 对象读取服务器响应结束
服务器响应有很多种,通过XMLHttpResponse对象的status和statusText属性都可以判断服务器响应是否正常。只有当服务器响应正常时,js才应该读取服务器响应信息。

服务器常用状态码如下。
200 :服务器响应正常
304 :该资源在上次请求后没有任何修改,通常用于浏览器的缓存机制
400 :无法找到请求的资源
401 :访问资源的权限不够
403 :没有权限访问资源
404 :需要访问的资源不存在
405 :需要访问的资源被禁止
407 : 访问的资源需要代理身份验证
414 :请求的URL太长
500 :服务器内部错误
当readyState的值为4时,响应完成;当status的值为200时,服务器响应正确。
发送请求步骤:
初始化XMLHttpRequest对象
打开连接:确定发送请求的方法:GET或POST,以及是否采用异步方式
设置XMLHttpRequest状态改变时的事件处理函数
发送请求,如采用POST方法发送,可发送带参数的请求
创建XMLHttpRequest对象
function createXHR(){
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHttp");
}else return null;
}
open()通常有三个参数:方法(get或post)、url、设置是否异步(TRUE或FALSE)
GET和POST
GET请求用于从服务器上获取数据;将参数数据转换成一个字符串,并将字符串添加到请求的服务器程序URL之后
POST请求用于向服务器发送数据;通过HTTP POST机制将请求的参数以及对应的值放在HTML HEADER中传输,用户看不到明码的请求参数值。
通常在传输请求参数时,建议使用POST请求
发送POST请求
使用open方法打开连接时,指定使用POST方法发送请求
设置正确的请求头,POST请求通常应设置Content-Type请求头
发送请求,请求参数可以在send方法中确定 “xmlRequest.send("id="+id);”
即使没有请求参数,使用send方法时,也一定要为其传入null参数。
发送XML请求
xml请求实质还是post请求,只是在发送请求的时侯将请求参数封装成XML字符串形式,服务器端则负责解析该字符串
客户端页面需要增加一个方法来创建xml字符串(如createXML()),将字符串作为send的参数“send(createXML())”
服务器端:// 定义一个StringBuffer对象来接受请求参数
StringBuffer xmlBuffer=new StringBuffer();
String line=null;
//通过request对象获取输入流
BufferReader reader=request.getReader();
//依次读取请求输入流的数据
while((line=reader.readeLine())!=null){
xmlBuffer.append(line);
//将输入流中读取的内容转换为字符串
String xml=xmlBuffer.toString();
//以DOM4J方式解析xml字符串
Document xmlDoc=new XPPReader().read(new ByteArrayInputStream(xml.getBytes()));
......
处理服务器相应
处理的时机
if(xmlRequest.readyState==4&&(xmlRequest.status==200||
xmlRequest.status==304)){
..........
responseText与responseXML
文本响应:客户端需要自己分析字符串,并将字符串解析成更加复杂的形式
xml响应:借助浏览器解析xml文档的能力。
var xmldoc=xmlrequest.responseXML
XMLHttpRequest对象的运行周期
step 1 创建一个XMLHttpRequest实例,然后用它来发送请求,这种请求可以是GET方式,也可以是POST
step 2 XMLHttpRequest发送后,服务器的响应何时到达、核实处理需要借助js的事件机制。XMLHttpRequest能触发的事件是onreadystatechange,
当XMLHttpRequest对象的状态改变是,将触发XMLHttpRequest对象指定的onreadystatechange事件(为其绑定回调函数
step 3 readyState==4&&(xmlRequest.status==200||xmlRequest.status==304)时,可以开始处理服务器响应
step 4 触发回调函数
step 5 回调函数需借助XMLHttpRequest来解析服务器响应,当调用responseText或responseXML获取服务器响应后,XMLHttpRequest对象的运行周期结束
step 6 js处理服务器响应

猜你在找的Ajax相关文章