XMLHttpRequest对象的创建

首先了解 XMLHttpRequest 对象的基本运用

XMLHttpRequest 对象用于和服务器交互数据
如需将请求发送到服务器，我们使用 XMLHttprequest 对象的 Open() 和 send 方法。 open中要明确确使用的是 Get 还是 Post

与 post 相比， get 更简单快捷，并且在大部分情况下都能用
然而，在以下情况中，请使用 post 请求。
无法使用缓存文件
向服务器发送大量数据（ post 没有数据量限制）
发送包含未知字符的用户输入时。 post 比 get 更稳也更可靠。

下面是创建 XMLHttpRequest 对象。
不同的浏览器的创建方式略有不同：

1建立

//创建不同的浏览器代码封装
    if(window.XMLHttpRequest){
       
        xmlHttprequest=new XMLHttpRequest();
        if(xmlHttprequest.overrideMineType){
           
            xmlHttprequest.overrideMineTYpe("text/xml");
        }
    }else if(window.ActiveXObject){
       
        var activeName=["MSXM2.XMLHTTP","Miscrosoft.XMLHTTP"];
        for(var i=0;i<activeName.length;i++){
            try {
               xmlHttprequest=new ActiveXObject(activeName[i]);
               break;
            } catch (exception) {
               
            }           
        }
    }
 if(xmlHttprequest==undefined || xmlHttprequest==null){
        alert("创建xmlHttprequest失败");
       
    }else{
        this.xmlhttp=xmlHttprequest;
    }

注意：为了应对所有的现代浏览器，包括 IE5 和 IE6 ，需要检测是否支持 XMLHttpRequest 对象，如果支持创建 XMLHttpRequest ，不支持，则创建 ActiveXObject 。

2 注册回调方法

//服务器数据返回http后，
动态更新页面 xmlhttp.onreadystatechange=callback; 
//如果是加了（）是给的返回值，就不再是函数的数据了

注释：
onreadystatechange事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

Status 200:"OK". 404: 未找到

3 使用Ｏｐｅｎ方法设置和服务器交互的基本信息

４设置发送的数据，开始和服务端交互

可以使用 get 或 post 请求。 使用的是 open 和 send 方法

var userName=document.getElementById("UserName").value;
userName=encodeURL(encodeURL(userName));
//两次吗解决中文乱码
//采用的交互方式，异步或同步
//4 设置向服务器端发送的数据，启动服务
xmlhttp.open("GET","AJAX?name="+userName,true);
 xmlhttp.send(null);//不需要参数，post方式是不同的
 
//post方式交互
        //3.设置和服务器端交互的相应参数
        xmlhttp.open("POST","AJAX",true);
        //设置post请求头信息
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //4.设置服务器端发送的数据，启动和服务器端的交互
        xmlhttp.send("name=" + userName);
        //alert("test");
        */

注意：
open方法最多可以有五个参数，其中前三个参数是必须的。
Ｍenthod：请求的类型get或post
url：文件在服务器上的位置
async：true（异步）或false（同步）
get方法：请求的数据都写在open的url中
post方法： url中不谢任何数据，只填写服务器端的地址。在调用
请使用 setRequestHeader() 来添加 HTTP 头
来设置Content-Type的值。然后再send()方法中规定希望发送的数据

5 编写回调函数，判断交互是否完成。

并根据需要获取服务端返回的数据，更新页面。

  function callback()
                 {
                      array.push(xmlhttp,readyState);
                     //判断和服务器端交互是否完成，是否返回数据
                     if(xmlhttp.readyState==4)
                         {                        
                             //表示和服务端交互完成
                             if(xmlhttp.status==200){                               
                                 //200表示正确返回的数据
                                 //httprequest取回返回的数据
                                 //纯文本或xml方式
                                 //纯文本数据的接收方式
                                 var message=xmlhttp.response.Text;                             
                                 //xml数据对应的dom对象接收fangfa
                                // 前提，服务器设置contenttype为text/xml                               
                                 //返回数据动态填充到div中
                                
                                var div=document.getElementById("message");
                                div.innerHTML=message;                                                             
                                // alert(array);
                               // alert(xmlhttp.responseXML.getElement);
                               
                                //If语句判断返回的xml是否正确
                                // var tootElement=xmlhttp.responseXML.getElement;
                               
                                if(rootElement==null || rootElement.nodeName !=""){                                
                                   
                                }                              
                                else
                                   {
                                       
                                      //数据的正确处理 
                                    }
                             }
                            
                         };                                            
                 }

基本的创建 XMLHttpRequest 对象步骤清晰，先做什么后做什么，不能颠倒，不然调用中不准会出现什么错误。下面是一个小实例，创建登陆的实例，详细参看 http://www.okajax.com/a/201009/ajax_login.html 登陆页面介绍。