Ajax中XMLHttpRequest对象的使用

   在Ajax的学习过程中，一个非常重要的对象即XMLHttpRequest，是学习Ajax技术的一个关键，下面总结对XMLHttpRequest对象的学习。

 

   视频学习过程中通过在html页面中触发onclick事件来调用js函数（用submit()为例），下面对js页面中的代码进行学习：

 

   5个步骤总体如下：

   1、创建XMLHttpRequest对象

   2、注册回调函数

   3、设置和服务器端交互的相应参数

   4、设置向服务器端发送的数据，启动和服务器端的交互

   5、判断和服务器端的交互是否完成，还要判断是否正确返回了数据   

   具体实现步骤如下：

   先创建一个全局变量用于实例化XMLHttpRequest对象：

 var xmlhttp;

         创建submit()函数，并在该函数中添加5个步骤的使用代码

function submit(){  //五步使用法}

   下面详解五步使用发步骤：

  （1）创建XMLHttpRequest对象

If(window.XMLHttpReqest){       //IE7.IE8.FireFox,Morilla.Safari,Opera       var xmlhttp = new XMLHttpRequest();       //解决有些浏览器服务端无法响应XMLMinoType的问题       if(xmlhttp.overrideMimeType) {              xmlhttp.overrideMimeType("text/xml");        } } else if (window.ActiveXObject) {        // IE6,IE5.5,IE5        //创建一个数组，包含所有可以用来创建activex控件的名称        var activexName  =["MSXML2.XMLhTTP.6.0","MSXML2.XMLHTTP.5.0",        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",        "MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for (var i=0; i<activexName.length; i++){            try{               var xmlhttp = new ActiveXObject (activexName[i]);               break;             }catch(e){                    }         }}        If (xmlhttp == undefind || xmlhttp ==null)       {          alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");            return;       }

   （2）注册回调函数

       xmlhttp.onreadystatechange= callback;   

    注意callback后不加括号,加括号后是将函数的返回值赋给onreadystatechange属性，这样xmlhttp对象则不能执行数据解析和页面更新操作。同时callback方法应该写在submit函数之外。

 

   （3）设置和服务器端交互的相应参数

     通过使用XMLHttpRequest的open方法来执行，open方法中参数有两种形式，”get”和”post”，先介绍get方式的open方法。

           //获取文本框中用户输入的内容

      var userName =document.getElementById("UserName").value;      //设置参数,通过get形式，第二个参数代表Ajax访问的内容属于url地址，第三个代表是否异步。      xmlhttp.open("GET","AJAX?name="+ userName, true);

   （4）设置向服务器端发送的数据，启动和服务器端的交互

     

    //因为通过get类型的open方法已经传入了userNae，此时send()的参数为null。    xmlhttp.send(null);

   （5）判断和服务器端的交互是否完成，还要判断是否正确返回了数据

    该过程在callback函数中进行，如下：

      

function callback() {     if (xmlhttp.readyState == 4) {       //表示和服务器的交互已经完成        if (xmlhttp.status == 200) {              //表示服务器的响应代码是200，正确返回了数据              //纯文本的接受方法              var message = xmlhttp.responseText;         //XML数据对应的DOM对象的接受方法         //使用的前提是，服务器端需要设置content-type为text/xml         //var domXml = xmlhttp.responseXML;          //记忆向div标签中填充文本内容的方法         var div =document.getElementById("message");         div.innerHTML = message;        }      }        }

   当在步骤三中使用post参数时，该段代码改写为如下格式：   

   //此时第一个参数改为”post”，第二个参数代表的意义不再是URL地址。   xmlhttp.open("post","AJAX",true);   //设置头文件   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

   同时第四步改为：

   xmlhttp.send("name=" + userName);

        这样即实现了post方式下的open方法。

 

 

至此，完成了在ajax中使用XMLHttpRequest对象的五个步骤。