AJAX最基础---使用XmlHttpRequest

    对于AJAX,我的理解就是浏览器在主线程继续运行的情况下，请他老婆XmlHttpRequest去向服务器请求资源，然后交给浏览器来显示资源。

使用AJAX最基础的方法分四步

1.创建异步对象createXmlHttp()

2.设置请求方式及参数open

2.1设置对应请求方式的报文头

GET       xhr.setRequestHeader("If-Modified-Since", "0");

POST    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3.设置回调函数onreadystatechange

4.4.将异步对象发送服务器 send

	//根据不同的浏览器会用不同的方法创建异步对象
	function createXmlHttp() {
    xhobj = false;
    try {
        xhobj = new ActiveXObject("Msxml2.XMLHTTP"); //lemsxml3.0
    }
    catch (e) {
        try {
            xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //lemsxml2.6
        }
        catch (e2) {
            xhobj = false;
        }
    }
    if (!xhobj && typeof XMLHttpRequest != 'undefined') {//Firefox,Opera 8.0+,Safari,谷歌浏览器
        xhobj = new XMLHttpRequest();
    }
    return xhobj;
}    

通过上边的方法创建异步对象。

 <script src="common/common.js" type="text/javascript"></script>
    <script type="text/javascript">
        var xhr = false;
        //根据Id返回对应的dom对象
        function gel(Id) { return document.getElementById(Id); }
        function GetDate() {
            //1.创建异步对象
            xhr = createXmlHttp();
            //2.设置请求参数，参数1代表改异步对象的请求方式，一般用GET和POST
            //参数2,设置请求的页面或资源，参数3设置是同步（false）还是异步（true）发送请求
            xhr.open("GET", "XmlRequst.ashx", true);
            //2.1设置浏览器不使用缓存，如果不设置该值，浏览器会在下一次会调用缓存，会导致获得
            //的值，不是服务的实时发回的内容，只有提交方式是GET，浏览器才会使用缓存，所以值有当提交方式是
            //GET时才会设置改报文头
            xhr.setRequestHeader("If-Modified-Since", "0");
            //Post方式提交表单时需要设置该项报文头
            //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //3.设置回调函数（这个回调函数主要是用来检测 服务器是否将数据发送回异步对象的）
            xhr.onreadystatechange = function() {
                //当服务器 已经将数据 发送到浏览器的异步对象了
                //readyState对象有5个值0-4，代表该异步对象请求的5个状态，每次状态改变时都会调用
                //onreadystatechange指定的函数
                if (xhr.readyState == 4) {
                    //status该值获得服务器通过异步对象发回的响应报文的状态吗
                    //如果返回的响应报文的状态码是200，才代表运行正确   
                    if (xhr.status == 200) {
                        //responseText该值是异步对象获得的响应报文的文本值        
                        // alert(xhr.responseText);
                        document.getElementById("msgDiv").innerHTML = xhr.responseText;
                    }
                    else {
                        alert("系统繁忙---请联系管理员！");
                    }
                }
            }
            //4.将异步对象发送服务器
            xhr.send(null);
            //xhr.send("txtName=tavb&txtPWD=123");//设置post方法的传给服务器的参数。
        }
    </script>
    <div id="msgDiv">
    
    </div>
    <input type="submit" value="请点击" οnclick="GetDate()" />