Ajax基石之一:XMLHttpRequest -> XMLHttpRequest经典例子（代码来自于Ajax in Action）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- XML异步加载数据完整的生命周期例子代码 --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>XML异步加载数据完整的生命周期例子代码</title></head><script>var req = null;var console = null;var READY_STATE_UNINITIALIZED = 0;var READY_STATE_LOADING = 1;var READY_STATE_LOADED = 2;var READY_STATE_INTERACTIVE = 3;var READY_STATE_COMPLETE = 4;function sendRequest(url, param, HttpMethod) {if (!HttpMethod) {HttpMethod = "GET";}req = initXMLHTTPRequest();if (req) {req.onreadystatechagnge = onReadyState;req.open(HttpMethod, url, true);req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");req.send(param);}}function initXMLHTTPRequest() {var xRequest = null;if (window.XMLHttpRequset) {xRequest = new XMLHttpRequest();//Mozilla/Safari} else if (typeof ActiveXObject != "undefined") {xRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE}return xRequest;}function onReadyState() {//定义回调函数var ready = req.readyState;var data = null;if (ready == READY_STATE_COMPLETE) {//检查readyStatedata = req.responseText;//读取相应数据} else {data = "loading ... [" + ready + "]";}toConsole(data);}function toConsole(data) {if (console != null) {var newline = document.createElement("div");console.appendChild(newline);var txt = document.createTextNode(data);newline.appendChild(txt);}}window.onload= function () {console = document.getElementById('console');sendRequest("data.txt");}</script><body></body></html>不同的浏览器，执行结果不太一样:
IE:
loading ...
loading ...
loading ...
Here is some text from the server!
Firefox 1.0
loading ...
loading ...
loading ...
loading ...
从代码中可以看出XML技术异步加载数据的方式：
通过XMLHttpRequest向服务器发送一个请求，这个请求是由浏览器额外开一个Http异步请求线程来处理。同时定义了一个回调函数，这个函数相当于一个事件触发的函数，函数触发的条件就是web服务器对这个请求返回一个response。浏览器发送XMLHttpRequest的线程监听到了这个response，会将这个请求放到JavaScript引擎线程队列的最后，等待JavaScript引擎线程的执行，JavaScript引擎始终是单线程执行的。
页:
[1]