当前位置:编程学习 > XML/UML >>

Alax技术实现的基本原理——XMLHttpRequest对象的使用

很久之前就听说Ajax技术,但一直对其只是一知半解,只知道它可以提供客户端的数据不比完全提交的服
务器上的“半刷新”效果。现在想好好好学习一下。
    虽然JQuery提供了对Ajax的封装,但明白其中的基本原理是那么的重要。可以使用最基础的javascript代码
实现Ajax效果。
 
1.创建XMLHttpRequest对象
   
不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
Internet Explorer 使用 ActiveXObject。
其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
要克服这个问题,可以使用这段简单的代码:
var XMLHttp=null;
if (window.XMLHttpRequest){
     XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject){
    XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}  www.zzzyk.com
此时XMLHttp.readyState = 0
 
2.设置回调函数
XMLHttp.onreadystatechange = function(){......};
 
3.设置和服务器交互的连接属性
XMLHttp.open("发送方式:get或者post等", url, true或者false);
其中第三个参数:true表示异步执行,意味着send() 立即返回等待服务器相应的同时,前端页面代码还可以
                            继续执行下去
                            false表示同步执行,意味着send()方法会阻塞并不会返回,直到 readyState 为 4 并且服
                            务器的响应被完全接收,客户端页面会滞留在send()方法
此时XMLHttp.readyState = 1
 
4.向服务器发送请求
XMLHttp.sendI(null)
此时XMLHttp.readyState = 2   www.zzzyk.com
当所有的 HTTP 响应头部已经接收,send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange
事件句柄。如果响应较长,send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄:这可以
作为一个下载进度指示器。最后,当响应完成,send() 或后台线程把 readyState 设置为 4,并最后一次触发
事件句柄。
 
5.回调函数
用于接受服务器的响应信息
if(XMLHttp.readyState == 4){
    //表示响应完成
    if(XMLHttp.status == 200){
     //表示http响应完成
       //使用respinseText和respinseXML
    }
}
补充:Web开发 , 其他 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,