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")}此时XMLHttp.readyState = 02.设置回调函数XMLHttp.onreadystatechange = function(){......};3.设置和服务器交互的连接属性XMLHttp.open("发送方式:get或者post等", url, true或者false);其中第三个参数:true表示异步执行,意味着send() 立即返回等待服务器相应的同时,前端页面代码还可以??????????????????????????? 继续执行下去??????????????????????????? false表示同步执行,意味着send()方法会阻塞并不会返回,直到 readyState 为 4 并且服??????????????????????????? 务器的响应被完全接收,客户端页面会滞留在send()方法此时XMLHttp.readyState = 14.向服务器发送请求XMLHttp.sendI(null)此时XMLHttp.readyState = 2
?
当所有的 HTTP 响应头部已经接收,send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange
?
事件句柄。如果响应较长,send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄:这可以
?
作为一个下载进度指示器。最后,当响应完成,send() 或后台线程把 readyState 设置为 4,并最后一次触发
?
事件句柄。
?
5.回调函数
?
用于接受服务器的响应信息
?
if(XMLHttp.readyState == 4){
??? //表示响应完成
??? if(XMLHttp.status == 200){
???? //表示http响应完成
?????? //使用respinseText和respinseXML
??? }
}