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

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

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

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

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

1. Ajax起步

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

<!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;
  }

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

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

三個額外的文檔非常簡單：

<!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>

效果如下圖所示：

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

2. 使用 Ajax 事件

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

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

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

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

<!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>

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

3. 處理錯誤

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

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

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

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

3.1 處理設(shè)置錯誤

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

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

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

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

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

3.2 處理請求錯誤

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

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

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

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

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

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

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

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

這一過程本身沒有錯誤（因為請求已完成），需要根據(jù) status屬性來確定發(fā)生了什么。當(dāng)請求某個存在的文檔時，會獲得404這個狀態(tài)碼，它的意思是服務(wù)器無法找到請求的文檔?？梢钥吹绞纠侨绾翁幚?00（意思是OK）以外的狀態(tài)碼的：

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

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

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

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

4.1 覆蓋請求的HTTP方法

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

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

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

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

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

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

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

<!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>

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

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

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

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

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請求的內(nèi)容發(fā)生了改變，就會在下一次請求文檔時體現(xiàn)出來。

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

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

<!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>

效果圖如下：