jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。（无需特殊说明，均需要有服务器配置，这里本人用的是Tomcat 7）

1.基于请求加载文件数据

这里的请求通常都是网页的某些操作，如点击等。

而其加载数据的类型归类为以下四种：a.加载HTML文件；b.加载JSON文件；c.加载Javascript文件；d.加载XML文件。

其对应的四种加载方法分别是：load、getJSON、getScript、get。

a.加载HTML文件

把编写好的HTML文件加载到网页中。例如：

方法加载html文件 $('#letter-a a').click(function(){ $('#dictionary').load('a.html'); return false; });

这里a.html也是放在服务器端的一个已经编写好的页面文件，直接调用load，就可以让所匹配的目标内载入HTML内容。

b.加载JSON文件

把编写好的JSON文件加载到网页中。例如：

文件 $('#letter-b a').click(function(){ $.getJSON('b.json',function(data){ var html = ''; $.each(data,function(entryIndex,entry){ html += "

"; html += "

" + entry.term + "

"; html += "

" + entry.part + "

"; html += "

"; html += entry.definition; if(entry.quote){ html += '

'; }); if(entry.author){ html += '

'; } } html += "

"; html += "

"; }); $('#dictionary').html(html); }); return false; });

getJSON方法第一个参数是指加载的文件路径，第二个参数是一个加载完成以后的回调函数。通过这个回调函数，就可以对加载好的data进行操作。重复的部分使用each循环处理。最后将拼凑好的html字符串使用html方法加入到目标id=dictionary的元素中。

c.加载Javascript文件

加载Javascript文件和加载HTML文件类似。这里需要注意的是，使用getScript方法加载进来的Javascript会根据当下Javascript环境直接运行。例如：

d.加载XML文件

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

'; html += '

'; }); if($quote.attr('author')){ html += '

'; } html += '

'; html += '

'; $('#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中装配。

代码如下：

方法加载服务器内容 $('#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 += "

"; html += "

" + dataObj.term + "

"; html += "

" + dataObj.part + "

"; html += "

"; html += dataObj.definition; if(dataObj.quote){ html += '

'; }); if(dataObj.author){ html += '

'; } } html += "

"; html += "

"; $('#dictionary').html(html); } else { var $warning = $('

Sorry,your term was not found!

'); $('#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

这个action中的数据本人直接配置了，这里只是做一个示范使用。真正的这些数据在项目中一般是存放在数据库中的。由于这主要是jQuery方面的小示例，就不弄那么麻烦了。

2.Terms.java

这个类纯粹就是一个pojo类。没有什么特别的方法。

3.struts.xml

这个是struts2的json方式传递配置

这里可以看到includeProperties里所配置的外面一层json，success和resultMSG。这在实际中很好用。如果服务器中没有取得需要的值，虽然ajax访问成功，但是获得的结果并不算成功，因为没有取得需要的值。这里加入了success标示，方便前台jQuery操作。

基于其他方法获取服务器数据从写法上与get基本一致，如post方法、load方法。这里就不再赘述了。

3.动态提交表单

通过jQuery的AJAX支持，可以让我们很方便的动态提交表单而不用刷新页面。

如下面例子：

调用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 += "

"; html += "