XHR 請求

XMLHttpRequest 物件用於和伺服器交換資料。

向伺服器發送請求

如需將請求傳送到伺服器，我們使用XMLHttpRequest 物件的open() 和send() 方法：

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

send(

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能使用。

然而，在下列情況中，請使用POST 要求：

#無法使用快取檔案（更新伺服器上的檔案或資料庫）
傳送大量資料（POST 沒有資料量限制）
#向伺服器傳送包含未知字元的使用者輸入時，POST 比GET 更穩定也更可靠

#GET 請求

一個簡單的GET 請求：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

在上面的範例中，您可能得到的是快取的結果。

為了避免這種情況，請在URL 中加入一個唯一的ID：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>

</body>
</html>

執行實例» 點擊"運行實例" 按鈕查看線上實例

如果您希望透過GET 方法發送訊息，請向URL 新增訊息：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

POST 請求

一個簡單POST 要求：

##實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>

執行實例»
#」執行實例" 按鈕查看線上實例

如果需要像HTML 表單那樣POST 數據，請使用setRequestHeader() 來新增HTTP 頭。然後在send() 方法中規定您希望傳送的資料：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
 
</body>
</html>

執行實例»
##點擊"執行實例" 按鈕查看線上實例

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否非同步處理請求。 method：請求的類型；GET 或POST ##url：檔案在伺服器上的位置 async：true（非同步）或false（同步）
string)	將請求傳送到伺服器。 string：僅用於 POST 要求

方法

描述

open(method,url,async)

規定請求的類型、URL 以及是否非同步處理請求。

method：請求的類型；GET 或POST
##url：檔案在伺服器上的位置
async：true（非同步）或false（同步）

string)

將請求傳送到伺服器。

string：僅用於 POST 要求

方法描述header,value)

	##setRequestHeader (
向請求新增HTTP 頭。	header : 規定頭的名稱 value : 規定頭的值 url - 伺服器上的檔案 open() 方法的url 參數是伺服器上檔案的位址： xmlhttp.open("GET","ajax_test.html",true); #該文件可以是任何類型的文件，例如.txt 和.xml，或伺服器腳本文件，例如.asp和.php （在傳迴回應之前，能夠在伺服器上執行任務）。非同步 - True 或 False？ AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 XMLHttpRequest 物件如果要用於AJAX 的話，其open() 方法的async 參數必須設定為true： xmlhttp.open("GET","ajax_test.html" ,true); 對於web 開發人員來說，發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。 AJAX 出現之前，這可能會導致應用程式掛起或停止。透過AJAX，JavaScript 不需要等待伺服器的回應，而是：在等待伺服器回應時執行其他腳本當回應就緒後對回應進行處理 Async=true 當使用async=true 時，請規定在回應處於onreadystatechange 事件中的就緒狀態時執行的函數：實例 <html><!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html> #運行實例» 點擊"運行實例"按鈕查看線上實例您將在稍後的章節學習更多有關onreadystatechange 的內容。 Async = false 如需使用async=false，請將open() 方法中的第三個參數改為false： xmlhttp.open("GET","test1.txt",false); 我們不建議使用async=false，但是對於一些小型的請求，也是可以的。請記住，JavaScript 會等到伺服器回應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。注意：當您使用async=false 時，請不要寫onreadystatechange 函數- 把程式碼放到send() 語句後面即可： #實例 <html><!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> 運行實例» 點擊"運行實例"按鈕查看線上實例 ← XHR 建立對象 XHR 回應 → 提交首頁影片問答我的 PHP中文網首頁課程文章問答詞典手册下載搜尋 APP下載

##setRequestHeader (

向請求新增HTTP 頭。

header

value

url - 伺服器上的檔案

open() 方法的url 參數是伺服器上檔案的位址：

xmlhttp.open("GET","ajax_test.html",true);

#該文件可以是任何類型的文件，例如.txt 和.xml，或伺服器腳本文件，例如.asp和.php （在傳迴回應之前，能夠在伺服器上執行任務）。

非同步 - True 或 False？

AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 物件如果要用於AJAX 的話，其open() 方法的async 參數必須設定為true：

xmlhttp.open("GET","ajax_test.html" ,true);

對於web 開發人員來說，發送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。 AJAX 出現之前，這可能會導致應用程式掛起或停止。

透過AJAX，JavaScript 不需要等待伺服器的回應，而是：

在等待伺服器回應時執行其他腳本
當回應就緒後對回應進行處理

Async=true

當使用async=true 時，請規定在回應處於onreadystatechange 事件中的就緒狀態時執行的函數：

實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

#運行實例»

點擊"運行實例"按鈕查看線上實例

您將在稍後的章節學習更多有關onreadystatechange 的內容。

Async = false

如需使用async=false，請將open() 方法中的第三個參數改為false：

xmlhttp.open(&quot;GET&quot;,&quot;test1.txt&quot;,false);

我們不建議使用async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到伺服器回應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。

注意：當您使用async=false 時，請不要寫onreadystatechange 函數- 把程式碼放到send() 語句後面即可：

#實例

<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

← XHR 建立對象

XHR 回應 →

提交