Javascript 基礎(chǔ)---Ajax入門必看

更新時(shí)間：2016年07月06日 09:09:38 投稿：jingxian

下面小編就為大家?guī)硪黄狫avascript 基礎(chǔ)---Ajax入門必看。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

Ajax 是現(xiàn)代Web 應(yīng)用程序開發(fā)的一項(xiàng)關(guān)鍵工具。它讓你能向服務(wù)器異步發(fā)送和接收數(shù)據(jù)，然后用 Javascript 解析。 Ajax 是 Asynchronous JavaScript and XML （異步JavaScript 與XML）的縮寫。

Ajax 核心規(guī)范的名稱繼承于用來建立和發(fā)起請(qǐng)求的 Javascript 對(duì)象：XMLHttpRequest 。這個(gè)規(guī)范有兩個(gè)等級(jí)。所有主流瀏覽器都實(shí)現(xiàn)了第一級(jí)，它代表了基礎(chǔ)級(jí)別的功能。第二級(jí)擴(kuò)展了最初的規(guī)范，納入了額外的事件和一些功能來讓它更容易與 form 元素協(xié)作，并且支持一些相關(guān)規(guī)范。

1. Ajax起步

Ajax 的關(guān)鍵在于 XMLHttpRequest 對(duì)象，而理解這個(gè)對(duì)象的方法是看個(gè)例子。下面代碼展示了 XMLHttpRequest 對(duì)象的簡單用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
<div>
  <button>apples</button>
  <button>cherries</button>
  <button>bananas</button>
</div>
<div id="target">
  Press a button
</div>

<script type="application/javascript">
 var buttons = document.getElementsByTagName("button");
  for(var i=0; i<buttons.length; i++){
    buttons[i].onclick = handleButtonPress;
  }

  //腳本會(huì)調(diào)用此函數(shù)以響應(yīng) button 控件的 click 事件
  function handleButtonPress(e){
    //創(chuàng)建一個(gè)新的 XMLHttpRequest 對(duì)象
    var httpRequest = new XMLHttpRequest();
    //給 onreadystatechange 事件設(shè)置一個(gè)事件處理器
    httpRequest.onreadystatechange = handleResponse;
    //使用 open 方法來指定 HTTP 方法和需要請(qǐng)求的 URL (即告訴 httpRequest 對(duì)象你想要做的事)
    httpRequest.open("GET", e.target.innerHTML+".html");
    //這里沒有向服務(wù)器發(fā)送任何數(shù)據(jù)，所以 send 方法無參數(shù)可用
    httpRequest.send();
  }

  //處理響應(yīng)
  //一旦腳本調(diào)用了 send 方法，瀏覽器就會(huì)在后臺(tái)發(fā)送請(qǐng)求到服務(wù)器。因?yàn)檎?qǐng)求是在后臺(tái)處理的，所以Ajax 依靠事件來通知這個(gè)請(qǐng)求的進(jìn)展情況。
  function handleResponse(e){
    //當(dāng) onreadystatechange 事件被觸發(fā)后，瀏覽器會(huì)把一個(gè) Event 對(duì)象傳遞給指定的處理函數(shù)，target 屬性則會(huì)被設(shè)為與此事件關(guān)聯(lián)的XMLHttpRequest
    if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //請(qǐng)求成功
      document.getElementById("target").innerHTML = e.target.responseText; //顯示被請(qǐng)求文檔的內(nèi)容
    }
  }
</script>
</body>
</html>

三個(gè)額外的文檔非常簡單：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apples</title>
  <style>
    img { float:left;padding:2px;margin:5px;border: medium double black;background-color: lightgrey; width: 100px;height: 100px;}
  </style>
</head>
<body>
<p>
  <img src="../img/show-page/img_apples.jpg"/>
  Page for apples.
</p>
</body>
</html>

效果如下圖所示：

隨著用戶點(diǎn)擊各個(gè)水果按鈕，瀏覽器會(huì)異步執(zhí)行并取回所請(qǐng)求的文檔，而主文檔不會(huì)被重新加載。這就是典型的 Ajax 行為。

2. 使用 Ajax 事件

建立和探索一個(gè)簡單的示例之后，可以開始深入了解 XMLHttpRequest 對(duì)象支持的功能，以及如何在請(qǐng)求中使用它們了。起點(diǎn)就是第二級(jí)規(guī)范里定義的那些額外事件：

這些事件大多數(shù)會(huì)在請(qǐng)求的某一特定時(shí)間點(diǎn)上觸發(fā)。 readystatechange 和 progress 這兩個(gè)事件是例外，它們可以多次觸發(fā)以提供進(jìn)度更新。

調(diào)度這些事件時(shí)，瀏覽器會(huì)對(duì) readystatechange 事件使用常規(guī)的 Event 對(duì)象，對(duì)其他事件則使用 ProgressEvent 對(duì)象。 ProgressEvent 對(duì)象定義了 Event 對(duì)象的所有成員，并增加了下圖中介紹的這些成員：

下面代碼展示了如何使用這些事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    table {margin: 10px;border-collapse: collapse; float: left;}
    div{margin: 10px;}
    td,th{padding: 4px;}
  </style>
</head>
<body>
<div>
  <button>apples</button>
  <button>cherries</button>
  <button>bananas</button>
</div>
<table id="events" border="1"></table>
<div id="target">
  Press a button
</div>

<script type="application/javascript">
  var buttons = document.getElementsByTagName("button");
  for(var i=0; i<buttons.length; i++){
    buttons[i].onclick = handleButtonPress;
  }

    var httpRequest;
  function handleButtonPress(e){
    clearEventDetails();
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;

    httpRequest.onerror = handleError;
    httpRequest.onload = handleLoad;;
    httpRequest.onloadend = handleLoadEnd;
    httpRequest.onloadstart = handleLoadStart;;
    httpRequest.onprogress = handleProgress;

    httpRequest.open("GET", e.target.innerHTML+".html");
    httpRequest.send();
  }

  function handleResponse(e){
    displayEventDetails("readystate("+httpRequest.readyState+")")
    if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){
      document.getElementById("target").innerHTML = e.target.responseText;
    }
  }

  function handleError(e){ displayEventDetails("error",e);}
  function handleLoad(e){ displayEventDetails("load",e);}
  function handleLoadEnd(e){ displayEventDetails("loadend",e);}
  function handleLoadStart(e){ displayEventDetails("loadstart",e);}
  function handleProgress(e){ displayEventDetails("progress",e);}

  function clearEventDetails(){
    document.getElementById("events").innerHTML = "<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th>";
  }

  function displayEventDetails(eventName,e){
    if(e){
      document.getElementById("events").innerHTML
          +="<tr><td>"+eventName+"</td><td>"+ e.lengthComputable+"</td><td>"+ e.loaded+"</td><td>"+ e.total+"</td></tr>";
    }else {
      document.getElementById("events").innerHTML += "<tr><td>"+eventName+"</td><td>NA</td><td>NA</td><td>NA</td></tr>";
    }
  }
</script>
</body>
</html>

這是之前示例的一種變型，為一些事件注冊(cè)了處理函數(shù)，并在一個(gè) table 元素里為處理的每個(gè)事件都創(chuàng)建了一條記錄。從下圖中可以看到 Firefox 瀏覽器是如何觸發(fā)這些事件的。

3. 處理錯(cuò)誤

使用 Ajax 時(shí)必須留心兩類錯(cuò)誤。它們之間的區(qū)別源于視角不同。

第一類錯(cuò)誤是從 XMLHttpRequest 對(duì)象的角度看到的問題：某些因素阻止了請(qǐng)求發(fā)送到服務(wù)器。例如 DNS 無法解析主機(jī)名，連接請(qǐng)求被拒絕，或者URL無效。

第二類問題是從應(yīng)用程序的角度看到的問題，而非 XMLHttpRequest 對(duì)象。它們發(fā)生于請(qǐng)求成功發(fā)送至服務(wù)器，服務(wù)器接收請(qǐng)求、進(jìn)行處理并生成響應(yīng)，但該響應(yīng)并不指向你期望的內(nèi)容。例如，如果請(qǐng)求的URL 不存在，這類問題就會(huì)發(fā)生。

有三種方式可以處理這些錯(cuò)誤，如下面代碼所示：

3.1 處理設(shè)置錯(cuò)誤

需要處理的第一類問題是向 XMLHttpResquest 對(duì)象傳遞了錯(cuò)誤的數(shù)據(jù)，比如格式不正確的 URL 。它們極其容易發(fā)生在生成基于用戶輸入的URL 時(shí)。為了模擬這類問題，上面文檔中有添加一個(gè)標(biāo)簽 Bad URL （錯(cuò)誤的URL）的button 。按下這個(gè)按鈕會(huì)以以下形式調(diào)用 open 方法：

httpRequest.open("GET","http://")

這是一種會(huì)阻止請(qǐng)求執(zhí)行的錯(cuò)誤，而 XMLHttpRequest 對(duì)象會(huì)發(fā)生這類事件時(shí)拋出一個(gè)錯(cuò)誤。這就意味著需要用一條 try...catch 語句來圍住設(shè)置請(qǐng)求的代碼，就像這樣：

try{
      ...
      httpRequest.open("GET","http://")
      ...
      httpRequest.send();
    }catch(error){
      displayErrorMsg("try/catch",error.message)
    }

catch 子句讓你有機(jī)會(huì)從錯(cuò)誤中恢復(fù)?？梢赃x擇提示用戶輸入一個(gè)值，也可以回退至默認(rèn)的URL ，或是簡單地丟棄這個(gè)請(qǐng)求。在這個(gè)例子中，僅僅調(diào)用了 displayErrorMsg 函數(shù)來顯示錯(cuò)誤消息。

3.2 處理請(qǐng)求錯(cuò)誤

第二類錯(cuò)誤發(fā)生在請(qǐng)求已生成，但其他方面出錯(cuò)時(shí)。為了模擬這類問題，在示例中添加了一個(gè)標(biāo)簽為 Bad Host （錯(cuò)誤主機(jī)）的按鈕。當(dāng)這個(gè)按鈕被按下后，就會(huì)調(diào)用 open 方法訪問一個(gè)不可用的 URL：

httpRequest.open("GET",http://www.ycdoitt.com/nopage.html)

這個(gè)URL 存在兩個(gè)問題。第一個(gè)問題是主機(jī)名不能被 DNS 解析，因此瀏覽器無法生成服務(wù)器連接。這個(gè)問題知道 XMLHttpRequest 對(duì)象開始生成請(qǐng)求時(shí)才會(huì)變得明顯，因此它會(huì)以兩種方式發(fā)出錯(cuò)誤信號(hào)。如果你注冊(cè)了一個(gè) error 事件的監(jiān)聽器，瀏覽器就會(huì)向你的監(jiān)聽函數(shù)發(fā)送一個(gè) Event 對(duì)象。以下是示例中使用的函數(shù)：

function handleError(e){
    displayErrorMsg("Error event",httpRequest.status + httpRequest.statusText);
  }

當(dāng)這類錯(cuò)誤發(fā)生時(shí)，能從 XMLHttpRequest 對(duì)象獲得何種程度的信息取決于瀏覽器，遺憾的是大多數(shù)情況下，會(huì)得到的值為 0的 status和空白的 statusText 值。

第二個(gè)問題是URL和生成請(qǐng)求的具有不同的來源，在默認(rèn)情況下這是不允許的。你通常只能向載入腳本的同源URL發(fā)送Ajax請(qǐng)求。瀏覽器報(bào)告這個(gè)問題時(shí)可能會(huì)拋出 Error 或者觸發(fā)error事件，不同瀏覽器的處理方法不盡相同。不同瀏覽器還會(huì)在不同的時(shí)點(diǎn)檢查來源，這就意味著不一定總是能看到瀏覽器對(duì)同一問題突出顯示?？梢允褂每缯举Y源規(guī)范（CORS,Cross-Origin Resource Sharing）來繞過同源限制。

3.3 處理應(yīng)用程序錯(cuò)誤

最后一類錯(cuò)誤發(fā)生于請(qǐng)求成功完成（從XMLHttpRequest對(duì)象的角度看），但沒有返回你想要的數(shù)據(jù)時(shí)。為了制造這類問題，在上面示例中添加一個(gè)說明標(biāo)簽為 cucumber 的 button 。按下這個(gè)按鈕會(huì)生成類似于 apples、cherries 和 bananas 按鈕那樣的請(qǐng)求URL，但是在服務(wù)器上不存在 cucumber.html 這個(gè)文檔。

這一過程本身沒有錯(cuò)誤（因?yàn)檎?qǐng)求已完成），需要根據(jù) status屬性來確定發(fā)生了什么。當(dāng)請(qǐng)求某個(gè)存在的文檔時(shí)，會(huì)獲得404這個(gè)狀態(tài)碼，它的意思是服務(wù)器無法找到請(qǐng)求的文檔。可以看到示例是如何處理200（意思是OK）以外的狀態(tài)碼的：

if(httpRequest.status == 200){
        target.innerHTML = httpRequest.responseText;
      }else{
        document.getElementById("statusmsg").innerHTML
            = "Status:" + httpRequest.status +" "+ httpRequest.statusText;
      }

在這個(gè)例子中，只是簡單的顯示了status和statusText的值。而在真正的應(yīng)用程序里，需要以一種有用且有意義的方式進(jìn)行恢復(fù)（比如顯示備用內(nèi)容或警告用戶有問題，具體看哪種更適合應(yīng)用程序）。

4. 獲取和設(shè)置標(biāo)頭

使用XMLHttpRequest對(duì)象，可以設(shè)置發(fā)送給服務(wù)器的請(qǐng)求標(biāo)頭（Header）和讀取服務(wù)器響應(yīng)里的標(biāo)頭。

4.1 覆蓋請(qǐng)求的HTTP方法

通常不需要添加或修改Ajax請(qǐng)求里的標(biāo)頭。瀏覽器知道需要發(fā)送些什么，服務(wù)器也知道如何進(jìn)行響應(yīng)。不過，有幾種情況例外。第一種是 X-HTTP-Method-Override 標(biāo)頭。

HTTP標(biāo)準(zhǔn)通常被用于在互聯(lián)網(wǎng)上請(qǐng)求和傳輸HTML文檔，它定義了許多方法。大多數(shù)人都知道GET和POST，因?yàn)樗鼈兊氖褂米顬閺V泛。不過還存在其他一些方法（包括PUT和DELETE），這些HTTP方法用來給向服務(wù)器請(qǐng)求的URL賦予意義，而且這種用法正在呈現(xiàn)上升趨勢(shì)。舉個(gè)例子，假如想查看某條用戶記錄，可以生成這樣一個(gè)請(qǐng)求：

httpRequest.open("GET","http://myserver/records/freeman/adam");

這里只展示了HTTP方法和請(qǐng)求的URL。要使這個(gè)請(qǐng)求能順利工作，服務(wù)器端必須由應(yīng)用程序能理解這個(gè)請(qǐng)求，并將它轉(zhuǎn)變成一段合適的數(shù)據(jù)以發(fā)送回服務(wù)器。如果想刪除數(shù)據(jù)，可以這么寫：

httpRequest.open("DELETE","http://myserver/records/freeman/adam");

此處的關(guān)鍵在于通過HTTP方法表達(dá)出你想讓服務(wù)器做什么，而不是把它用某種方式編碼進(jìn)URL。

以這種方式使用HTTP方法的問題在于：許多主流的Web技術(shù)只支持GET和POST，而且不少防火墻只允許GET和POST請(qǐng)求通過。有一種慣用的做法可以規(guī)避這個(gè)限制，就是使用 X-HTTP-Method-Override標(biāo)頭來指定想要使用的HTTP方法，但形式上市在發(fā)送一個(gè)POST請(qǐng)求。代碼演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
<div>
  <button>apples</button>
  <button>cherries</button>
  <button>bananas</button>
</div>
<div id="target">Press a button</div>

<script>
  var buttons = document.getElementsByTagName("button");
  for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = handleButtonPress;
  }

  var httpRequest;
  function handleButtonPress(e){
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open("GET", e.target.innerHTML+".html");
    httpRequest.setRequestHeader("X-HTTP-Method-Override","DELETE");
    httpRequest.send();
  }

  function handleError(e){
    displayErrorMsg("Error event",httpRequest.status+httpRequest.statusText);
  }

  function handleResponse(){
    if(httpRequest.readyState == 4 && httpRequest.status == 200){
      document.getElementById("target").innerHTML = httpRequest.responseText;
    }
  }
</script>
</body>
</html>

在這個(gè)例子中，有使用XMLHttpRequest對(duì)象上的setRequestHeader方法來表明想讓這個(gè)請(qǐng)求以HTTP DELETE方法的形式進(jìn)行處理。請(qǐng)注意我在調(diào)用open方法之后才設(shè)置了這個(gè)標(biāo)頭。如果試圖在open方法之前使用setRequestHeader方法，XMLHttpRequest對(duì)象就會(huì)拋出一個(gè)錯(cuò)誤。

PS:覆蓋HTTP需要服務(wù)器端的Web應(yīng)用程序框架能理解X-HTTP-Method-Override這個(gè)慣例，并且你的服務(wù)器端應(yīng)用程序要設(shè)置成能尋找和理解那些用的較少的HTTP方法。

4.2 禁用內(nèi)容緩存

第二個(gè)可以添加到Ajax請(qǐng)求上的有用標(biāo)頭是Cache-Control，它在編寫和調(diào)試腳本時(shí)尤其有用。一些瀏覽器會(huì)緩存通過Ajax請(qǐng)求所獲得的內(nèi)容，在瀏覽會(huì)話期間不會(huì)再請(qǐng)求它。對(duì)在前面的例子而言，意味著 apples.html、cherries.html和bananas.html 上的改動(dòng)不會(huì)立即反映到瀏覽器中。下面代碼展示了可以如何設(shè)置標(biāo)頭來避免這一點(diǎn)：

httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open("GET", e.target.innerHTML+".html");
    httpRequest.setRequestHeader("Cache-Control","no-cache");
    httpRequest.send();

設(shè)置標(biāo)頭的方式和之前的例子一樣，但這次用到的標(biāo)頭是 Cache-Control，而想要的值是 no-cache。放置這條語句后，如果通過Ajax請(qǐng)求的內(nèi)容發(fā)生了改變，就會(huì)在下一次請(qǐng)求文檔時(shí)體現(xiàn)出來。

4.3 讀取響應(yīng)標(biāo)頭

可以通過 getResponseHeader 和 getAllResponseHeaders 方法來讀取服務(wù)器響應(yīng)某個(gè)Ajax請(qǐng)求時(shí)發(fā)送的HTTP標(biāo)頭。在大多數(shù)情況下，你不需要關(guān)心標(biāo)頭里有什么，因?yàn)樗鼈兪菫g覽器和服務(wù)器之間交互事務(wù)的組成部分。下面代碼展示了如何使用這個(gè)屬性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,user-scalable=no" name="viewport" />
  <meta name="author" content="葉超Luka" />
  <meta name="description" content="A simple example" />
  <title>Example</title>
  <link href="../img/ycdoit.ico" type="image/x-icon" rel="shortcut icon" />
  <style>
    #allheaders,#ctheader{border: medium solid black;padding: 2px;margin: 2px;}
  </style>
</head>
<body>
<div>
  <button>apples</button>
  <button>cherries</button>
  <button>bananas</button>
</div>
<div id="ctheader"></div>
<div id="allheaders"></div>
<div id="target">Press a button</div>

<script>
  var buttons = document.getElementsByTagName("button");
  for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = handleButtonPress;
  }

  var httpRequest;
  function handleButtonPress(e){
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open("GET", e.target.innerHTML+".html");
    httpRequest.setRequestHeader("Cache-Control","no-cache");
    httpRequest.send();
  }

  function handleResponse(){
    if(httpRequest.readyState==2){
      document.getElementById("allheaders").innerHTML = httpRequest.getAllResponseHeaders();
      document.getElementById("ctheader").innerHTML = httpRequest.getResponseHeader("Content-Type");
    }else if(httpRequest.readyState == 4 && httpRequest.status == 200){
      document.getElementById("target").innerHTML = httpRequest.responseText;
    }
  }
</script>
</body>
</html>

效果圖如下：