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");