jQuery與Ajax的應用


【jQuery中的Ajax】


首先說說Ajax的優勢:
不需要插件支持;
優秀的客戶體驗;
提高web程序的性能:在於傳輸數據的方式,它是通過XMLHttpRequest對象向服務器提交希望提交的數據,即按需發送;
減少服務器和帶寬的負擔。

Ajax的不足
瀏覽器對XMLHttpRequest對象的支持度不足;
破壞了瀏覽器前進、“后退”按鈕的正常功能;
對搜索引擎支持不足:通常搜索引擎都是通過爬蟲程序來對互聯網上的數據進行搜索整理的,但是爬蟲程序不能理解那些奇怪的javascript代碼和因此引起的頁面變化。
開發和調試工具的缺乏。

編寫第一個Ajax小例子:
這是一個傳統的javascript的例子,例子描述了,單擊一個按鈕,然后通過傳統的javascript的Ajax的方式從服務器端取回一個“Hello Ajax”的字符串顯示在頁面上。

<script type="text/javascript">
        function Ajax(){
           var xmlhttpreq=null;
           if(window.AtiveXObject){
               xmlhttpreq= new Active XObject("Microsoft.XMLHTTP");
           }else if{
               xmlhttpreq = new XMLHttpRequest();
               xmlhttpreq.open("GET","test.php",true);
               xmlhttpreq.onreadystatechange = RequestCallback;
               xmlhttpreq.send(null);
           }
        }

        function RequestCallback(){
            if(xmlhttpreq.readystate==4){
                if(xmlhttpreq.status==200){
                    document.getElementById("resText").innerHTML = xmlHTTPReq.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Ajax提交" onclick="Ajax();">
    <div id="resText"></div>
</body>//部分代碼省略


進入正題:jQuery中的Ajax
jquery對ajax操作進行了封裝,在jquery中$.ajax()方法屬於最底層的方法,第二層是load()、$.get()\$.post()方法,第三層是$.getScript()和$getJSON()方法。

先來講講第2層的方法
【load()方法】
1、載入html文檔
load()方法是jQuery中最簡單和最常用的Ajax方法,能載入遠程的html代碼並插入到DOM中,結構為:load(url,data,callback);
參數說明:
url:String類型,表示請求html頁面的統一資源定位器地址;
data:Object類型,發送至服務器的key/value數據;
callback:Function類型,請求完成后的回調函數,無論請求成功或失敗。
例如加載一個test.html內容

$(function(){
     $("#send").click(function(){
          $("#restext").load("test.html");
      });
})

2、篩選載入html文檔:結構:$("#restext").load("test.html .para");(url與選擇器之間有一個空格)
3、傳遞方式:load方法的傳遞方式是根據參數data來自動指定,如果沒有參數采用GET方式傳遞。
4、回調參數:對於必須在加載完成后才能繼續的操作。load()方法提供了回調函數(callback),該函數有三個參數,代表:請求返回的內容、請求狀態和XMLHttpRequest對象

$("#restext").load("test.html", function(responseText,textStatic, XMLHttpRequest){
     //responseText:請求返回的內容
     //textStatic:請求狀態:success,error,notmodified,timeout4種
     //XMLHttpRequest:XMLHttpRequest對象
});

【$.get()和$.post()方法】
load()方法常用來從web服務器上獲取靜態的數據文件。在項目中,如果需要傳遞一些參數給服務器中的頁面,就可以使用$get()和$post()方法。這兩個方法都是jquery中的全局函數。

$.get()方法
結構為:$.get()(url,data,callback,type);
參數說明:其他如上,type表示服務器端返回內容的格式,包括xml,html,json,等
下面是一個例子片段:

$("#send").click(function(){
          $.get("get1.php",{/一個json片段},回調函數);
      });

服務器返回的數據格式有多種:html片段、xml文檔、json文件。
通過這三種數據格式的優缺點分析:
可以得知不需要與其他應用程序共享數據時,使用html來提供返回數據一般是最簡單的;如果數據需要重用,json是不錯的選擇,他在性能和 文件大小方面具有優勢;的那個遠程應用程序未知時,XML是明知的選擇,他也是web服務界的“世界語”。

$.post()方法
結構和$.get()方法相同,不過也有區別,就是一些傳遞數據的規則不同。

以上方法完成了一些常規的Ajax程序,如果需要編寫一些復雜的程序就需要用到jquery中$.ajax()方法。

下面講第三層方法:
$.getScript()方法和$.getJson()方法

$.getScript()方法:有時候頁面初次加載時就取得全部的javascript文件是沒有必要的,雖然也有一些解決方法,但是都不理想,為此,jquery提供了$.getScript()方法來直接加載.js文件。

$("#send").click(function(){
    $.getScript("test.js");
      });

$.getJson()方法:加載JSON文件,和$.getScript()方法的用法相同。
另外jQuery還提供了一個通用的遍歷方法$.each();用於遍歷對象和數組,他不同於jquery對象的each方法,他是一個全局函數,不操作對象,而是以一個數組或對象作為第一個參

數,以一個回調函數作為第二個參數,其中,回調函數具有兩個參數,索引及對應變量或內容。

現在來講$.ajax()方法
它是jQuery中的最底層的方法,該方法只有一個參數,但是這個對象里面包括了該方法所需要的請求設置以及回調函數等信息,參數以key/value的形式存在,所有參數都是可選,常用參數為:
url: 要求為String類型的參數,(默認為當前頁地址)發送請求的地址。
type: 要求為String類型的參數,請求方式(post或get)默認為get。注意其他http請求方法,例如put和delete也可以使用,但      僅部分瀏覽器支持。
timeout: 要求為Number類型的參數,設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。
data: 要求為Object或String類型的參數,發送到服務器的數據。如果已經不是字符串,將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換,可以查看processData選項。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如
   {foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
dataType: 要求為String類型的參數,預期服務器返回的數據類型。如果不指定,JQuery將自動根據http包mime信息返回responseXML或responseText,並作為回調函數參數傳遞。
          可用的類型如下:xml:返回XML文檔,可用JQuery處理。
          html:返回純文本HTML信息;包含的script標簽會在插入DOM時執行。
          script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),所有post請求都將轉為get請求。
          json:返回JSON數據。
          jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換后“?”為正確的函數名,以執行回調函數。
          text:返回純文本字符串。
beforeSend:要求為Function類型的參數,發送請求前可以修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。    
           XMLHttpRequest對象是惟一的參數。

function(XMLHttpRequest){

               this;   //調用本次ajax請求時傳遞的options參數

            }

complete:要求為Function類型的參數,請求完成后調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。

function(XMLHttpRequest, textStatus){

             this;    //調用本次ajax請求時傳遞的options參數

          }

 

success:要求為Function類型的參數,請求成功后調用的回調函數,有兩個參數。
         (1)由服務器返回,並根據dataType參數進行處理后的數據。
         (2)描述狀態的字符串。

function(data, textStatus){

            //data可能是xmlDoc、jsonObj、html、text等等

            this;  //調用本次ajax請求時傳遞的options參數

        };

error:要求為Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。
       ajax事件函數如下:

function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數

       }

 

global:要求為Boolean類型的參數,默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局 ajax事件,ajaxStart或ajaxStop可用於控制各種ajax事件。

【序列化元素】
1、serialize()方法
它能將DOM元素內容序列化為字符串,用於Ajax的請求,解決了表單內容很復雜,再提交表單的時候就會等待整個頁面刷新,使得表單缺乏彈性。

$("#send").click(function(){
          $.get("get1.php",$("#form1").serialize() ,回調函數);
      });

 

2、serializeArray()方法:該方法不是返回字符串,而是將DOM序列化后,返回JSON格式的數據。
3、$.param()方法
它是serialize()方法的核心,用來對一個數組或對象按照key/value進行序列化。例如:

var obj={a:1,b:2,c:3};
var k = $.param(obj);
alert(k);//a=1&b=2&c=3

 

【jQuery中的Ajax全局事件】
jquery簡化ajax操作不僅體現在調用ajax方法和處理響應方面,而且還體現在對ajax請求中http的控制,jquery通過自定義一些全局函數,能夠為各種與ajax相關的事件注冊回調

函數。
【基於jquery的ajax聊天室程序】
當作自行練習,可查閱相關資料。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM