JQuery中Ajax的操做

　　

 

一．AJAX簡介

         1.定義：異步 JavaScript 及 XML（Asynchronous JavaScript And XML）。它是一系列交互式網頁應用技術的結合體，包含知識有：

                     1）基於XHTML和CSS標準的表示；

　　　　　　2）使用Document Object Model（DOM）進行動態顯示和交互；

　　　　　　3）使用XMLHttpRequest與服務器進行異步通訊；

　　　　　　4）使用JavaScript綁定一切

 

         2.AJAX 是一種用於建立快速動態網頁的技術。

        

         3. 經過在後臺與服務器進行少許數據交換，AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新；而傳統的網　　頁　（不　　使　　　　用 AJAX）若是須要更新內容，必需重載整個網頁面。

 

二．XMLHttpRequest:是AJAX的核心對象，用於實現發送和接收HTTP請求與響應信息。

 

1．open(method,uri,async,[username],[password))：創建到服務器的新請求。

                   metod:請求方式，get,post,put,delete或head

                   uri：請求的服務器地址

                   async:設置異步或同步，true(默認)/false

                   根據須要可傳username和password給服務器進行用戶驗證

 

 

         2．setRequestHeader(header,value)：設置請求的頭信息。當readyState屬性值爲1時，能夠在調用open()方法後調用這個方法，不然將獲得一個異常。

 

         3．getResponseHeader()：用於檢索響應的頭部值。當readyState屬性值爲3或4時時，才能夠調用此方法，不然返回一個空字符串。此外還能夠經過　　                getAllResponseHeaders()  方法獲取全部的HttpResponse的頭部信息。

 

4．send([data])：向服務器發送請求。若爲POST請求，可經過參數data傳遞數據給服務器，若不傳遞參數可顯示地調用send(null)，等同於send()。

//設置表單傳輸的編碼格式，若爲POST傳值，則要顯示設置 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

 application/x-www-form-urlencoded：標準的編碼格式，數據被編碼爲名稱/值對

 

 

5．readyState屬性:提供當前HTML的就緒狀態,有0-4個狀態

         0：未初始化狀態，建立了XMLHttpRequest對象，但未初始化。

 

         1：準備發送狀態，調用了XMLHttpRequest對象的open()方法，而且XMLHttpRequest對象已經準備好將一個請求發送到服務器端。

 

         2：已發送狀態，已經經過send()方法把一個請求發送到服務器端，但尚未收到一個響應。

 

         3：正在接收狀態，已經接收到HTTP響應頭部信息，可是消息體部分尚未徹底接收到。

 

         4：完成響應狀態，已經完成了HttpResponse響應的接收。

 

6．status屬性：返回HTTP狀態代碼，如200,404。readyState屬性值爲3或4時纔可用。

 

7．statusText屬性：返回HTTP狀態代碼對應的文本，如200->ok、404->Not Found。readyState屬性值爲3或4時纔可用。

 

8．abort()：退出當前請求

 

9．responseText屬性：得到字符串形式的響應數據，當readyState屬性值爲4時，該屬性才包含完整的響應信息。

 

10．responseXML屬性：得到 XML 形式的響應數據，當readyState屬性值爲4，且響應頭部的Content-Type的MIME類型被指定爲XML（text/xml或application/xml）時，該屬性纔有值而且被解析爲一個XML文檔，不然該屬性值爲null。若是返回的XML文檔結構不良或未完成響應回傳，該屬性值也會爲null。

 

11．onreadystatechange：每當readyState屬性值發生改變時，就會觸發onreadychange事件。通常都經過該事件來觸發回傳處理函數。

 

 

3、操做步驟

         1.建立XMLHttpRequest對象

function getXmlHttp() {          var xmlHttp;          //檢查瀏覽器是否支持XMLHttpRequest對象          if (window.XMLHttpRequest) {                    // code for IE7+, Firefox, Chrome, Opera, Safari                    xmlHttp = new XMLHttpRequest();          } else {                    // code for IE6, IE5                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");          }          return xmlHttp ; }

 

 

         2. 初始化HTTP請求參數（定義open方法）

 

         3. 發送請求（調用send方法）

 

         4．設置回調函數

                   判斷readyState是否爲4以及status是否爲200，而後經過responseText或responseXML獲取服務器返回的數據。

 

if (xmlhttp.readyState==4 && xmlhttp.status==200) {                    document.getElementById("result").innerHTML = xmlHttp.responseText ; }

 

4、案例

         1．HelloWorld

         2．數據查詢

         3．XML

         4．用戶註冊

 

 

 

5、Jquery中Ajax操做

1．$.load()

加載HTML內容

$("#content").load("loaded.html") ;

 

篩選加載HTML內容

$("#content").load("loaded.html #s") ;

 

傳遞參數(get)

$("#content").load("getDate.jsp?num=2&t="+Math.random()) ;

 

5.傳遞參數(post)

$("#content").load("getDate.jsp #n",{num:3}) ;

 

6.回調函數

function(data) {}

1)date返回的是HTML文檔

alert(date) ;

 

 

 

2) 能夠把以上的HTML文檔轉換爲JQuery對象,而後訪問html文檔中的某部份內容，但要注意如下兩點：

                  A、html文檔中根據結點使用filter方法獲取

B、html文檔中子結點使用find方法獲取

 

         7.回調函數的三個參數

         function(responseText,textStatus,XMLHttpRequest) {}

         responseText:同上面的data，請求返回的內容

         textStatus:請求的狀態，如success,error,timeout等

XMLHttpRequest:XMLHttpRequest對象

 

2．$.get()/$.post()

$.get(url, [data], [callback], [type])

$.post(url, [data], [callback], [type])

 

其中，callback回調函數有兩個參數(請求成功後[success]纔會觸發此函數)

function(data,textStatus) { }

data:返回的內容，能夠是XML,JSON,HTML等

         textStatus:請求狀態，包括有success,error,timeout,notmodified等

        

3．$.ajax()

 

4．$.ajaxSetup():設置全局 AJAX 默認選項

 

5．$.parseJSON()：接受一個JSON字符串，返回解析後的對象。相似於eval()函數

 

6．$.getScript/$.getJSON()

$.getScript():經過 HTTP GET 請求載入並執行一個 JavaScript 文件。

 

         $.getJSON():經過 HTTP GET 請求載入 JSON 數據。

回調函數：成功載入json文件或json數據後觸發該函數，可以使用$.each()方法遍歷對象和數組（查看API）。語法：

$.each(「數組或對象」,回調函數(對象的成員或數組的索引,變量或內容){ })

 

退出each循環：return false ;

 

7．全局函數

 

六．JQuery中的AJAX相關工具函數

1．Serialize()

 

2．serializeArra()

 

3．$.param()

 

 

 

7、JSON

1.概念：

         JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）

JSON 是輕量級的文本數據交換格式

JSON 獨立於語言

JSON 具備自我描述性，更易理解

         JSON 是存儲和交換文本信息的語法。相似 XML，但JSON 比 XML 更小、更快，更易解析。

 

emp.json

{          "employees": [                    { "firstName":"Bill" , "lastName":"Gates" },                    { "firstName":"George" , "lastName":"Bush" },                    { "firstName":"Thomas" , "lastName":"Carter" }          ] }

 

emp.xml

<employees>          <employee>                   <firstName>Bill</firstName>                    <lastName>Gates</lastName>          </employee>            <employee>                    <firstName>George</firstName>                    <lastName>Bush</lastName>          </employee>            <employee>                    <firstName>Thomas</firstName>                    <lastName>Carter</lastName>          </employee> </employees>

 

2．比較XML

沒有結束標籤

更短

讀寫的速度更快

可以使用內建的 JavaScript eval() 方法進行解析

使用數組

不使用保留字

 

 

3．JSON的語法：JSON 語法是 JavaScript 對象表示法語法的子集。

     數據在名稱/值對中

     數據由逗號分隔

     花括號保存對象

    方括號保存數組

 

4．JSON 值

    JSON 值能夠是：

    數字（整數或浮點數）

   字符串（在雙引號中）

   邏輯值（true 或 false）

   數組（在方括號中）

   對象（在花括號中）

   null

 

5．JSON 文件

    JSON 文件的文件類型是 ".json"

    JSON 文本的 MIME 類型是 "application/json"

 

6．案例

         1) 建立包含 JSON 語法的 JavaScript 字符串

var txt = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"George" , "lastName":"Bush" },' + '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

 

         2) 將 JSON 文本轉換爲 JavaScript 對象var obj = eval ("(" + txt + ")");

 

         注：eval() 函數使用的是 JavaScript 編譯器，可解析 JSON 文本，而後生成 JavaScript 對象。必須把文本包圍在括號中，這樣才能避免語法錯誤

 

         3) 在網頁中使用 JavaScript 對象

              document.getElementById("fname").innerHTML = obj.employees[1].firstName

　　　　document.getElementById("lname").innerHTML = obj.employees[1].lastName