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>"; html += "<h3>" + entry.term + "</h3>"; html += "<div>" + entry.part + "</div>"; html += "<div>"; html += entry.definition; if(entry.quote){ html += '<div>'; $.each(entry.quote, function(lineIndex, line){ html += '<div>' + line + '</div>'; }); if(entry.author){ html += '<div>' + 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>'; html += '<h3>' + $entry.attr('term') + '</h3>'; html += '<div>' + $entry.attr('part') + '</div>'; html += '<div>'; html += $entry.find('definition').text(); var $quote = $entry.find('quote'); if($quote.length) { html += '<div>'; $quote.find('line').each(function(){ html += '<div>'; html += $(this).text() + '</div>'; }); if($quote.attr('author')){ html += '<div>'; 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>"; html += "<h3>" + dataObj.term + "</h3>"; html += "<div>" + dataObj.part + "</div>"; html += "<div>"; html += dataObj.definition; if(dataObj.quote){ html += '<div>'; $.each(dataObj.quote, function(lineIndex, line){ html += '<div>' + line + '</div>'; }); if(dataObj.author){ html += '<div>' + 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; });