AJAX测试

intro

AJAX(Asynchronous JavaScript and XML)异步的JS和XML。
优点：与服务器异步交互数据，对页面进行局部刷新。

常用成员

• 构造方法
  new XMLHttpRequest() 几乎所有现代浏览器都支持XMLHttpRequest对象。
  new ActiveXObject("Microsoft.XMLHTTP") IE5和IE6使用ActiveXObject。

• 成员方法
  xhr.open(method, url, ?async, ?username, ?password) 打开xhr|修改xhr的readyState为OPENED。
  xhr.send(?body) 发送AJAX请求。

• 成员属性

  • status 返回HTTP状态码(status Code)。200为OK。

  • readyState xhr对象的准备状态。共有5种。
    0 xhr.UNSEND, 未发送(刚构造xhr时的状态，请求未初始化)。
    1 xhr.OPENED, 打开的(调用xhr.open()之后，表示服务器连接已建立)。
    2 xhr.HEADERS_RECEIVED, 头已接收(即请求已接收)。
    3 xhr.LOADING, 载入中(请求处理中)。
    4 xhr.DONE, 已完成，表示请求已完成且响应已就绪。

  • onreadystatechange事件
    每次xhr.readyState值改变都会触发该事件，并调用该事件绑定的函数。
    绑定：xhr.onreadystatechange = function() {...}

    xhr.readyState == xhr.DONE && xhr.status == 200 表示请求成功(响应就绪)且成功返回。

• 其他成员
  xhr.responseType
  xhr.responseURL
  xhr.response
  xhr.responseText
  xhr.responseXML
  xhr.getResponseHeader(name)
  xhr.getAllResponseHeaders()

xhr.readyState属性变化

xhr = new XMLHttpRequest() 实例化xhr对象之后，xhr.readyState == 0，表示UNSEND。
调用xhr.open(...)之后，readyStatus从0表为1，表示OPENED。
调用xhr.send()之后，readyStatus的变化：1 -> 2, 2 -> 3, 3 -> 4。
一般在onreadystatechange事件绑定的函数中检测xhr.readyState == xhr.DONE或xhr.readyState == 4)。
在整次过程中，xhr.readyStatus状态值共变化4次。

测试

(测试链接)[http://www.runoob.com/try/try.php?filename=tryajax_first]

// 1. 实例化xhr对象
xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActivaXObject("Microsoft.XMLHTTP");

// 2. 打印xhr.readyState和HTTP状态码status
console.log(xhr.readyState, xhr.status);

// 3. 定义xhr.onreadystatechange事件(每次xhr.readyState改变都会触发该事件)的函数。
xhr.onreadystatechange = function() {
  console.log(xhr.readyState, xhr.status);
  if (xhr.readyState == xhr.DONE && xhr.status == 200) {
  	responseType = xhr.responseType;
  	responseURL = xhr.responseURL;
  	response = xhr.response;
  	responseText = xhr.responseText;
  	responseXML = xhr.responseXML;
  	allResponseHeaders = xhr.getAllResponseHeaders();
  	console.log("\nresponseType: " + Object.prototype.toString.call(responseType) + ":\n" + responseType);
  	console.log("\nresponseURL: " + Object.prototype.toString.call(responseURL) + ":\n" + responseURL);
  	console.log("\nresponse: " + Object.prototype.toString.call(response) + ":\n" + response);
  	console.log("\nresponseText: " + Object.prototype.toString.call(responseText) + ":\n" + responseText);
  	console.log("\nresponseXML: " + Object.prototype.toString.call(responseXML) + ":\n" + responseXML);
  	console.log("\nallResponseHeaders: " + Object.prototype.toString.call(allResponseHeaders) + ":\n" + allResponseHeaders);
  }
}

// 4. 打开xhr(修改xhr.readyState为xhr.OPENED，值为1)。
xhr.open("GET", "/try/ajax/ajax_info.txt", true);

// 5. 发送AJAX请求。
xhr.send();