教你轻松使用XMLHttpRequest对象

清疚 2022-08-07 08:55 117阅读 0赞

# 一、什么是XMLHttpRequest #

*  XMLHttpRequest是 AJAX 的基础。
 *  所有现代浏览器均支持 XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。
 *  XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 *  XMLHttpRequest对象用于和服务器交换数据。

![SouthEast][]

# 二、为什么使用XMLHttpRequest #

1、本质来说，XMLHttpRequest返回的是一个数据，传统页面返回的是一个页面。

2、在不重新加载页面的情况下更新网页，在后台向服务器发送数据，实现异步

3、在页面已加载后从服务器请求或接收数据

# 三、五步使用XMLHttpRequest #

## （一）、建立XMLHttpRequest对象 ##

IE7以上的浏览器，跟普通的对象一样，new就可以了。

xmlhttp=new XMLHttpRequest();

特别注意的是IE6以下版本的浏览器：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

## （二）、注册回调函数 ##

xmlhttp.onreadystatechange=callback;

Callback 函数是一种以参数形式传递给另一个函数的函数。如果存在多个 AJAX 任务，那应该为创建 XMLHttpRequest对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

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

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

xmlhttp.open("post", "Ajax", true);  
                    //post方式交互所需要增加的代码
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

## （四）、设置发送的数据，开始和服务器端交互 ##

xmlhttp.send(null);　　//get 参数是null，因上一步（open）已经提交

xmlhttp.send("name=" + userName);  //post需要填写提交的数据

如上所示，如需将请求发送到服务器，我们使用  XMLHttpRequest对象的 open() 和 send() 方法。

建议：

1、GET 方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式

2、GET 更简单也更快，在做数据查询时，建议用GET 方式；而在做数据添加、修改或删除时，建议用Post方式

3、在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库），向服务器发送大量数据（POST 没有数据量限制），发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

## （五）、在回调函数中判断交互是否结束，响应是否正确，并据需要获取服务器端返回的数据，更新页面内容    ##

xmlhttp.readyState == 4　　　//状态＝４响应数据接收成功

xmlhttp.status==200<span style="white-space:pre">	</span>//服务器返回成功码

例子：

<pre name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
    
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script type="text/javascript">
                var xmlhttp;
                function submit(){
    
                    //alert("te st");
                    //1.创建XMLHttpRequest对象
                    if (window.XMLHttpRequest) {
                        xmlhttp=new XMLHttpRequest();
                        if (xmlhttp.overrideMimeType) {
                            xmlhttp.overrideMimeType("text/xml");
                        }
                    }else if (window.ActiveXObject) {
                        var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",
                                        "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",
                                        "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];
                        for (var i = 0; i <activexName.length; i++) {
                            try {
                                xmlhttp=new ActiveXObject(activexName[i]);
                            } catch (e) {
    
                            }
                        }
                    }
                    if (xmlhttp==undefined || xmlhttp==null) {
                        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                        return;
                    }
                    //alert(xmlhttp);
                    
                    //2.注册回调方法
                    xmlhttp.onreadystatechange=callback;
                    
                    //固定用法，获取文本框中用户输入的内容
                    var userName=document.getElementById("UserName").value;
                    //userName=encodeURI(encodeURI(userName));
                   // alert(userName);
                    /*//3.设置和服务器端交互的相应参数
                    xmlhttp.open("GET","Ajax?name=" + userName,true );                      
                    //4.设置向服务器端发送的数据，启动和服务器端的交互
                    xmlhttp.send(null);*/
            
                    //3.设置和服务器端交互的相应参数
                    xmlhttp.open("post", "Ajax", true);  
                    //post方式交互所需要增加的代码
                    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    //4.设置向服务器端发送的数据，启动和服务器端的交互
                    xmlhttp.send("name=" + userName);
                }
                
                function callback(){
                    //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
                    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;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <input type="text" id="UserName" />
            <input type="button" οnclick="submit()" value="校验用户名"/>
            <div id="message"></div>
        </body>
    </html>
    </span>

# 四、常用属性与方法 #

![SouthEast 1][]

![SouthEast 2][]

# 五、小结 #

XMLHttpRequest是AJAX技术应用中的核心对象，可以让我们的前台在不向服务器提交整个页面的情况下，实现局部的刷新。可以同步或是异步的返回web服务器的响应，返回的数据不限于XML文档，可以是任何形式的文档。大大提高了客户端到Web服务器端的响应效率，提高了用户的体验度。

[SouthEast]: /images/20220805/c6d19829475c406fa5af96c88fa213d4.png
[SouthEast 1]: /images/20220805/063545a5bc2b4973993a9df39e33ccf6.png
[SouthEast 2]: /images/20220805/fdbc2e2c50e248d5bd3dcaeececde83d.png