AJAX基础（二）——XMLHttpRequest对象

最新推荐文章于 2024-08-24 21:59:22 发布

weixin_34005042

最新推荐文章于 2024-08-24 21:59:22 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2260184/blog/512003

XMLHttpRequest对象在Ajax应用程序中扮演核心角色，用于实现与服务器的异步通信。本文介绍XMLHttpRequest的基本用法，包括创建对象、注册回调函数、设置请求参数、发送请求及处理响应等步骤。此外还探讨了GET与POST请求的区别。

2019独角兽企业重金招聘Python工程师标准>>>

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。

XMLHttpRequest简介

XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest和Javascript

Javascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。

XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法社会自和服务器端交互的基本信息

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

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容

下面我们以用户名确认来实现XMLHttpRequest的五步使用法：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript">

             var xmlhttp;

            function submit(){

                //1.创建XHLHttpRequest对象

                if(window.XMLHttpRequest){

                    //alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera");

                    //IE7，IE8 ,FireFox。Mozillar、Safari，Opera

                     xmlhttp=new XMLHttpRequest();

                    if(xmlhttp.overrideMimeType){

                        xmlhttp.overrideMimeType("text/xml");

                        

                    }

                }else if(window.ActiveXObject){

                    //IE6,IE6.5 IE5

                    alert("IE6,IE6.5 IE5");

                    var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',

                        'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',

                        'MSXML2.XMLHTTP.1.0'];

                    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;

                 }

                 //alert(xmlhttp);

                 //2.注册回调方法

                 xmlhttp.onreadystatechange=callback;

            

                 //错误的写法callback();

                 

                 //记忆一个固定用法，获取文本框中用户输入的内容

                 var userName=document.getElementById("UserName").value;

                 /*

                  //GET方式交互

                 //设置和服务器端交互的相应参数

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

                 

                 //4.设置向服务器端发送的数据，启动和服务器端的交互

                 xmlhttp.send(null);

                 */

                //POST方式交互

                //3.设置和服务器端交互的相应参数

                xmlhttp.open("POST","AjaxServer",true);

                

                //POST方式交互所需要增加的代码

                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                

                //4.设置向服务器端发送的数据，启动和服务器端的交互

                xmlhttp.send("name="+userName);

                 

            }

            function callback(){

                //5.判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据

                     

                if(xmlhttp.readyState==4){

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

//服务器返回的http状态码

//200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

                    //alert(xmlhttp.status);

                    if(xmlhttp.status==200){

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

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

                        var message=xmlhttp.responseText;

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

                        //使用前提是，服务器端需要设置content-type为text/xml

                        //var domXml=xmlhttp.responseXML;

                        alert("bb");

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

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

                        div.innerHTML=message;

                       

                    }

                }

            }

        </script>

    </head>

    <body>

        <input type="text" id="UserName"/>

        <input type="button" value="校验用户名" onclick="submit()"/>

        <br/>

        <div id="message"></div>

    </body>

</html>

XMLHttpRequest的详细属性和方法

方法和属性

描述

Open（String method,String url,Boolean ansynch,String username,String password）

1. 指定和服务器端交互的HTTP方法，URL地址及其他请求信息。

2. 其中method表示HTTP请求方法。支持所有HTTP的方法，一般使用“GET”，“POST”url表示请求的服务器的地址，Asynch表示是否采取异步方式，true表示异步，false表示同步，后两个参数可以不指定，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码

Send(content)

1. 向服务器发出请求，如果采用异步方式，该方法会立即返回

2. Content可以不指定或者指定为null表示不发送数据，其内容可以使DOM对象，输入流或是字符串

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

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

setRequestHeader(String header,String value)	设置HTTP请求中的指定头部header的值为value。次方法需在open方法以后调用
getAllReponseHeader()	1. 返回包含HTTP的所有响应头包括Content-Length，Date，URI等内容 2. 返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔
GetResponseHeader(String header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态
responseText	服务器响应的文本内容
ResponseXML	服务器响应的XML内容对应的DOM对象
Status	服务器返回的http状态码 200表示“成功”，404表示“未找到”。500表示“服务器内容部错误
statusText	服务器返回状态码的文本信息
readyState	表示XMLHttpRequest对象的状态 0=未初始化。对象已创建，未调用open 1=open方法成功调用以后。Send方法未调用 2=send方法已经调用，尚未开始接受数据 3=正在接受数据。Http响应头信息已经接受，响应数据尚未接受完成。 4=完成。响应数据接受完成
Onreadystatechage	请求状态改变的时间触发器（readyState变化时会调用这个属性上注册的javascript函数）