学习Ajax

XMLHttpRequest是XMLHttp组件的对象，通过这个对象，Ajax可以像桌面应用程序一样只与服务器进行数据层的交换， 而不必每次都刷新界面，也不必每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又回忆了响应速度，缩短了用户的等待时间。在Ajax应用程序中，XMLHttpRequest对象负责将用户信息以异步通信方式发送到服务器端，并接收服务器响应信息和数据。JavaScript本身不具有向服务器发送请求的能力，使用window.open()方法重新打开一个页面，或使用XMLHttpRequest对象发送请求，前者是普通的同步交互模式，而后者是异步交互模式。

 

IE5.0 开始，开发人员就可以在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能，而Mozilla1.0及NetScape7则是创建继承XML的代理类XMLHttpRequest；XMLHttpRequest和XMLHttp组件法和属性类似，只是部份属性不同。

 

创建跨浏览器的xhr对象的方法：

//定义一个变量
        var http_request = false;

//IE浏览器中创建
        http_request = new ActiveXObject("Msxml2.XMLHTTP");//新版本IE
        http_request = new ActiveXObject("Microsoft.XMLHTTP");//旧版本IE

//Netscope浏览器
        http_request = new XMLHttpRequest();

 

在微软IE7.0版本浏览器中也已经支持了XMLHttpRequest,在IE7.0中同时支持以及上二种创建方式。在我们开发AJAX应用程序时一定要注意要兼容浏览器类型。

   

<script language="javascript" type="text/javascript">

 

    var xhr = false;
    function createXMLHttpRequest() { 

 
        //开始初始化XMLHTTPRequest对象
        if(window.XMLHttpRequest) {//如果是window.XMLHttpRequest对象

            //Mozilla,netscape 浏览器
            xhr = new XMLHttpRequest();  

   
            if (xhr.overrideMimeType) {//设置MiME类别     

           //有些版本的浏览器在处理服务器返回的未包含XML mime-type头部信息的内容时会报错，

           //因此要确保返回的内容包含text/xml信息。
                xhr.overrideMimeType("text/xml");
            }

           

             return xhr; 

        } else if(window.ActiveXObject) {//如果是window.ActiveXObject       

 
            //IE浏览器
            try {

                xhr = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本

                return xhr;

            } catch (e) {

                try {

                    xhr = new ActiveXObiect("Microsoft.XMLHTTP"); //ie旧版本

                    return xhr;

                } catch (e){}

            }
        }

        if(!xhr)
        {
            //异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例。");
            return false;
        }
    }

 

</script>

 

另外XMLHttpRequest对象提供了一系列属性和方法，来向服务器端发起异步HTTP请求，监听服务器状态，并在服务器完成数据响应处理之后接收服务器端返回的信息数据。

XMLHttpRequest对象的属性：

 

onreadystatechange ：指定当readyState属性改变时的事件处理句柄，属性只写。是readyState状态改变的事件触发器，用来指定当readyState属性发生改变时的处理事件。通常通过将事件处理函数名称赋予onreadystatechange的方式来为XMLHttpRequest指定事件触发器，而在事件处理函数中判断readyState状态值并做相应的处理。

xhr.onreadystatechange = processRequest;

processRequest作为事件处理函数，并在processRequest函数体内在readyState状态为4时开始执行。

readyState：返回当前请求的状态，属性只读。这些状态用长度为４的整形数据表示，其属性的状态含义如下：
    0：未初始化（对象已经建立，但是未初始化，即尚未调用open方法创建http请求）
    1：初始化（对象已经建立，但是未调用send方法发送http请求）
    2：发送数据（send方法已经被调用，但是当前的状态以及http头未知）
    3：数据传送中（已经接收部分数据，因为响应及http头不全，这时通过response系统方法获取部分数据会出现错误）
    4：传送完成（数据完毕，此时可以通过response系统方法获取完整的回应数据）

 responseBody:将回应信息正文以unsigned byte 数组形式返回，属性只读。
 responseText:以字符串的形式返回服务器响应信息，属性只读。
 responseXML:将响应信息格式化为XML Document对象返回，属性只读。

 

abort：取消当前请求；调用此方法，当前请求返回uninitialized状态。
语法：xhr.abort(); 

 

getAllResourceHeaders：获取相应http头信息；像JSP中的HttpServletRequest对象一样，获取http请求头信息

语法：headers = xhr.getAllResourceHeaders();

 

getResourceHeader：从响应信息中获取指定的http头信息。
语法：head = xhr.getResourceHeader("header-name");

open：创建一个新的http请求，并指定此请求的方法、URL、以及验证信息（用户名/密码）。
语法：xhr.open(method,url,async,user,password);
async为布尔值，指定请求是否异步方式，默认为true;

如果为真，当state状态改变时会调用onreadystatechange属性指向的回调函数。

如果服务器需要验证，则应该指定用户名和密码。

send：发送请求到http服务器并接收回应。创建http请求后，就可以向服务器发送http请求，send方法被调用
语法：xhr.send(varBody);

参数varBody为要发送给服务器的内容。

如果没有内容要发送，varBody可以省略,但最好写为http_request.send(null),因为如果省略不写在Firfox中会报错。

此方法的同步或异步方式取决于open方法中的async参数。
 

setRequestHeader：单独设定请求的某个头。
status:返回当前HTTP请求的状态码，属性只读。如：404＝“文件未找到”，200＝“成功”。

statusText:返回当前HTTP请求的状态行，属性只读。

 

------------------------------------------------------------------------------------------------------

//用户名校验的方法     
var xmlhttp; 
function verify() {

    //0、使用dom的方式获取文本框中的值  
    //document.getElementById("userName")是dom中获取元素节点的一种方法，

    //一个元素节点对应HTML页面中的一个标签，如果<input>  
    //value可以获取一个元素节点的value属性值  
    var userName = document.getElementById("userName").value;  
   
    //1、创建XMLHttpRequest对象  
    //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   
    if (window.XMLHttpRequest) {
        //针对FireFox，Mozillar，Opera，Safari，IE7，IE8  
        xmlhttp = new XMLHttpRequest();  
        //针对某些特定版本的mozillar浏览器的BUG进行修正  
        if (xmlhttp.overrideMimeType) {  
            xmlhttp.overrideMimeType("text/xml");  
        }
    } else if (window.ActiveXObject) {   
        //针对IE6，IE5.5，IE5  
        //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中  
        //排在前面的版本较新  
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
        for (var i = 0; i < activexName.length; i++) {  
            try{  
                //取出一个控件名进行创建，如果创建成功就终止循环  
                //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建  
                xmlhttp = new ActiveXObject(activexName[i]);  
                break;  
            } catch(e){ }  
        } 

    }  

    //确认XMLHTtpRequest对象创建成功  
    if (!xmlhttp) {   
        alert("XMLHttpRequest对象创建失败!!");  
        return;  

    } else {  
        alert(xmlhttp.readyState);
    }  
 
    //2、注册回调函数  
    //注册回调函数时，只需要函数名，不要加括号  
    //需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的  
    xmlhttp.onreadystatechange = callback;  
 
    //3、设置连接信息  
    //第一个参数表示http的请求方式，支持所有http的请求方式主要使用get和post  
    //第二个参数表示请求的url地址，get方式请求的参数也在url中  
    //第三个参数表示采用异步还是同步方式交互，true表示异步  
    xmlhttp.open("GET","AJAXServer?name="+ userName,true);  
 
    //POST方式请求的代码  
    //xmlhttp.open("POST","AJAXServer",true);  
    //POST方式需要自己设置http的请求头  
    //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
    //POST方式发送数据  
    //xmlhttp.send("name=" + userName);  
 
    //4、发送数据，开始和服务器端进行交互  
    //同步方式下，send这句话会在服务器端数据回来后才执行完  
    //异步方式下，send这句话会立即完成执行 
    xmlhttp.send(null);  
}  
 
//回调函数  
function callback() {  
    //alert(xmlhttp.readyState);  
    //5、接收响应数据  
    //判断对象的状态是交互完成  
    if (xmlhttp.readyState == 4) {  
        //判断http的交互是否成功  
        if (xmlhttp.status == 200) {  

            //获取服务漆器端返回的数据  
            //获取服务器段输出的纯文本数据  
            var responseText = xmlhttp.responseText; 

            //将数据显示在页面上  
            //通过dom的方式找到div标签所对应的元素节点  
            var divNode = document.getElementById("result");  

 
            //设置元素节点中的html内容  
            divNode.innerHTML = responseText; 

  
        } else {  
            alert("出错了！！！");  
        }  
    }  
}