2020-09-10

---

Ajax技术的基本介绍

---

Ajax是XMLHTTPRequest对象和JS、XML、CSS、DOM等多种技术的结合使用。

通过XMLHTTPRequest对象，ajax可以只与服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，所以可以减轻服务器的负担，加快了响应速度。

一、XMLHTTPRequest对象的操作

（1）初始化

在使用XMLHTTPRequest对象发送请求和处理响应之前，首先要初始化该对象。由于XMLHTTPRequest不是一个W3C标准，所以对不同的浏览器初始化的方法也不同、

对于IE浏览器：
IE浏览器把XMLHTTPRequest实例化为一个ActiveX对象，如：
Var http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
Var http_request = new ActiveXObject(“Microsoft.XMLHTTP”);

非IE浏览器：
非IE浏览器把XMLHTTPRequest对象实例化为一个本地JS对象，如：
Var http_request = new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器XMLHTTPRequest对象，如：

 <script>
      if(window.XMLHttpRequest)
      {
          http_request = window.XMLHttpRequest;
      }else if (window.ActiveXObject)
      {
        try {
          http_request = window.ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        }
        try {
          http_request = window.ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
        }
      }
</script>

（2）XMLHTTPRequest对象的常用方法

XMLHTTPRequest对象的常用方法可以对请求进行相关的操作。

<1>open()方法

用于设置进行异步请求目标的URL，请求方法和其他参数。(用此方法前首先将XMLHTTPRequest对象初始化)

格式：open(“method”,”URL”[,asyncFlag[,”username”[,”password”]]]);
method：指定的请求类型 GET/POST
URL：用于指定请求地址，可以使用绝对地址或者相对地址
asyncFlag：可选参数，用于指定请求方式，true为异步请求，false为同步请求
userName：可选参数，用于指定请求用户名
password：可选参数，用于指定请求密码
如：设置异步请求目标为a.jsp，请求方法为POST
http_request.open(“POST”,”a.jsp”,true);

<2>send()方法

用于向服务器发送请求，如果请求声明为异步则立即返回，否则将等到接收到响应为止。
格式：http_request.send(content);
content为指定发送的数据，可以是流、字符串、DOM对象的实例，还可以为null

<3>setRequestHeader()方法

用于请求的HTTP头设置值，格式为：http_request.setRequestHeader(“header”,”value”);
//header：用于指定HTTP请求头，value：用于指定HTTP头设置值
!!!此方法需要在调用open()方法后才可调用

<4>abort()方法

用于停止或者放弃当前异步请求,格式为：http_request.abort();

<5>getResponseHeader()方法
用于以字符串形式返回指定的HTTP头信息，格式为：getResponseHeader(“headerLabel”);
//headerLabel：用于指定HTTP头(Server、Content-Type、Date等)

<6>getAllResponseHeader()方法

用于以字符串形式返回完整的HTTP头信息，格式：http_request.getAllResponseHeader();

（3）XMLHTTPRequest对象的常用属性

通过这些属性可以获取服务器的响应状态和响应内容。
<1>onreadystatechange属性
用于指定状态改变时所触发的事件处理器，在ajax中，每个状态改变时都会触发这个事件处理器，所以通常会调用一个JS函数。如：http_request.onreadystatechange = getResult;
getResult()为JS函数
<2>readyState属性

用于获取请求的状态，readyState属性包含5个属性值。
0：未初始化
1：正在加载
2：已加载
3：交互中
4：完成

<3>responseText属性

用于获取服务器的响应，表示为字符串

<4>responseXML属性

用于获取服务器的响应，表示为XML，可以用来解析一个DOM对象

<5>status属性

用于返回服务器的HTTP状态码，如：
200：表示成功
202：表示请求被接收，但未成功
400：错误的请求
404：文件未找到
500：内部服务器错误

<6>statusText属性

用于返回HTTP状态码对应的文本。（OK、Not Found）

二、与服务器的通信

（1）发送请求处理

Ajax可以通过XMLHTTPRequest对象实现异步方式在后台发送请求，通常有两种请求方式，一种是发送GET请求，另外一种是POST请求。但都要经过以下四个步骤：

<1>初始化XMLHTTPRequest对象，这里使用上面说到底跨浏览器的XMLHTTPRequest对象。

 <script>
http_request  = false;
      if(window.XMLHttpRequest)
      {
          http_request = window.XMLHttpRequest;
      }else if (window.ActiveXObject)
      {
        try {
          http_request = window.ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        }
        try {
          http_request = window.ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
        }
      }
If(!http_request )
alert(“不能创建XMLHTTPRequest对象！”);
</script>

<2>为XMLHTTPRequest对象指定一个返回结果处理函数(回调函数)，用于对返回结果进行处理。

http_request.onreadystatechange = getResult;
XMLHTTPRequest对象的onreadystatechange属性调用回调函数时，不能指定要传递的参数，如果要指定要传递的参数，可以用此方法：
http_request.onreadystatechange = function(){getResult(param)};

<3>创建一个与服务器的链接即open()方法，此时需要指定发送的请求方式(GET/POST),是否采用异步方式发送请求。

采用异步方式发送POST请求：
http_request.open(“POST”,url,true);
这里的url可以是url地址，也可以是Servlet映射地址。

<4>向服务器发送请求。

如果是发送POST请求，还需要设置正确的请求头
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
var param = “user” + xxx;
http.request.send(param);

（2）处理服务器响应

在服务器发送请求时，需要通过XMLHTTPRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。在回调函数中，首先要判断服务器的请求状态，保证请求完成；再根据HTTP状态码判断服务器请求响应是否成功，如果成功，则获取服务器的响应返回给客户端。

<1>处理字符串响应
如，将字符串响应显示到提示对话框中的回调函数。

 function getResult()
      {
        if(http_request.readyState == 4)//判断请求状态
        {
          if(http_request.status == 200)//请求成功，处理返回结果
          {
            alert(http_request.responseText);//显示判断结果
          }else //请求页面有误
          {
            alert("所请求的页面有误！")
          }
        }
      }

<2>处理XML响应
编写一个xml文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
    <user>
        <books>
            <book>
                <title>JAVA</title>
                <publisher>清华</publisher>
            </book>
            <book>
                <title>C</title>
                <publisher>北大</publisher>
            </book>
        </books>
    </user>

在回调函数中遍历xml的books信息，并显示到页面中去。

function getResult()
      {
        if(http_request.readyState == 4)//判断请求状态
        {
          if(http_request.status == 200)//请求成功，处理返回结果
          {
            var xmldoc = http_request.responseXML;
            var str = "";
            for (var i = 0; i < xmldoc.getElementsByName("book").length; i++) {
              var book = xmldoc.getElementsByName("book").item(i);
              str = str + book.getElementsByTagName("title")[0].firstChild.data
                      + ":" + book.getElementsByTagName("publisher")[0].firstChild.data + "<br>";

            }
            document.getElementById("book").innerHTML = str;
          }else //请求页面有误
          {
            alert("所请求的页面有误！")
          }
        }
      }