首先，需要下载jquery以及dataTables库。这里使用的是版本是jQuery v1.11.3和DataTables 1.10.9。下载网址：http://datatables.net/。
先上网页的代码。要注意的是，table中的thead和tbody必须要有。
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<head>
<link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">
<title>dataTable example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#datatable").dataTable({
"processing" : true,
"serverSide" : true,
"paginationType":"full_numbers",
"ajax" : "load",
"columns" : [
{"data" : "id"},
{"data" : "firstName"},
{"data" : "lastName"}
]
})
})
</script>
<style>
h2{
text-align:center
}
div {
float: left
margin: 10px
padding: 4px
}
a{
margin:5px
}
table,tr,td,th{
border:2px solid #3aec7b
border-collapse:collapse
}
</style>
</head>
<body>
<TABLE id="datatable">
<THEAD>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</THEAD>
<tbody>
</tbody>
</TABLE>
</body>
</html>
当网页加载的时候，ajax发出请求，如下所示。
[html] view plaincopy
draw=[1]
columns[0][data]=[id]
columns[0][name]=[]
columns[0][searchable]=[true]
columns[0][orderable]=[false]
columns[0][search][value]=[]
columns[0][search][regex]=[false]
columns[1][data]=[firstName]
columns[1][name]=[]
columns[1][searchable]=[true]
columns[1][orderable]=[true]
columns[1][search][value]=[]
columns[1][search][regex]=[false]
columns[2][data]=[lastName]
columns[2][name]=[]
columns[2][searchable]=[true]
columns[2][orderable]=[true]
columns[2][search][value]=[]
columns[2][search][regex]=[false]
order[0][column]=[0]
order[0][dir]=[asc]
start=[0]
length=[10]
search[value]=[]
search[regex]=[false]
_=[1441278114568]
其中，draw是请求的序号，start是数据的偏移量，length是需要返回的最大数据条数。search[value]是查找的值。
服务端采用java的servlet完成。为简单起见，这里直接采用继承HttpServlet的方式实现。数据本应该从数据库中提取，但这里为了
简单，生成了静态数据集合作为数据源。每次请求都从集合中查找匹配的数据，然后转换成JSON返回。JSON库采用阿里的fastjson。
代码如下所示。
[java] view plaincopy
package jspTest
import java.io.IOException
import java.util.ArrayList
import java.util.Arrays
import java.util.Enumeration
import java.util.LinkedList
import java.util.Random
import javax.servlet.ServletException
import javax.servlet.annotation.WebServlet
import javax.servlet.http.HttpServlet
import javax.servlet.http.HttpServletRequest
import javax.servlet.http.HttpServletResponse
import com.alibaba.fastjson.JSON
import com.alibaba.fastjson.JSONObject
import java.util.List
import java.util.Map
/**
* Servlet implementation class DataLoad
*/
public class DataLoad extends HttpServlet {
private static final long serialVersionUID = 1L
static class Person {
private long id
private String firstName
private String lastName
public long getId() {
return id
}
public void setId(long id) {
this.id = id
}
public String getFirstName() {
return firstName
}
public void setFirstName(String firstName) {
this.firstName = firstName
}
public String getLastName() {
return lastName
}
public void setLastName(String lastName) {
this.lastName = lastName
}
public boolean match(String pattern) {
return firstName.contains(pattern) || lastName.contains(pattern) || Long.toString(id).contains(pattern)
}
}
private static Random r = new Random()
private static List<Person>ps = new ArrayList<Person>()
static {
int size = 2512
for (int k = 0k <size++k)
ps.add(generatePerson())
}
static Person generatePerson() {
Person p = new Person()
p.setId(ps.size() + 1)
p.setFirstName(generateName())
p.setLastName(generateName())
return p
}
private static String generateName() {
StringBuilder sb = new StringBuilder()
sb.append((char) (r.nextInt(26) + 'A'))
int len = 2 + r.nextInt(4)
for (int k = 0k <len++k)
sb.append((char) (r.nextInt(26) + 'a'))
return sb.toString()
}
private List<Person>result
public List<Person>getResult(){
return result
}
/**
* @see HttpServlet#HttpServlet()
*/
public DataLoad() {
super()
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int start=0
int length=10
String pattern=""
String draw="1"
Map<String,String[]>params=request.getParameterMap()
for(String attr:params.keySet()){
String[] val=params.get(attr)
System.out.println(attr+"="+Arrays.toString(val))
if(attr.equals("start"))
start=Integer.parseInt(val[0])
if(attr.equals("length"))
length=Integer.parseInt(val[0])
if(attr.equals("search[value]"))
pattern=val[0]
if(attr.equals("draw"))
draw=val[0]
}
int total=filter(start, length, pattern)
JSONObject obj = new JSONObject()
obj.put("draw", draw)
obj.put("recordsTotal", ps.size())
obj.put("recordsFiltered", total)
System.out.println(obj.toJSONString())
obj.put("data", result)
response.getWriter().println(obj.toJSONString())
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response)
}
private int filter(int start,int length,String pattern){
result=new LinkedList<Person>()
int total=0
for(Person s:ps){
if(!s.match(pattern))
continue
++total
if(start-->0)
continue
if(length--<=0)
continue
result.add(s)
}
return total
}
public static void main(String[] rags) {
System.out.println(JSON.toJSONString(ps))
DataLoad load=new DataLoad()
load.filter(0, 10, "")
System.out.println(JSON.toJSONString(load.getResult()))
load.filter(0, 10, "a")
System.out.println(JSON.toJSONString(load.getResult()))
load.filter(10, 10, "a")
System.out.println(JSON.toJSONString(load.getResult()))
load.filter(20, 10, "a")
System.out.println(JSON.toJSONString(load.getResult()))
}
}
服务端返回的JSON数据如下所示。其中draw是请求中的draw参数，data是表格中的数据。recordsFiltered是过滤后的数据总数，recordsTotal是原始数据总数。
[html] view plaincopy
{"recordsFiltered":2512,
"data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],
"draw":"1",
"recordsTotal":2512}
术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：
BackPack
Google Suggest
Google Maps
PalmSphere
所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。
定义Ajax
Adaptive Path公司的Jesse James Garrett这样定义Ajax：
Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。
Ajax可用于那些场景？——一个例子：MSN Money页面
前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。
而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。
让我们利用Ajax实现自己的基本投票系统。
原始的Ajax：直接使用XmlHttpRequest
如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到http://localhost:7001/ajax-demo/raw-ajax.html，
浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。
首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。 function castVote(rank) {
var url = "/ajax-demo/static-article-ranking.html"
var callback = processAjaxResponse
executeXhr(callback, url)
}
该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。
下一步是发出一个XmlHttpRequest请求： function executeXhr(callback, url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest()
req.onreadystatechange = callback
req.open("GET", url, true)
req.send(null)
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP")
if (req) {
req.onreadystatechange = callback
req.open("GET", url, true)
req.send()
}
}
}
如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。
executeXhr()方法中最关键的部分是这两行：
req.onreadystatechange = callback
req.open("GET", url, true)
第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。 function processAjaxResponse() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
502 502'votes').innerHTML = req.responseText
} else {
alert("There was a problem retrieving the XML data:
" +
req.statusText)
}
}
}
该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列举了常用的XmlHttpRequest对象属性。
属性
描述
onreadystatechange
每次状态改变所触发事件的事件处理程序
readyState
对象状态值：
0 = 未初始化（uninitialized）
1 = 正在加载（loading）
2 = 加载完毕（loaded）
3 = 交互（interactive）
4 = 完成（complete）
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数据对象
status
从服务器返回的数字代码，比如404（未找到）或200（就绪）
statusText
伴随状态码的字符串信息
现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。
既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。
Ajax: DWR方式
按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。
假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。
现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到http://localhost:7001/ajax_demo/dwr-ajax.html来运行程序。
可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。
引入DWR
如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。
设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。
DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。
加载jquery<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function () {
$('#kaiguan').click(function () {
$.ajax({
url: "make.php",
type: "POST",
cache: false,
data: "{\"id\":\""+$(this).attr('id')+"\"}",
contentType: "application/x-www-form-urlencoded",
success: function (data) {
//data为返回的数据
}
})
})
})
</script>
页面上：<input type="button" id="kaiguan" value="开关" />
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）