輕鬆掌握AJAX(Jquery)異步通信

       上篇博客談了AJAX,下面再說說它的優缺點,我們知道不管是什麼技術一般都是因爲有它的利用價值纔出現的,也就是它們都是有優點的,而有老句話說的是“是藥三分毒”,技術也一樣,什麼樣的技術一般也都會有它的缺陷的。項目中只要是它的優點大於它的缺點我們就會去使用它。AJAX的缺點相對於它的優點來說基本上可以忽略,因爲它的優點真的是很優秀

AJAX優點:

        1、 使用異步方式與服務器通信,不需要打斷用戶正在進行的操作,具有更加迅速的響應能力。

        2、 可以在不更新整個頁面的前提下維護數據(不刷新頁面),給用戶的體驗非常棒。這也是它最大的優點。

        3、 AJAX的原則是“按需取數據”,可以最大程度的減少冗餘請求,充分利用了客戶端閒置的處理能力,降低服務器的負荷。

AJAX缺點:

        1、破壞瀏覽器後退按鈕的正常行爲。在動態更新頁面後,用戶無法回到前一個頁面的狀態,這是因爲瀏覽器只能記下歷史記錄中的靜態頁面。

        2、使用JavaScript作Ajax的引擎,JavaScript的兼容性和Debug需要特別注意。

AJAX讓用戶頁面豐富起來,增強用戶體驗.AJAX也是所有Web開發的必修課.雖然說AJAX技術並不複雜,但是實現方式還是會因爲每個開發人員而有所差異。看着它如此之好,是不是感覺使用起來還是不太方便,不太好控制而煩惱呢?不要着急,下面就再介紹一種技術,讓AJAX的異步通信技術更加方便的應用到我們的程序中,那就是Jquery

        jQuery提供一系列AJAX函數來幫助我們統一這種差異, 並且讓調用AJAX更加簡單.jQuery提供了幾個用於發送AJAX請求的函數. 其中最核心的也是最複雜的是jQuery.ajax(),所有的其他AJAX函數都是它的一個簡化調用.當我們想要完全控制AJAX時可以使用此方法, 否則還是使用簡化方法如get, post, load等更加方便。下面我們就來逐一認識這些個方法:

1.    load(url, [data], [callback] )

        載入遠程 HTML 文件代碼並插入至 DOM 中,默認使用 GET 方式傳遞,附加參數時自動轉換爲 POST 方式。jQuery 1.2 中,可以指定選擇符,來篩選載入的 HTML 文檔,DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。

參數:

url

待裝入 HTML 網頁網址

data(可選)Map,String

發送至服務器的 key/value 數據。在jQuery 1.3中也可以接受一個字符串了。

callback(可選)Callback

載入成功時回調函數。






示例:

描述: 加載 feeds.html 文件內容。

jQuery 代碼:

 $("#feeds").load("feeds.html");

2.    jQuery.get(url, [data], [callback], [type] )

        通過遠程 HTTP GET 請求載入信息,這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。

參數:前面的解釋參見1

type (可選)String

返回內容格式,xml,html, script, json, text, _default

示例:

描述: 顯示 test.php 返回值(HTML 或 XML,取決於返回值)。

jQuery 代碼:

$.get("test.php",function(data){
  alert("Data Loaded: " + data);
});

描述: 顯示 test.cgi 返回值(HTML 或 XML,取決於返回值),添加一組請求參數。

jQuery 代碼:

$.get("test.cgi",{ name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

3.    jQuery.getJSON(url, [data], [callback] )

        通過 HTTP GET 請求載入 JSON 數據,在 jQuery 1.2 中,您可以通過使用JSONP 形式的回調函數來加載其他網域的JSON數據,如 "myurl?callback=?"。jQuery 將自動替換 ? 爲正確的函數名,以執行回調函數。 注意:此行以後的代碼將在這個回調函數執行前執行。

參數:解釋參見1

示例:

描述: 從 test.js 載入 JSON 數據,附加參數,顯示 JSON 數據中一個 name 字段數據。

jQuery 代碼:

$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " +json.users[3].name);
});

4.    jQuery.getScript(url, [callback] )

        通過 HTTP GET 請求載入並執行一個 JavaScript 文件,jQuery 1.2 版本之前,getScript 只能調用同域 JS 文件。 1.2中,您可以跨域調用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步執行腳本。如果通過 getScript 加入腳本,請加入延時函數。

參數:參見1

示例:

描述:加載並執行 test.js ,成功後顯示信息。

jQuery 代碼:

$.getScript("test.js",function(){
  alert("Script loaded andexecuted.");
});

5.    jQuery.post(url, [data], [callback], [type] )

        通過遠程 HTTP POST 請求載入信息,這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數,請使用 $.ajax。

參數:參見2

示例:

描述1:請求 test.php 網頁,忽略返回值

jQuery 代碼:

$.post("test.php");

描述2:請求 test.php 頁面,並一起發送一些額外的數據(同時仍然忽略返回值)

jQuery 代碼:

$.post("test.php",{ name: "John", time: "2pm" } );

描述3:輸出來自請求頁面 test.php 的結果(HTML 或 XML,取決於所返回的內容)

jQuery 代碼:

$.post("test.php",function(data){
   alert("Data Loaded: " + data);
 });

6.    jQuery.ajax(options )

        通過 HTTP 請求加載遠程數據。jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數,除非你需要操作不常用的選項,以獲得更多的靈活性。

最簡單的情況下,$.ajax()可以不帶任何參數直接使用。

注意:所有的選項都可以通過 $.ajaxSetup()函數來全局設置。

一些參數介紹請參見:

http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html

   關於jQuery.ajax百度文庫裏介紹的非常全面(還有示例):

   http://baike.baidu.com/view/6278307.htm

 

總結:

           各種功能的實現隨着技術的不斷革新將會變得越來越簡單,我們只需要掌握某些主流技術的基本原理和學習的方法即可,有了一套完整的思想,學習什麼技術基本上都一樣,有時候遇到一門新技術我們可能用兩三天的時間就能明白其大概的框架,參考說明就能將其應用到我們的項目中來。

    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章