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对象的五个步骤。

原文地址：https://www.jb51.cc/ajax/162535.html

Ajax中XMLHttpRequest对象的使用

相关推荐