AJAX--XMLHttpRequest五步使用法

令仔很忙

发布于 2018-09-14 15:46:01

5100

发布于 2018-09-14 15:46:01

文章被收录于专栏：令仔很忙令仔很忙

传统浏览方式和AJAX方式的不同

多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。常常是点击一个按钮，等待服务器相应，在点击另一个按钮，然后在等待，这样一个反复的过程。

而AJAX是一种创建交互式网页的网页开发技术，其中XMLHttpRequest是核心的内容，它能够为页面中的javascript脚本提供特定的通信方式，从而使页面的javascript脚本和服务器之间形成动态交互的效果，XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互。

XMLHTTPRequest的五步使用法

1、建立XMLHTTPRequest对象

//1.创建XMLHTTPRequest对象
                if(window.XMLHttpRequest){
                    //alert("IE7,IE8,FireFox");
                    xmlhttp =new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //alert("IE6,IE5.5,IE5");
                    var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
                        "MSXML2.XMLHTTP","Miscrosoft XMLHTTP"];
                    for(var i=0;i<activexName.length;i++) {
                        try{
                            xmlhttp=new ActiveXObject(activexName[i]);
                            break;
                        }catch(e){
                            
                        }
                    }
                }
                if(xmlhttp == undefined || xmlhttp == null){
                    alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                    return;
                }
                array.push(xmlhttp.readyState);

2、注册回调函数

xmlhttp.onreadystatechange=callback;

要注意的是callback不能写成callback(),我们是想把方法名告诉onreadystatechange这个属性，如果加了括号，就相当于把返回值告诉了onreadystatechange属性。

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

有两种方法

      //GET方式交互                
      xmlhttp.open("GET","AJAX?name=" + userName,true);
                
      //POST方式交互               
      xmlhttp.open("POST","AJAX",true);
      //POST方式交互所需增加的代码
      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

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

     //GET方式
     xmlhttp.send(null);

     //POST方式
     xmlhttp.send("name=" + userName);

5、更新界面

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

     array.push(xmlhttp.readyState);
     //判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
     if(xmlhttp.readyState == 4){
     //表示和服务器端的交互已经完成
        if(xmlhttp.status == 200){
        //表示服务器的是响应代码是200，正确返回了数据
           var message=xmlhttp.responseText;
           //XML数据对应的DOM对象的接受方法
           //使用的前提是，服务器端需要设置contenttype为text/xml
                        
           //记忆像div标签中填充文本内容的方法
           var div=document.getElementById("message");
           div.innerHTML=message;
           alert(array);
        }
     }