var xhr = new XMLHttpRequest ();
//建立XMLHttpRequest 物件
//引數：無
//返回值：XMLHttpRequest 物件
function createXHR () {
var XHR = [ //相容不同瀏覽器和版本得建立函數陣列
function () { return new XMLHttpRequest () },
function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
];
var xhr = null;
//嘗試呼叫函數，如果成功則返回XMLHttpRequest物件，否則繼續嘗試
for (var i = 0; i < XHR.length; i ++) {
try {
xhr = XHR[i]();
} catch(e) {
continue //如果發生異常，則繼續下一個函數呼叫
}
break; //如果成功，則中止迴圈
}
return xhr; //返回物件範例
}
在上面程式碼中，首先定義一個陣列，收集各種建立 XMLHttpRequest 物件的函數。第 1 個函數是標準用法，其他函數主要針對 IE 瀏覽器的不同版本嘗試建立 ActiveX 物件。然後設定變數 xhr 為 null，表示為空物件。接著遍歷工廠內所有函數並嘗試執行它們，為了避免發生異常，把所有呼叫函數放在 try 中執行，如果發生錯誤，則在 catch 中捕獲異常並執行 continue 命令，返回繼續執行，避免丟擲異常。如果建立成功，則中止迴圈，返回 XMLHttpRequest 物件。
xhr.open(method, url, async, username, password);
其中 xhr 表示 XMLHttpRequest 物件，open() 方法包含 5 個引數，說明如下：xhr.send(body);
引數 body 表示將通過該請求傳送的資料，如果不傳遞資訊，可以設定為 null 或者省略。var xhr = creatXHR(); //範例化XMLHttpRequest 物件
xhr.open ("GET", "server.txt", false"); //建立連線
xhr.send(null); //傳送請求
console.log(xhr.responseText); //接收資料
在伺服器端（server.txt）中輸入下面的字串。
Hello World //伺服器端指令碼在瀏覽器控制台會顯示“Hello World”的提示資訊。該字串是從伺服器端響應的字串。
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php?callback=functionName"； //設定查詢字串
var xhr = createXHR(); //範例化XMLHttpRequest 物件
xhr.open("GET", url, false); //建立連線，要求同步響應
xhr.send(null); //傳送請求
console.log(xhr.responseText); //接收資料
}
}
</script>
在伺服器端檔案（server.php）中輸入下面的程式碼，獲取查詢字串中 callback 的引數值，並把該值響應給用戶端。
<?php
echo $_GET["callback"];
?>
在瀏覽器中預覽頁面，當單擊提交按鈕時，在控制台顯示傳遞的引數值。?作為字首附加在 URL 的末尾，傳送資料是以連字元&連線的一個或多個名值對。
send("name1=value1&name2=value2...");
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php"; //設定請求的地址
var xhr = createXHR(); //範例化XMLHttpRequest 物件
xhr.open("POST", url, false); //建立連線，要求同步響應
xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //設定為表單方式提交
xhr.send("callback=functionName"); //傳送請求
console.log(xhr.responseText); //接收資料
}
}
在 open() 方法中，設定第一個引數為 POST，然後使用 setRequestHeader() 方法設定請求訊息的內容型別為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 傳送請求時都必須設定該選項，否則伺服器無法識別傳遞過來的資料。<?php
echo $_POST["callback"];
?>
{ user : "css8", pass : "123456", email : "[email protected]" }
將 JSON 資料轉換為序列格式化顯示如下。
'user="css8" & pass="123456" & email="[email protected]"'
[{name : "user", value : "css8"} , {name : "pass", value : "123456"), {name : "email", value : "[email protected]"}]
將上面資料轉換為序列格式顯示如下。'user="css8" & pass="123456" & email="[email protected]"'
//把JSON資料轉換為序列字串
//引數：data表示陣列或物件型別的資料
//返回值：序列字串
function JSONtoString (data) {
var a = []; //臨時陣列
if (data.constructor == Array) { //處理陣列
for (var i = 0; i < data.length; i ++) {
a.push(data[i].name + "=" + encodeURIComponent(data[i].value));
}
} else { //處理物件
for (var i in data) {
a.push(i + "=" + encodeURIComponent(data[i]));
}
}
return a.join("&"); //把陣列轉換為序列字串，並返回
}
| 返回值 | 說明 |
|---|---|
| 0 | 未初始化。表示物件已經建立，但是尚未初始化，尚未呼叫 open() 方法 |
| 1 | 初始化。表示物件已經建立，尚未呼叫 send() 方法 |
| 2 | 傳送資料。表示 send() 方法已經呼叫，但是當前的狀態及 HTTP 頭未知 |
| 3 | 資料傳送中。已經接收部分資料，因為響應及 HTTP 頭不安全，這時通過 responseBody 和 responseText 獲取部分資料會出現錯誤 |
| 4 | 完成。資料接收完畢，此時可以通過 responseBody 和 responseText 獲取完整的響應資料 |
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php"; //設定請求的地址
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("POST", url, true); //建立間接，要求非同步響應
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //設定為表單方式提交
xhr.onreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState狀態
if (xhr.status == 200 || xhr.status == 0) { //監聽HTTP狀態碼
console.log(xhr.responseText); //接收資料
}
}
}
xhr.send("callback=functionName"); //傳送請求
}
}
xhr.onreadystatechange = function () {}; //清理事件響應函數
xhr.abort(); //中止請求
| 響應資訊 | 說明 |
|---|---|
| responseBody | 將響應資訊正文以 Unsigned Byte 陣列形式返回 |
| responseStream | 以 ADO Stream 物件的形式返回響應資訊 |
| responseText | 將響應資訊作為字串返回 |
| responseXML | 將響應資訊格式化為 XML 文件格式返回 |
<?xml version="1.0" encoding="utf-8"?> <the>XML 資料</the>然後，在用戶端進行如下請求。
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("GET", "server.xml", true); //建立連線，要求非同步響應
xhr.onreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState狀態
if (xhr.state == 200 || xhr.status == 0) { //監聽HTTP狀態碼
var info = xhr.responseXML;
console.log(info.getElementsByTagName("the")[0].firstChild.data); //返回元資訊字串“XML 資料”
}
}
}
xhr.send(); //傳送請求
}
}
</script>
在上面程式碼中，使用 XML DOM 的 getElementsByTagName() 方法獲取 the 節點，然後再定位第一個 the 節點的子節點內容。此時如果繼續使用 responseText 屬性來讀取資料，則會返回 XML 原始碼字串。
<?php
header('Content-Type: text/html;');
echo '<?xml version="1.0" encoding="utf-8"?><the>XML 資料</the>'; //輸出XML
?>
<table border="1" width="100%">
<tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>
<tr><td>RegExp.test()</td><td>檢測一個字串是否匹配某個模式</td></tr>
</table>
然後在用戶端可以這樣接收響應資訊。
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("GET", "server.xml", true); //建立連線，要求非同步響應
xhr.onreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState狀態
if (xhr.state == 200 || xhr.status == 0) { //監聽HTTP狀態碼
var o = document.getElementById("grid");
o.innerHTML = xhr.responseText; //直接插入到頁面中
}
}
}
xhr.send(); //傳送請求
}
}
</script>
function () {
var d = new Date();
return d.toString();
}
然後在用戶端執行下面的請求。
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("GET", "server.xml", true); //建立連線，要求非同步響應
xhr.onreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState狀態
if (xhr.state == 200 || xhr.status == 0) { //監聽HTTP狀態碼
var info = xhr.responseText;
var o = eval("(" + info + ")" + "()"); //用eval()把字串轉換為指令碼
console.log(o); //返回用戶端當前資訊
}
}
}
xhr.send(); //傳送請求
}
}
</script>
使用 eval() 方法時，在字串前後附加兩個小括號：一個是包含函數結構體的，一個是表示呼叫函數的。不建議直接使用 JavaScript 程式碼作為響應格式，因為它不能傳遞更豐富的資訊，同時 JavaScript 指令碼極易引發安全隱患。
{ user : "css8", pass : "123456", email : "[email protected]" }
然後在用戶端執行下面的請求。把返回 JSON 字串轉換為物件，然後讀取屬性值。
<input name="submit" type="button" id="submit" value="向伺服器發出請求" />
<script>
window.onload = function () { //頁面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("GET", "server.xml", true); //建立連線，要求非同步響應
xhr.onreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState狀態
if (xhr.state == 200 || xhr.status == 0) { //監聽HTTP狀態碼
var info = xhr.responseText;
var o = eval("(" + info + ")"); //呼叫eval()把字串轉換為本地指令碼
console.log(info); //顯示JSON物件字串
console.log(o.user); //讀取物件屬性值，返回字串“css8”
}
}
}
xhr.send(); //傳送請求
}
}
</script>
eval() 方法在解析 JSON 字串時存在安全隱患。如果 JSON 字串中包含惡意程式碼，在呼叫回撥函數時可能會被執行。解決方法：先對 JSON 字串進行過濾，遮蔽掉敏感或惡意程式碼。不過，確信所響應的 JSON 字串是安全的，沒有被人惡意攻擊，那麼可以使用 eval() 方法解析 JSON 字串。
var xhr = createXHR(); //範例化XMLHttpRequest物件
xhr.open("GET", "server.txt", true); //建立連線，要求非同步響應
xhr.nreadystatechange = function () { //係結響應狀態事件監聽函數
if (xhr.readyState == 4) { //監聽readyState函數
if (xhr.status == 200 || xhr.status == 0) { //監聽HTTP狀態碼
var info = xhr.responseText;
if (info == "true") console.log("文字資訊傳輸完整"); //檢測資訊是否完整
else console.log("文字資訊可能存在丟失");
}
}
}
xhr.send(); //傳送請求
var xhr = createXHR();
var url = "server.txt";
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.getAllResponseHeaders());
}
}
xhr.send(null);
如果要獲取指定的某個頭部訊息，可以使用 getResponseHeader() 方法，引數為獲取頭部的名稱。例如，獲取 Content-Type 頭部的值，可以這樣設計。
console.log(xhr.getResponseHeader("Content-Type"));
除了可以獲取這些頭部訊息外，還可以使用 setResponseHeader() 方法在傳送請求中設定各種頭部訊息。用法如下：
xhr.setResponseHeader("Header-name", "value");
其中 Header-name 表示頭部訊息的名稱，value 表示訊息的具體值。例如，使用 POST 方法傳遞表單資料，可以設定如下頭部訊息。
xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");