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框架, 似乎已经没有人这么笨去从底层写起了
转载于:https://www.cnblogs.com/deepwishly/archive/2010/03/25/2551268.html
相关资源：Ajax实现原理