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开发 , 其他 ,