【AJAX】AJAX 的简单应用

AJAX (Asynchronous JavaScript and XML) 是一种使用现有标准的新方法。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统的网页如果需要更新内容，则需要重载整个页面。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。

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

var xhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化；1：服务器连接已建立；2：请求已收到；3：正在处理请求；4：请求已完成且响应已就绪。
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。
status	返回请求的状态号。200: "OK"；403: "Forbidden"；404: "Not Found"等
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

XMLHttpRequest 对象方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader(headerTag)	返回特定的头部信息
open(method, url, async, user, psw)	规定请求的类型(GET or POST)、URL、是否异步处理、用户名（可选）、密码（可选）
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader(header, value)	向要发送的报头添加标签/值对

向服务器发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。下面来了解下这两个方法的使用。

open(method, url, async)：

• method：GET or POST。
• url：服务器文件位置。该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php。
• asnyc：true（异步）或 false（同步）。

通过异步发送，JavaScript 不必等待服务器响应，而是可以：

• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应

所以不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。

GET 比 POST 更简单更快，可用于大多数情况下。

不过，在以下情况要始终使用 POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

GET 请求：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

如果需要用 GET 方法来发送信息，可以 直接在URL 中添加这些信息：

xhttp.open("GET", "ajax_info.txt?info1=value1&info2=value2", true);
xhttp.send();

POST 请求:

xhttp.open("POST", "ajax_info.txt", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，先通过 setRequestHeader() 添加一个 HTTP 头部，然后在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("info1=value1&info2=value2");

处理服务器响应

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的：

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) { //当 readyState 为 4，status 为 200 时，响应就绪
    document.getElementById("demo").innerHTML = this.responseText;
  }
};	
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性。

XMLHttpRequest 对象有一个內建的 XML 解析器。ResponseXML 属性以 XML DOM 对象返回服务器响应。使用此属性，您可以把响应解析为 XML DOM 对象。

如果来自服务器的响应并非 XML，请使用 responseText 属性。

---

如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  //处理响应代码
} 
function myFunction2(xhttp) {
  // 处理响应代码
} 

读取 JSON 文件

假设 JSON 文件内容是一个数组

function loadXMLDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhttp = new XMLHttpRequest();
  } else {
    // IE6, IE5 浏览器执行代码
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(this)
    }
  }
  xmlhttp.open("GET","json_url",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();
}
function myFunction(xhttp) {
  var arr = JSON.parse(xhttp.responseText);
  //处理 arr
}