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基礎教程今天小編就給大家介紹到這里，后續還會持續給大家介紹，希望大家繼續關注武林網網站，有你們的關注我們會做的更好，謝謝！
新聞熱點
疑難解答
