Jquery ajax基礎教程_jquery

jQuery的Ajax帶來了無需重新整理的web頁面革命。這裡就詳細介紹一下jQuery所涉及到的Ajax操作。（無需特殊說明，均需要有伺服器配置，這裡本人用的是Tomcat 7）

1.基於請求負載檔案資料

這裡的請求通常都是網頁的某些操作，如點擊等。

而其載入資料的類型歸類為以下四種：a.載入HTML檔案；b.載入JSON檔案；c.載入Javascript檔案；d.載入XML檔案。

其對應的四種載入方法分別是：load、getJSON、getScript、get。

a.載入HTML檔案

把編寫好的HTML檔案載入到網頁中。例如：

//load方法載入html檔案 $('#letter-a a').click(function(){     $('#dictionary').load('a.html');     return false; });

這裡a.html也是放在伺服器端的一個已經編寫好的分頁檔，直接調用load，就可以讓所匹配的目標內載入HTML內容。

b.載入JSON檔案

把編寫好的JSON檔案載入到網頁中。例如：

//載入json檔案 $('#letter-b a').click(function(){   $.getJSON('b.json',function(data){     var html = '';     $.each(data,function(entryIndex, entry){       html += "<div class='entry'>";       html += "<h3 class='term'>" + entry.term + "</h3>";       html += "<div class='part'>" + entry.part + "</div>";       html += "<div class='definition'>";       html += entry.definition;       if(entry.quote){         html += '<div class="quote">';         $.each(entry.quote, function(lineIndex, line){           html += '<div class="quote-line">' + line + '</div>';         });         if(entry.author){           html += '<div class="quote-author">' + entry.author + '</div>';         }       }       html += "</div>";       html += "</div>";     });     $('#dictionary').html(html);   });   return false;  }); 

getJSON方法第一個參數是指載入的檔案路徑，第二個參數是一個載入完成以後的回呼函數。通過這個回呼函數，就可以對載入好的data進行操作。重複的部分使用each迴圈處理。最後將拼湊好的html字串使用html方法加入到目標id=dictionary的元素中。

c.載入Javascript檔案

載入Javascript檔案和載入HTML檔案類似。這裡需要注意的是，使用getScript方法載入進來的Javascript會根據當下Javascript環境直接運行。例如：

//執行指令碼 $('#letter-c a').click(function(){     $.getScript('c.js');     return false; }); 

d.載入XML檔案

jQuery中可以使用get方法載入XML檔案。例如：

//載入XML文檔 $('#letter-d a').click(function(){     $.get('d.xml',function(data){       $('#dictionary').empty();       $(data).find('entry').each(function(){         var $entry = $(this);         var html = '<div class="entry">';         html += '<h3 class="term">' + $entry.attr('term') + '</h3>';         html += '<div class="part">' + $entry.attr('part') + '</div>';         html += '<div class="definition">';         html += $entry.find('definition').text();         var $quote = $entry.find('quote');         if($quote.length)         {           html += '<div class="quote">';           $quote.find('line').each(function(){             html += '<div class="quote-line">';             html += $(this).text() + '</div>';           });           if($quote.attr('author')){             html += '<div class="quote-author">';             html += $quote.attr('author') + '</div>';           }           html += '</div>';         }         html += '</div>';         html += '</div>';         $('#dictionary').append($(html));       });     });     return false; }); 

XML檔案有一個特點就是，你可以像用jQuery操作HTML那樣操作XML的那些元素。如使用attr方法、text方法等等。

2.基於Get方法向伺服器擷取資料

之前的例子都是從伺服器上靜態擷取資料檔案。而Ajax的價值不只於此，通過get方法從伺服器動態擷取資料，為web頁面無重新整理的實現提供了莫大的協助。

下面就使用get方法從伺服器擷取一段所需要的資料。這裡，本人結合J2EE的Struts2架構和TOMCAT搭建的伺服器端。具體伺服器端多種多樣，可以是php+apache或者其他什麼的都可以。

操作如下，使用者點擊Eavesdrop則發送get方法到伺服器，取得Eavesdrop的資料，並且返回json值，然後在jQuery中裝配。

代碼如下：

//GET方法載入伺服器內容 $('#letter-e a').click(function(){     var requestData = {term:$(this).text().toUpperCase()};     $.get('EGet.action', requestData, function(data){             //返回的資料包結構根據Struts2配置如下：       //{"resultMSG":"{ 內部另一個json結構 }","success":"true"}       //先將返回的資料包拆包       var responseObj = eval("("+data+")");       if(responseObj.success == 'true')       {         $('#dictionary').empty();         //返回成功，接下來再次解包resultMSG         var dataObj = eval("("+responseObj.resultMSG+")");         var html = "";         html += "<div class='entry'>";         html += "<h3 class='term'>" + dataObj.term + "</h3>";         html += "<div class='part'>" + dataObj.part + "</div>";         html += "<div class='definition'>";         html += dataObj.definition;         if(dataObj.quote){           html += '<div class="quote">';           $.each(dataObj.quote, function(lineIndex, line){             html += '<div class="quote-line">' + line + '</div>';           });           if(dataObj.author){             html += '<div class="quote-author">' + dataObj.author + '</div>';           }         }         html += "</div>";         html += "</div>";         $('#dictionary').html(html);       }       else       {         var $warning = $('<div>Sorry, your term was not found!</div>');         $('#dictionary').html($warning);       }     });     return false; }); 

這裡要說明的是由於struts2配置，返回的時候在需要的資料外又打了一層包，用於表示結果內容的resultMSG和是否ajax訪問成功的success欄位。所以使用了2次eval解包。

這裡我後台java程式傳遞過來的並非配置好的HTML，而是僅僅是json類型的資料，本人認為在java層面編寫html並傳遞不如直接傳遞資料方便，以後修改樣式或者頁面結構也都不如直接修改javascript方便。

通過get方法獲得伺服器資料，相當於向伺服器提交如下這種請求：EGet.action?term=XXX

下面放出java後台檔案代碼：

1.EGet.java

package lhb; import com.opensymphony.xwork2.ActionSupport; public class EGet extends ActionSupport {   private String term;   private Terms sampleTerm;   private String success;   private String resultMSG;   /**    *    */   private static final long serialVersionUID = 1L;   public String execute() throws Exception   {     initData();     if(term.equals(sampleTerm.getTerm()))     {       success = "true";       resultMSG = "{\"term\": \""+sampleTerm.getTerm()+"\","+           "\"part\": \""+sampleTerm.getPart()+"\","+           "\"definition\": \""+sampleTerm.getDefinition()+"\","+           "\"quote\": ["+           "\"Is public worship, then, a sin,\","+           "\"That for devotions paid to Bacchus\","+           "\"The lictors dare to run us in,\","+           "\"And resolutely thump and whack us?\""+           "],"+           "\"author\": \""+sampleTerm.getAuthor()+"\"}";     }     else{       success = "false";       resultMSG = "fail";     }     return SUCCESS;   }   //初始化資料   private void initData()   {     String partEAVESDROP = "v.i.";     String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself.";     String quoteEAVESDROP[] = {"A lady with one of her ears applied",         "To an open keyhole heard, inside,",         "Two female gossips in converse free —",         "The subject engaging them was she.",         "\"I think,\" said one, \"and my husband thinks",         "That she's a prying, inquisitive minx!\"",         "As soon as no more of it she could hear",         "The lady, indignant, removed her ear.",         "\"I will not stay,\" she said, with a pout,",         "\"To hear my character lied about!\""};     String authorEAVESDROP = "Gopete Sherany";     Terms EAVESDROP = new Terms();     EAVESDROP.setTerm("EAVESDROP");     EAVESDROP.setPart(partEAVESDROP);     EAVESDROP.setDefinition(definitionEAVESDROP);     EAVESDROP.setQuote(quoteEAVESDROP);     EAVESDROP.setAuthor(authorEAVESDROP);     sampleTerm = EAVESDROP;   }   public String getTerm()   {     return term;   }   public void setTerm(String term)   {     this.term = term;   }   public String getSuccess()   {     return success;   }   public void setSuccess(String success)   {     this.success = success;   }   public String getResultMSG()   {     return resultMSG;   }   public void setResultMSG(String resultMSG)   {     this.resultMSG = resultMSG;   } } 

這個action中的資料本人直接配置了，這裡只是做一個示範使用。真正的這些資料在項目中一般是存放在資料庫中的。由於這主要是jQuery方面的小樣本，就不弄那麼麻煩了。

2.Terms.java

package lhb; public class Terms {   private String term;   private String part;   private String definition;   private String quote[];   private String author;   public String getTerm()   {     return term;   }   public void setTerm(String term)   {     this.term = term;   }   public String getPart()   {     return part;   }   public void setPart(String part)   {     this.part = part;   }   public String getDefinition()   {     return definition;   }   public void setDefinition(String definition)   {     this.definition = definition;   }   public String[] getQuote()   {     return quote;   }   public void setQuote(String[] quote)   {     this.quote = quote;   }   public String getAuthor()   {     return author;   }   public void setAuthor(String author)   {     this.author = author;   } } 

這個類純粹就是一個pojo類。沒有什麼特別的方法。

3.struts.xml

這個是struts2的json方式傳遞配置

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC   "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"   "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts>   <!-- 指定全域國際化資源檔 -->   <constant name="struts.custom.i18n.resources" value="i18n"/>   <!-- 指定國際化編碼所使用的字元集 -->   <constant name="struts.i18n.encoding" value="GBK"/>   <!-- JSON的action -->   <package name="jsonInfo" extends="json-default">     <action name="EGet" class="lhb.EGet">       <result type="json">         <param name="contentType">text/html</param>         <param name="includeProperties">success, resultMSG</param>       </result>     </action>   </package> </struts> 

這裡可以看到includeProperties裡所配置的外面一層json，success和resultMSG。這在實際中很好用。如果伺服器中沒有取得需要的值，雖然ajax訪問成功，但是獲得的結果並不算成功，因為沒有取得需要的值。這裡加入了success標示，方便前台jQuery操作。

基於其他方法擷取伺服器資料從寫法上與get基本一致，如post方法、load方法。這裡就不再贅述了。

3.動態提交表單

通過jQuery的AJAX支援，可以讓我們很方便的動態提交表單而不用重新整理頁面。

如下面例子：

$('#letter-f form').submit(function(){     //調用preventDefault方法阻止事件冒泡，具體工作就是如果網頁有指令碼錯誤，那麼則會阻止提交form表單     event.preventDefault();     var formValues = $('input[id="term"]').val();     var requestStr = {'term':formValues.toUpperCase()};     $.get('EGet.action', requestStr, function(data){       var responseObj = $.parseJSON(data);       if(responseObj.success == 'true')       {         var html = '';         var dataObj = $.parseJSON(responseObj.resultMSG);         html += "<div class='entry'>";         html += "<h3 class='term'>" + dataObj.term + "</h3>";         html += "<div class='part'>" + dataObj.part + "</div>";         html += "<div class='definition'>";         html += dataObj.definition;         if(dataObj.quote){           html += '<div class="quote">';           $.each(dataObj.quote, function(lineIndex, line){             html += '<div class="quote-line">' + line + '</div>';           });           if(dataObj.author){             html += '<div class="quote-author">' + dataObj.author + '</div>';           }         }         html += "</div>";         html += "</div>";         $('#dictionary').html(html);       }       else{         var warning = $('Sorry, your term was not found!');         $('#dictionary').html(warning);       }     }); }); 

這個例子援引的資料還是上一個EGet.action所用的那個資料。程式的操作過程基本是：

首先調用這個 preventDefault();這個方法在注釋裡也說明了，用於阻止事件冒泡帶來的不便與麻煩。

接下來通過$()獲得input的元素，使用val方法獲得其值，接下來的使用方法與上例基本相同。

這裡也可以使用serialize方法將input元素序列化成如下格式“term=xxx”這樣。不過由於伺服器端的java程式中的那些資料時硬式編碼，所有，不是太方便用，就沒用。

4.關於Ajax的觀察員函數

jQuery包含了2個全域的ajax觀察員函數：ajaxStart和ajaxStop。

分別在執行ajax操作的起始和結束時調用。例如：

//ajax的觀察員函數 ajaxStart 和 ajaxStop   $('<div id="loading">Loading...</div>').insertBefore('#dictionary')     .ajaxStart(function(){       $(this).show();     }).ajaxStop(function(){       $(this).hide();     }); 

這裡無論哪個a標籤觸發ajax操作，包括靜態載入檔案和動態伺服器訪問，都會觸發ajaxStart和ajaxStop。
關於錯誤處理，常用的三個函數：success、complete、error。

下面以error為例：

.error(function(jqXHR){   $('#dictionary').html('An Error occurred:'+ jqXHR.status).append(jqXHR.responseText); }); 

可以以連綴的寫法將error方法放置於get方法之後：“$.get().error()”這樣。
剛才看了一下，這個可以將Tomcat的報錯，載入到頁面之上。這在有的時候還是很有用的。如圖：

不過不知道為何這個將我原有樣式也覆蓋了一些，如果有哪位網友知道，麻煩指正一下問題所在。謝謝了。

5.Ajax和事件

Ajax動態訪問伺服器以後產生的元素，如果想綁定事件的話，一種方法是每次取到都重新綁定處理常式，這種相對來說比較簡單，但是不適合DOM結構經常變化的情境。如果DOM結構經常變化，那麼就需要用live方法，實現事件委託。

live用法與bind一樣。

關於jquery ajax基礎教程今天小編就給大家介紹到這裡，後續還會持續給大家介紹，希望大家繼續關注云棲社區網站，有你們的關注我們會做的更好，謝謝！