Ajax中XMLHttpRequest对象的使用

前端之家收集整理的这篇文章主要介绍了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.f2er.com/ajax/162535.html

猜你在找的Ajax相关文章