這篇文章主要介紹了Jquery ajax基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下

jQuery的Ajax帶來了無需刷新的web頁面革命。這里就詳細(xì)介紹一下jQuery所涉及到的Ajax操作。(無需特殊說明，均需要有服務(wù)器配置，這里本人用的是Tomcat 7)

1.基于請(qǐng)求加載文件數(shù)據(jù)

這里的請(qǐng)求通常都是網(wǎng)頁的某些操作，如點(diǎn)擊等。

而其加載數(shù)據(jù)的類型歸類為以下四種：a.加載HTML文件;b.加載JSON文件;c.加載Javascript文件;d.加載XML文件。

其對(duì)應(yīng)的四種加載方法分別是：load、getJSON、getScript、get。

a.加載HTML文件

把編寫好的HTML文件加載到網(wǎng)頁中。例如：

1. //load方法加載html文件  
2. $('#letter-a a').click(function(){  
3. $('#dictionary').load('a.html');  
4. return false;  
5. }); 

這里a.html也是放在服務(wù)器端的一個(gè)已經(jīng)編寫好的頁面文件，直接調(diào)用load，就可以讓所匹配的目標(biāo)內(nèi)載入HTML內(nèi)容。

b.加載JSON文件

把編寫好的JSON文件加載到網(wǎng)頁中。例如：

1. //加載json文件  
2. $('#letter-b a').click(function(){  
3. $.getJSON('b.json',function(data){  
4. var html = '';  
5. $.each(data,function(entryIndex, entry){  
6. html += "<div class='entry'>";  
7. html += "<h3 class='term'>" + entry.term + "</h3>";  
8. html += "<div class='part'>" + entry.part + "</div>";  
9. html += "<div class='definition'>";  
10. html += entry.definition;  
11. if(entry.quote){  
12. html += '<div class="quote">';  
13. $.each(entry.quote, function(lineIndex, line){  
14. html += '<div class="quote-line">' + line + '</div>';  
15. });  
16. if(entry.author){  
17. html += '<div class="quote-author">' + entry.author + '</div>';  
18. }  
19. }  
20. html += "</div>";  
21. html += "</div>";  
22. });  
23. $('#dictionary').html(html);  
24. });  
25. return false;  
26. }); 

getJSON方法第一個(gè)參數(shù)是指加載的文件路徑，第二個(gè)參數(shù)是一個(gè)加載完成以后的回調(diào)函數(shù)。通過這個(gè)回調(diào)函數(shù)，就可以對(duì)加載好的data進(jìn)行操作。重復(fù)的部分使用each循環(huán)處理。最后將拼湊好的html字符串使用html方法加入到目標(biāo)id=dictionary的元素中。

c.加載Javascript文件

加載Javascript文件和加載HTML文件類似。這里需要注意的是，使用getScript方法加載進(jìn)來的Javascript會(huì)根據(jù)當(dāng)下Javascript環(huán)境直接運(yùn)行。例如：

1. //執(zhí)行腳本  
2. $('#letter-c a').click(function(){  
3. $.getScript('c.js');  
4. return false;  
5. }); 

d.加載XML文件

jQuery中可以使用get方法加載XML文件。例如：

1. //加載XML文檔  
2. $('#letter-d a').click(function(){  
3. $.get('d.xml',function(data){  
4. $('#dictionary').empty();  
5. $(data).find('entry').each(function(){  
6. var $entry = $(this);  
7. var html = '<div class="entry">';  
8. html += '<h3 class="term">' + $entry.attr('term') + '</h3>';  
9. html += '<div class="part">' + $entry.attr('part') + '</div>';  
10. html += '<div class="definition">';  
11. html += $entry.find('definition').text();  
12. var $quote = $entry.find('quote');  
13. if($quote.length)  
14. {  
15. html += '<div class="quote">';  
16. $quote.find('line').each(function(){  
17. html += '<div class="quote-line">';  
18. html += $(this).text() + '</div>';  
19. });  
20. if($quote.attr('author')){  
21. html += '<div class="quote-author">';  
22. html += $quote.attr('author') + '</div>';  
23. }  
24. html += '</div>';  
25. }  
26. html += '</div>';  
27. html += '</div>';  
28. $('#dictionary').append($(html));  
29. });  
30. });  
31. return false;  
32. }); 

XML文件有一個(gè)特點(diǎn)就是，你可以像用jQuery操作HTML那樣操作XML的那些元素。如使用attr方法、text方法等等。

2.基于Get方法向服務(wù)器獲取數(shù)據(jù)

之前的例子都是從服務(wù)器上靜態(tài)的獲取數(shù)據(jù)文件。而Ajax的價(jià)值不只于此，通過get方法從服務(wù)器動(dòng)態(tài)的獲取數(shù)據(jù)，為web頁面無刷新的實(shí)現(xiàn)提供了莫大的幫助。

下面就使用get方法從服務(wù)器獲取一段所需要的數(shù)據(jù)。這里，本人結(jié)合J2EE的Struts2框架和TOMCAT搭建的服務(wù)器端。具體服務(wù)器端多種多樣，可以是php+apache或者其他什么的都可以。

操作如下，用戶點(diǎn)擊Eavesdrop則發(fā)送get方法到服務(wù)器，取得Eavesdrop的數(shù)據(jù)，并且返回json值，然后在jQuery中裝配。

代碼如下：

1. //GET方法加載服務(wù)器內(nèi)容  
2. $('#letter-e a').click(function(){  
3. var requestData = {term:$(this).text().toUpperCase()};  
4. $.get('EGet.action', requestData, function(data){  
5. //返回的數(shù)據(jù)包結(jié)構(gòu)根據(jù)Struts2配置如下：  
6. //{"resultMSG":"{ 內(nèi)部另一個(gè)json結(jié)構(gòu) }","success":"true"}  
7. //先將返回的數(shù)據(jù)包拆包  
8. var responseObj = eval("("+data+")");  
9. if(responseObj.success == 'true')  
10. {  
11. $('#dictionary').empty();  
12. //返回成功，接下來再次解包resultMSG  
13. var dataObj = eval("("+responseObj.resultMSG+")");  
14. var html = "";  
15. html += "<div class='entry'>";  
16. html += "<h3 class='term'>" + dataObj.term + "</h3>";  
17. html += "<div class='part'>" + dataObj.part + "</div>";  
18. html += "<div class='definition'>";  
19. html += dataObj.definition;  
20. if(dataObj.quote){  
21. html += '<div class="quote">';  
22. $.each(dataObj.quote, function(lineIndex, line){  
23. html += '<div class="quote-line">' + line + '</div>';  
24. });  
25. if(dataObj.author){  
26. html += '<div class="quote-author">' + dataObj.author + '</div>';  
27. }  
28. }  
29. html += "</div>";  
30. html += "</div>";  
31. $('#dictionary').html(html);  
32. }  
33. else 
34. {  
35. var $warning = $('<div>Sorry, your term was not found!</div>');  
36. $('#dictionary').html($warning);  
37. }  
38. });  
39. return false;  
40. }); 

這里要說明的是由于struts2配置，返回的時(shí)候在需要的數(shù)據(jù)外又打了一層包，用于表示結(jié)果內(nèi)容的resultMSG和是否ajax訪問成功的success字段。所以使用了2次eval解包。

這里我后臺(tái)java程序傳遞過來的并非配置好的HTML，而是僅僅是json類型的數(shù)據(jù)，本人認(rèn)為在java層面編寫html并傳遞不如直接傳遞數(shù)據(jù)方便，以后修改樣式或者頁面結(jié)構(gòu)也都不如直接修改javascript方便。

通過get方法獲得服務(wù)器數(shù)據(jù)，相當(dāng)于向服務(wù)器提交如下這種請(qǐng)求：EGet.action?term=XXX

下面放出java后臺(tái)文件代碼：

1.EGet.java

1. package lhb;  
2. import com.opensymphony.xwork2.ActionSupport;  
3. public class EGet extends ActionSupport  
4. {  
5. private String term;  
6. private Terms sampleTerm;  
7. private String success;  
8. private String resultMSG;  
9. /**  
10. *  
11. */ 
12. private static final long serialVersionUID = 1L;  
13. public String execute() throws Exception  
14. {  
15. initData();  
16. if(term.equals(sampleTerm.getTerm()))  
17. {  
18. success = "true";  
19. resultMSG = "{/"term/": /""+sampleTerm.getTerm()+"/","+  
20. "/"part/": /""+sampleTerm.getPart()+"/","+  
21. "/"definition/": /""+sampleTerm.getDefinition()+"/","+  
22. "/"quote/": ["+  
23. "/"Is public worship, then, a sin,/","+  
24. "/"That for devotions paid to Bacchus/","+  
25. "/"The lictors dare to run us in,/","+  
26. "/"And resolutely thump and whack us?/""+  
27. "],"+  
28. "/"author/": /""+sampleTerm.getAuthor()+"/"}";  
29. }  
30. else{  
31. success = "false";  
32. resultMSG = "fail";  
33. }  
34. return SUCCESS;  
35. }  
36. //初始化數(shù)據(jù)  
37. private void initData()  
38. {  
39. String partEAVESDROP = "v.i.";  
40. String definitionEAVESDROP = "Secretly to overhear a catalogue of the crimes and vices of another or yourself.";  
41. String quoteEAVESDROP[] = {"A lady with one of her ears applied",  
42. "To an open keyhole heard, inside,",  
43. "Two female gossips in converse free —",  
44. "The subject engaging them was she.",  
45. "/"I think,/" said one, /"and my husband thinks",  
46. "That she's a prying, inquisitive minx!/"",  
47. "As soon as no more of it she could hear",  
48. "The lady, indignant, removed her ear.",  
49. "/"I will not stay,/" she said, with a pout,",  
50. "/"To hear my character lied about!/""};  
51. String authorEAVESDROP = "Gopete Sherany";  
52. Terms EAVESDROP = new Terms();  
53. EAVESDROP.setTerm("EAVESDROP");  
54. EAVESDROP.setPart(partEAVESDROP);  
55. EAVESDROP.setDefinition(definitionEAVESDROP);  
56. EAVESDROP.setQuote(quoteEAVESDROP);  
57. EAVESDROP.setAuthor(authorEAVESDROP);  
58. sampleTerm = EAVESDROP;  
59. }  
60. public String getTerm()  
61. {  
62. return term;  
63. }  
64. public void setTerm(String term)  
65. {  
66. this.term = term;  
67. }  
68. public String getSuccess()  
69. {  
70. return success;  
71. }  
72. public void setSuccess(String success)  
73. {  
74. this.success = success;  
75. }  
76. public String getResultMSG()  
77. {  
78. return resultMSG;  
79. }  
80. public void setResultMSG(String resultMSG)  
81. {  
82. this.resultMSG = resultMSG;  
83. }  
84. } 

這個(gè)action中的數(shù)據(jù)本人直接配置了，這里只是做一個(gè)示范使用。真正的這些數(shù)據(jù)在項(xiàng)目中一般是存放在數(shù)據(jù)庫中的。由于這主要是jQuery方面的小示例，就不弄那么麻煩了。

2.Terms.java

1. package lhb;  
2. public class Terms  
3. {  
4. private String term;  
5. private String part;  
6. private String definition;  
7. private String quote[];  
8. private String author;  
9. public String getTerm()  
10. {  
11. return term;  
12. }  
13. public void setTerm(String term)  
14. {  
15. this.term = term;  
16. }  
17. public String getPart()  
18. {  
19. return part;  
20. }  
21. public void setPart(String part)  
22. {  
23. this.part = part;  
24. }  
25. public String getDefinition()  
26. {  
27. return definition;  
28. }  
29. public void setDefinition(String definition)  
30. {  
31. this.definition = definition;  
32. }  
33. public String[] getQuote()  
34. {  
35. return quote;  
36. }  
37. public void setQuote(String[] quote)  
38. {  
39. this.quote = quote;  
40. }  
41. public String getAuthor()  
42. {  
43. return author;  
44. }  
45. public void setAuthor(String author)  
46. {  
47. this.author = author;  
48. }  
49. } 

這個(gè)類純粹就是一個(gè)pojo類。沒有什么特別的方法。

3.struts.xml

這個(gè)是struts2的json方式傳遞配置

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE struts PUBLIC  
3. "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" 
4. "http://struts.apache.org/dtds/struts-2.3.dtd">  
5. <struts>  
6. <!-- 指定全局國際化資源文件 -->  
7. <constant name="struts.custom.i18n.resources" value="i18n"/>  
8. <!-- 指定國際化編碼所使用的字符集 -->  
9. <constant name="struts.i18n.encoding" value="GBK"/>  
10. <!-- JSON的action -->  
11. <package name="jsonInfo" extends="json-default">  
12. <action name="EGet" class="lhb.EGet">  
13. <result type="json">  
14. <param name="contentType">text/html</param>  
15. <param name="includeProperties">success, resultMSG</param>  
16. </result>  
17. </action>  
18. </package>  
19. </struts> 

這里可以看到includeProperties里所配置的外面一層json，success和resultMSG。這在實(shí)際中很好用。如果服務(wù)器中沒有取得需要的值，雖然ajax訪問成功，但是獲得的結(jié)果并不算成功，因?yàn)闆]有取得需要的值。這里加入了success標(biāo)示，方便前臺(tái)jQuery操作。

基于其他方法獲取服務(wù)器數(shù)據(jù)從寫法上與get基本一致，如post方法、load方法。這里就不再贅述了。

3.動(dòng)態(tài)提交表單

通過jQuery的AJAX支持，可以讓我們很方便的動(dòng)態(tài)提交表單而不用刷新頁面。

如下面例子：

1. $('#letter-f form').submit(function(){  
2. //調(diào)用preventDefault方法阻止事件冒泡，具體工作就是如果網(wǎng)頁有腳本錯(cuò)誤，那么則會(huì)阻止提交form表單  
3. event.preventDefault();  
4. var formValues = $('input[id="term"]').val();  
5. var requestStr = {'term':formValues.toUpperCase()};  
6. $.get('EGet.action', requestStr, function(data){  
7. var responseObj = $.parseJSON(data);  
8. if(responseObj.success == 'true')  
9. {  
10. var html = '';  
11. var dataObj = $.parseJSON(responseObj.resultMSG);  
12. html += "<div class='entry'>";  
13. html += "<h3 class='term'>" + dataObj.term + "</h3>";  
14. html += "<div class='part'>" + dataObj.part + "</div>";  
15. html += "<div class='definition'>";  
16. html += dataObj.definition;  
17. if(dataObj.quote){  
18. html += '<div class="quote">';  
19. $.each(dataObj.quote, function(lineIndex, line){  
20. html += '<div class="quote-line">' + line + '</div>';  
21. });  
22. if(dataObj.author){  
23. html += '<div class="quote-author">' + dataObj.author + '</div>';  
24. }  
25. }  
26. html += "</div>";  
27. html += "</div>";  
28. $('#dictionary').html(html);  
29. }  
30. else{  
31. var warning = $('Sorry, your term was not found!');  
32. $('#dictionary').html(warning);  
33. }  
34. });  
35. }); 

這個(gè)例子援引的數(shù)據(jù)還是上一個(gè)EGet.action所用的那個(gè)數(shù)據(jù)。程序的操作過程基本是：

首先調(diào)用這個(gè) preventDefault();這個(gè)方法在注釋里也說明了，用于阻止事件冒泡帶來的不便與麻煩。

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

這里也可以使用serialize方法將input元素序列化成如下格式“term=xxx”這樣。不過由于服務(wù)器端的java程序中的那些數(shù)據(jù)時(shí)硬編碼的，所有，不是太方便用，就沒用。

4.關(guān)于Ajax的觀察員函數(shù)

jQuery包含了2個(gè)全局的ajax觀察員函數(shù)：ajaxStart和ajaxStop。

分別在執(zhí)行ajax操作的起始和結(jié)束時(shí)調(diào)用。例如：

1. //ajax的觀察員函數(shù) ajaxStart 和 ajaxStop  
2. $('<div id="loading">Loading...</div>').insertBefore('#dictionary')  
3. .ajaxStart(function(){  
4. $(this).show();  
5. }).ajaxStop(function(){  
6. $(this).hide();  
7. }); 

這里無論哪個(gè)a標(biāo)簽觸發(fā)ajax操作，包括靜態(tài)載入文件和動(dòng)態(tài)服務(wù)器訪問，都會(huì)觸發(fā)ajaxStart和ajaxStop。

關(guān)于錯(cuò)誤處理，常用的三個(gè)函數(shù)：success、complete、error。

下面以error為例：

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

可以以連綴的寫法將error方法放置于get方法之后：“$.get().error()”這樣。

剛才看了一下，這個(gè)可以將Tomcat的報(bào)錯(cuò)，加載到頁面之上。這在有的時(shí)候還是很有用的。如圖：

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

5.Ajax和事件

Ajax動(dòng)態(tài)訪問服務(wù)器以后生成的元素，如果想綁定事件的話，一種方法是每次取到都重新綁定處理程序，這種相對(duì)來說比較簡單，但是不適合DOM結(jié)構(gòu)經(jīng)常變化的場景。如果DOM結(jié)構(gòu)經(jīng)常變化，那么就需要用live方法，實(shí)現(xiàn)事件委托。

live用法與bind一樣。

關(guān)于jquery ajax基礎(chǔ)教程今天小編就給大家介紹到這里，后續(xù)還會(huì)持續(xù)給大家介紹，希望大家繼續(xù)關(guān)注腳本之家網(wǎng)站，有你們的關(guān)注我們會(huì)做的更好，謝謝!