XMLHttpRequest五步学习法

  XMLHttpRequest五部曲

 

  在上一篇博客中主要讲了一下AJAX的基础知识,对AJAX进行了一下简单的讲解。既然XMLHttpRequest对象是AJAX的核心技术,那么这篇博客将学习如何使用XMLHttpRequest对象,实现异步操作。下面以验证表单为例说一下。

  第一部

  建立XMLHttpRequest对象

  由于不同的浏览器支持XMLHttpRequest对象的建立方式不同,所以我们创建XMLHttpRequest对象的方式要有选择性。比如:IE6 、IE5等比较旧版本的IE需要使用ActiveXObject来实现创建,IE中比较高级的版本、firefox 、Opera 等就可以直接使用 new XMLHttpRequest 完成创建。

  JS代码:

    

       //1.创建XMLRequest对象

               if(window.XMLHttpRequest){
                    //IE7,8 fireFox, Opera
                    xmlhttp = newXMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                       xmlhttp.overrideMimeType("text/xml");
                    }elseif(window.ActioveXObject){

                        //IE 老版本的
                        varactiveName==["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",

                       "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",

                        "Microsoft.XMLHTTP"];    

                   for(var i; i<activexName.length; i++){
                           try{                    
                                varxmlhttp=new ActiveXObject(activexName[i]);
                               break;
                           }catch(e){                           

                            }
                    }                   
                    }
                }
               if(xmlhttp==nudefind || xmlhttp==null){

                    alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                    return;
                }

  第二部

  注册回调函数

  设置的毁掉函数不要再函数名后面加括号,括号表示将回调函数的返回值注册给noreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。

  JS代码:

  //错误的写法:xmlhttp.onreadystatechange=callback();  
  xmlhttp.onreadystatechange=callback;

  第三部

  使用open方法设置和服务器端交互的基本信息

  Open(“method”,“url”,boolean),第一个参数提供调用的特定方法(get、post),第二个参数提供所调用资源的URL,boolean 表示同步(false)或者异步操作(true)。

  GET方法

  userName为获取的用户名的id

  xmlhttp.open("GET","AJAX?name=" + userName,true);

  POST方法

  Post方式,open方法后需要先调用setRequestHeader方法来设置Content-Type,然后调用send方法,send中的参数为请求的数据。

       //设置和服务器交互的相应参数
              xmlhttp.open("POST","AJAX",true);              
               //POST方式交互所需要增加的代码
              xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  第四部

  设置发送的数据,开始和服务器端交互

  由于open方法使用的方式不同,所以使用send方法发送数据的参数也有所不同。

  GET方式:

  Xmlhttp.send(null);

  POST方式:

  Xmlhttp.send(“name”+userName);

  第五部

  在回调函数中判断交互是否结束,影响是否正确,并根据需要获取服务器端返回的数据,更新页面内容。

  

     function callback(){

                //5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回

               if(xmlhttp.readyState==4){

                    //表示和服务器端的交互已经完成

                   if(xmlhttp.status==200){

                        //表示服务器的响应代码是200,正确返回了数据

                        //纯文本数据的接受方法

                        varmessage=xmlhttp.responseText;

                        //XML数据对应的DOM对象接受方法

                        //使用的前提是,服务器端需要设置contenttype为text/xml

                        //vardomXml=xmlhttp.responseXML;                       

                        //记忆向div标签中填充文本内容的方法

                        var div=document.getElementById("message");

                       div.innerHTML=message;
                    }
                }
            }

  注意事项

  1. 由于浏览器的问题导致我们创建XMLHttpRequest对象的实现方式不同。Open的方法参数最多有5个(method ,url,Boolean,username,password)其中

   method表示HTTP的请求方法,包括GET和POST;

   URL表示请求的服务器的地址;

   Boolean中true表示异步操作、false表示同步;

   Username和password 分别表示用户名和密码,可以不写。

  2.设置的回调函数没有括号()。

  3.使用回调函数时,判断readyState==4的时候表示和服务器完成了交互。

XMLHttpRequest五步学习法

上一篇:mini2440使用u-boot从nfs启动linux


下一篇:分享一个很实用的代码,可以将以逗号分隔的数字以从大到小的方式排序后返回