Ajax原理
Ajax实现原理小结:
实现Ajax的关键是使用XMLHttpRequest对象(下简称XHR对象).
要注意的是XHR不是一个W3C标准, 所以不同浏览器存在不同的实现方式. 因此这影响了最最基本的第一步.
Step 1. 创建XHR对象实例.
以下的代码是一基本实现逻辑:
var xmlHttp;
fucntion createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
Step 2. 向服务器做请求.
利用第一步创建的XHR对象实例中的open方法建立对服务器脚本的调用. open
方法的原型是void
open(string method, string url, boolean asynch, string username, string
password). 其中前两个参数是必要的, 后三个是可选的. method即调用方法, 可以是GET, POST或PUT.
asynch参数设定此请求为异步还是同步, 默认值为true, 异步(设置为false就没意义了撒).
xmlHttp.open("GET", "
http://server/process.php?user=xxx
");
Step 3. 指定回调函数,
即当服务器返回结果时如何处理结果.
这里要把回调函数的指针赋值给XHR对象的onreadystatechange
事件.
需要注意的是在回调函数检查XHR对象的readyState
和status
(分
别是请求的状态/*0=未初始化, 未调用open; 1=正在加载, open之后send之前; 2=已加载, 通常此时可使用响应的头部信息;
3=交互中; 4=完成*/和服务器的HTTP状态/*200对应OK, 404对应Not Found*/). IBM
developWorks有文章介绍, 不同浏览器对于"请求的状态"有不同的处理, 比如Firefox有1234, Opera就只有34.
1,2这两个状态是被支持得最少的, 所以如果要写函数处理这两个状态的话, 就可能报错.
一般来说, 回调函数只要检查readyState是否为4, HTTP状态码是否为200就行了.
服务器的响应可以字符串或XML对象两种形式返回.
如此则在浏览器端可分别使用XHR对象的responseText或responseXML来接收.
xmlHttp.onreadystatechange=callback;
function callback(){
if(xmlHttp.readtState==4){
if(xmlHttp.status==200){
alert("Server responsed the text:
"+xmlHttp.responseText);//执行指定的FUNCTION
}
}
}
Step 4. 使用XHR对象的send方法发送请求.
send方法有
一个参数, 通常是一个字符串或者是一个XML对象. 当open方法中设置的method为"GET"的时候, send的参数常常是null;
使用"POST"方法发送数据的话, 则需要给send提供参数. ("PUT"方法的话, 暂时还没看到)
xmlHttp.send(null);
当客户端的某事件触发了, 通常是用户点击了某个链接或者button, 需要向服务器进行交互了, 那么就可以在那么Event Handler中使用以上函数或语句了.
另外, IBM developeWorks建议, XHR对象应该声明为全局变量, 并且它的初始化应该也是在全局中进行, 以便在发现浏览器不能使用XHR对象的时候作相应处理.
再另外就是, 其实现在有很多的Ajax框架, 似乎已经没有人这么笨去从底层写起了