AJAX - 基本知識

ajax=異步的javascript和xml

     通過在背景與伺服器進行少量資料交換，ajax 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

一、ajax

- 建立 xmlhttprequest 對象

1.什麼是xmlhttprequest對象

     所有現代浏覽器（ie7、chrome、firefox、safari、opera）均支援xmlhttprequest對象，xmlhttprequest對象用來在背景與伺服器交換資料，實作頁面局部重新整理。

2.如何建立xmlhttprequest對象

     一般浏覽器都支援xmlhttprequest對象，但部分ie浏覽器支援的是activexobject。

var xmlhttp;

3.xmlhttprequest對象如何與伺服器交換資料

3.1 向伺服器發送請求

     我們使用xmlhttprequest的open和send方法：

方法

描述

open(method,url,async)

規定請求的類型、url 以及是否異步處理請求。

method：請求的類型；get 或 post

url：檔案在伺服器上的位置

async：true（異步）或 false（同步）

send(string)

将請求發送到伺服器。

string：僅用于 post 請求

3.1.1 使用get請求

     一個簡單的get請求：

     為了避免每次獲得的是緩存中的内容，為了避免，可以在url中加一個唯一的時間id：

     通過get向伺服器發送資料demo：

3.1.3 使用post請求：

     一個簡單的post請求：

     如果像html表單那樣post資料，在setrequestheader來添加http頭，使用send方法中規定要發送的資料：

     向請求添加 http 頭：setrequestheader(header,value)     

          header: 規定頭的名稱

          value: 規定頭的值

3.1.3關于異步true或false:

     對于web開發來說，發送異步請求是一個巨大的進步，因為很多在伺服器執行的任務都相當費時，在ajax出現前，這可能會引起應用程式挂起或停止。

     通過ajax,javascript無需等待伺服器響應，而是：

          1.在等待伺服器響應期間執行其它腳本

          2.當響應就緒後對響應進行處理

當async=true時，應設定onreadystatechange事件中處于就緒狀态時的執行函數：

當async=false時，處于同步狀态，此時javascript會等到伺服器就緒時才執行，無需寫onreadystatechange監控函數：

3.2 伺服器的響應

如果要獲得來自伺服器的響應，使用xmlhttprequest中的responsetext或responsexml。

responsetext

獲得字元串形式的響應資料。

responsexml

獲得 xml 形式的響應資料。

3.2.1 使用responsetext

     responsetext 屬性傳回字元串形式的響應，是以您可以這樣使用：

3.2.2 使用responsexml

     如果來自伺服器的響應是 xml，而且需要作為 xml 對象進行解析，請使用 responsexml 屬性：

3.3 ajax 的 onreadystatechange事件

     當請求發送到伺服器的整個過程中，我們需要執行一些基于響應的任務，即每當readystate改變時都會觸發onreadystatechange事件，readystate屬性存有xmlhttprequest的狀态資訊。

下面是xmlhttprequest對象的三個重要屬性：

屬性

onreadystatechange

存儲函數（或函數名），每當 readystate 屬性改變時，就會調用該函數。

readystate

存有 xmlhttprequest 的狀态。從 0 到 4 發生變化。

0: 請求未初始化

1: 伺服器連接配接已建立

2: 請求已接收

3: 請求進行中

4: 請求已完成，且響應已就緒

status

200: "ok"

404: 未找到頁面

當readystate=4且status=200時，表示響應已就緒：

3.4 使用callback回調函數

     callback函數是一種以參數的形式傳遞給另一個函數的函數，我們在處理ajax任務時，一般都會寫一個處理ajax請求的标準函數，這個标準函數包括請求的url和發生onreadystatechange時間所執行的任務：

< html>

     < head>

     < script type ="text/javascript" >

          var xmlhttp;

          function loadxmldoc(url,cfunc) {

               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=cfunc;

               xmlhttp.open( "get",url, true );

               xmlhttp.send();

          }

          function myfunction(){

               loadxmldoc( "/ajax/test1.txt", function (){

                 if (xmlhttp.readystate==4

&& xmlhttp.status==200){

                   document.getelementbyid( "mydiv" ).innerhtml=xmlhttp.responsetext;

                }

              });

          }

     </ script>

     </ head>

< body>

  < div id= "mydiv" >

             < h2> let

ajax change this text </h2 >

  </ div>

  < button type ="button" onclick= "myfunction()"> 通過

ajax 改變内容 </ button>

     </ body>

</ html>