Ajax是一步的javaScript，是基于javascript实现的功能，会有更好的用户体验，比如无业面刷新技术根据查询的结果集动态的构造网页元素。

1.原生的Ajax

Ajax技术最核心的Javascript对象是XMLHttpRequest，它提供了对Http请求的能力，并且它可以在无刷新的情况下去请求并接收资源，目前几乎所有浏览器都支持这个对象。在请求某个url之前，需要绑定请求处理后触发的事件：

var xmlhttpRequest=new XMLHttpRequest();xmlhttpRequest.onreadystatechange=function(){ if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){ document.getElementById("content").value=xmlhttpRequest.responseText; } }其中readyState=4表示Http响应已经完全接收，status是状态码，200表示成功，当两个条件都满足时，就可以接收服务器返回的数据。当然，没有使用XMLHttpRequest()去请求是不会触发这个函数的，请求的代码是：

xmlhttpRequest.open("GET","<%=path%>/txt/ajaxtest.txt",true);xmlhttpRequest.send();

括号中：GET表示get的请求方式，后面表示的是一个文本文档的路径（在我的ajax的第一篇博文中已经讲过了）。

这里是直接请求的文本文档，假如请求服务器上的某个action，那么action中应该使用response对象给客户端写数据：

Writer writer=response.getWriter();writer.write("iserror");writer.flush();writer.close();

2.动态增加Table

首先需要建立一个web工程，然后导入需要的工具包：fastjson-1.1.23.jar

建立一个servlet取名为：AjaxTable，我们下面会用GET请求，所以在get方法中邪如下代码：

response.setContentType("text/html;charset=utf-8");List<User> userlist=new ArrayList<User>();for(int i=0;i<10;i++){ User user=new User(); user.setUsername("小明"); user.setPassword(i%2+""); userlist.add(user);}String json=JSON.toJSONString(userlist);PrintWriter pw=response.getWriter();pw.println(json);pw.flush();pw.close();

代码最上面一行为了防止有乱码。

这一句：String json=JSON.toJSONString(userlist);的JSON对象时我们上面导入的工具包中的内容。

建立一个jsp取名为：AjaxTable.jsp，在使用之前我们需要导入javascript的一个包，包名是：jquery-1.7.1.js

完整代码如下：

<html> <head> <title>动态增加Table</title> <script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.js"></script> <script type="text/javascript"> function createTable(){ $.ajax({ url:"<%=path%>/servlet/JsonTableAjax", dataType:"json", type:"get", success:function(results){ var tableStr="<table border='1'><tr><td>姓名</td><td>年龄</td></tr>"; for(var i=0;i<results.length;i++){ var p=results[i];tableStr=tableStr+"<tr><td>"+p.username+"</td><td>"+p.password+"</td></tr>"; } tableStr=tableStr+"</table>"; $("#tableid").html(tableStr); } }); } </script> </head> <body> <input type="button" value="创建table" <div id="tableid"></div> </body></html>

url表示跳转的servlet的路径，在web.xml里面找；dataType是数据类型，servlet使用json去接收的；type是请求方式，用的是get。

$("#tableid").html(tableStr);是使用的javascript的框架Jquery的元素选择器。

最后在input里加一个onclick事件。