[jQuery知識]jQuery之知識十二-Ajax初級

前言

1.Ajax 概述 
2.load()方法 
3..get()和.post()

Ajax 全稱為:“Asynchronous JavaScript and XML”(非同步 JavaScript 和 XML)， 它並不是 JavaScript 的一種單一技術，而是利用了一系列互動式網頁應用相關的技術所形 成的結合體。使用 Ajax，我們可以無重新整理狀態更新頁面，並且實現非同步提交，提升了使用者 體驗。 一.Ajax 概述

Ajax 這個概念是由 Jesse James Garrett 在 2005 年發明的。它本身不是單一技術，是一串技術的集合，主要有: JavaScript，通過使用者或其他與瀏覽器相關事件捕獲互動行為; XMLHttpRequest 對象，通過這個對象可以在不中斷其它瀏覽器任務的情況下向伺服器發送請求; 伺服器上的檔案，以 XML、HTML 或 JSON 格式儲存文本資料; 其它 JavaScript，解釋來自伺服器的資料(比如 PHP 從 MySQL 擷取的資料)並將其呈現到頁面上。

由於 Ajax 包含眾多特性，優勢與不足也非常明顯。優勢主要以下幾點: 不需要外掛程式支援(一般瀏覽器且預設開啟 JavaScript 即可); 使用者體驗極佳(不重新整理頁面即可擷取可更新的資料); 提升 Web 程式的效能(在傳遞資料方面做到按需放鬆，不必整體提交); 減輕伺服器和頻寬的負擔(將伺服器的一些操作轉移到用戶端);

而 Ajax 的不足由以下幾點: 不同版本的瀏覽器度 XMLHttpRequest 對象支援度不足(比如 IE5 之前); 前進、後退的功能被破壞(因為 Ajax 永遠在當前頁，不會幾率前後頁面); 搜尋引擎的支援度不夠(因為搜尋引擎爬蟲還不能理解 JS 引起變化資料的內容); 開發調試工具缺乏(相對於其他語言的工具集來說，JS 或 Ajax 調試開發少的可憐)。 非同步和同步

使用 Ajax 最關鍵的地方，就是實現非同步請求、接受響應及執行回調。那麼非同步與同步 有什麼區別呢?我們普通的 Web 程式開發基本都是同步的，意為執行一段程式才能執行下 一段，類似電話中的通話，一個電話接完才能接聽下個電話;而非同步可以同時執行多條任務， 感覺有多條線路，類似於簡訊，不會因為看一條簡訊而停止接受另一條簡訊。Ajax 也可以 使用同步模式執行，但同步的模式屬於阻塞模式，這樣會導致多條線路執行時又必須一條一 條執行，會讓 Web 頁面出現假死狀態，所以，一般 Ajax 大部分採用非同步模式。 二.load()方法

jQuery 對 Ajax 做了大量的封裝，我們使用起來也較為方便，不需要去考慮瀏覽器安全色性。對於封裝的方式，jQuery 採用了三層封裝:最底層的封裝方法為:.ajax()，而通過這層封裝了第二層有三種方法:.load()、.get()和.post()，最高層是.getScript()和$.getJSON() 方法。

.load()方法可以參數三個參數:url(必須，請求html檔案的url地址，參數類型為String)、 data(可選，發送的 key/value 資料，參數類型為 Object)、callback(可選，成功或失敗的回調 函數，參數類型為函數 Function)。

如果想讓 Ajax 非同步載入一段 HTML 內容，我們只需要一個 HTML 請求的 url 即可。

//HTML<input type="button" value="非同步擷取資料" /><div id="box"></div>//jQuery$('input').click(function () { $('#box').load('test.html');});

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

如果想對載入的 HTML 進行篩選，那麼只要在 url 參數後面跟著一個選取器即可。

//帶選取器的 url$('input').click(function () {$('#box').load('test.html .my'); });

1 2 3 1 2 3

如果是伺服器檔案，比如.PHP。一般不僅需要載入資料，還需要向伺服器提交資料，那 麼我們就可以使用第二個選擇性參數 data。向伺服器提交資料有兩種方式:get 和 post。

//不傳遞 data，則預設 get 方式 $('input').click(function () {$('#box').load('test.php?url=ycku'); });

1 2 3