setRequestHeader() 设置请求报头，带有两个参数：报头及其相关值
send() 发送请求。该方法带有一个可选参数，包含 POST 请求的正文
abort() 中止请求
响应
响应也有几个属性和方法：
-
status。请求的标准 HTTP 状态（例如，成功请求将返回 200）
statusText。包括 Web 服务器返回的完整响应字符串，其中包括响应文本（例如，304 Not Modified）
getResponseHeader()。返回特定报头内容；请求报头名称是其惟一参数
getAllResponseHeaders()。返回所有响应报头的文本
responseText。响应文本的字符串表示
responseXML。响应文本的 XML 表示，一个包含 DOM 和所有相关 DOM 方法的文档片段
readyState
实例化完成后，XMLHttpRequest 对象有 5 种状态，使用以下值表示：
0: UNSENT。表示对象已创建 1: OPENED。表示 open() 方法已成功调用 2: HEADERS_RECEIVED。表示来自请求的报头已收到 3: LOADING。表示响应报头已下载 4: DONE。表示请求完成，但是并没有指出请求是否成功或返回预期值（查询响应和标准 HTTP 报头来估量请求的健康状况）一个通用 JavaScript 示例
在我们进一步介绍流行库之前，先通过几个原始的 JavaScript 示例来了解正在运用的核心技术。
样例 HTML 文档
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Ajax Example</title> <meta name="author" content="Rob Larsen"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="_assets/css/style.css" rel="external nofollow" > </head> <body> <div id="main"> <h1>Simple Ajax Example</h1> <p><strong id="activate">Click here</strong> and content will be appended after this paragraph</p> </div> <script src="_assets/js/ajax.js"></script> </body> </html>
下面举例说明了一个简单 GET 请求，该请求将处理 responseXML。这是该技术发展早期的典型 Ajax 交互。它可以在所有现代浏览器以及 Internet Explorer 7 和 8 中运行。
一个基本 Ajax 函数
/*
Here's a basic Ajax function
*/
var ajax = function( opts ) {
/*
We have an options argument.
In addition, we want to have some smart defaults.
*/
opts = {
//Is it a Get or Post
type: opts.type || "POST",
//What URL are we going to hit?
url: opts.url || "",
//What do we do with the data
onSuccess: opts.onSuccess || function(){},
//what kind of data do we expect?
data: opts.data || "xml"
};
//create a new XMLHttpRequest
var xhr = new XMLHttpRequest();
//Open the connection to the server
xhr.open(opts.type, opts.url, true);
/*
When the ready state changes
fire this function
*/
xhr.onreadystatechange = function(){
//readyState 4 is "done"
if ( xhr.readyState == 4 ) {
/*
do some simple data processing
There are two components to the returned object-
responseXML and responseText.
Depending on what we're doing we'll need one or the other.
*/
switch (opts.data){
case "json":
//json is text
opts.onSuccess(xhr.responseText);
break;
case "xml":
//XML retains the structure/DOM
//It's passed in whole.
opts.onSuccess(xhr.responseXML);
break;
default :
//Everything else will get TXT
opts.onSuccess(xhr.responseText);;
}
}
};
//close the connection
xhr.send(null);
}
//here's our simple function
var ajaxSample = function(e){
//Simple callback adds some text to the page
var callback = function( data ) {
document.getElementById("main").innerHTML +=
"<p>"
+data.getElementsByTagName("data")[0].getAttribute("value")
+"</p>";
}
//And here's our Ajax call
ajax({
type: "GET",
url: "_assets/data/ajax-1.xml",
onSuccess: callback,
data : "xml"
})
//prevent the default action
e.preventDefault();
}
//Wire everything up
document.getElementById("activate").addEventListener("click", ajaxSample, false);
