Jquery ajax基础教程

2024-09-01 08:33:04

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了Jquery ajax基础教程的相关资料,需要的朋友可以参考下

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"/>



<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();

});