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的时候表示和服务器完成了交互。