Ajax原理

/*   
 * AJAX建立和服务器的连接，接收服务器的请求，处理服务器返回的数据
 * 开发步奏：
 *    *创建XMLRequest对象
 *    *打开和服务器的连接
 *    *发送数据
 *    *接收服务器的响应
 * 
 */
/*
 * 创建XMLRequest对象
 */
function ajaxFunction(){
var xmlHttp;
try{ //非IE浏览器
xmlHttp = new XMLHttpRequest;
}
catch(e){
try{//IE浏览器
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){ 
}
}
}
return xmlHttp;
}


window.onload=function(){
//<input type="button" name="ok" id="ok" value="测试服务器连接">
document.getElementById("ok").onclick=function(){

   alert("xxxxxxxx");
/*
* 1.获取XMLRequest对象
*/ 
var XMLRequest = ajaxFunction();
alert(XMLRequest);
/*2.处理服务器端的响应
*   *XMLHttpRequest对象中有一个readyState属性，该属性代表Ajax请求的当前状态，他的值用数学代表
*   * 0代表未初始化，还没有调用open方法
*   * 1代表正在加载，open方法已被调用，但send方法还没有调用
*   * 2代表已加载完毕，send方法已被调用，请求已经开始
*   * 3代表交互中，服务器正在发送响应
*   * 4代表完成，响应发送完毕
*   * 每次readyState的改变都会触发onreadystatechange事件
*/
alert("xxxxxxxx");
XMLRequest.onreadystatechange = function(){
alert(XMLRequest.readyState);
}

 
/*
* 3.打开和服务器的连接
* XMLRequest.open(method,url,asynch)
*      *method:表示请求方法
*      *url:表示请求路径
*      *asynch:表示请求是否异步传输，默认值为true(异步)
    */ 
alert("xxxxxxxx");
XMLRequest.open("get","servlet/TestServlet",true);

//4.发送数据,若选用的是get请求，则不会发送任何数据，给send方法传递null
XMLRequest.send(null);
}
}