jQuery + Servlet 简单实现AJAX
jQuery + Servlet 简单实现AJAX[size=16px]通常我们需要在页面不刷新的情况下进行server side数据校验，或者从server side获取数据，那么我们就需要使用到AJAX。
下面是一个简单的功能，实现点击按钮 返回服务器时间
jquery-1.2.2.pack.js可以在网上获取
web.xml
-----------------------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee [url=http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd][color=#2b76b0]http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd[/color][/url]">
<display-name>
Test</display-name>
<servlet>
<description>
</description>
<display-name>
Ajax</display-name>
<servlet-name>Ajax</servlet-name>
<servlet-class>
Ajax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Ajax</servlet-name>
<url-pattern>/Ajax</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
--------------------------------------------------------
index.jsp
---------------------------------------
<%@ page language="java" c
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" c>
<title>Test</title>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
</head>
<body>
<input type="button" value="12" >
<div id="presidents"></div>
<script type="text/javascript">
function onInvokeAction(){
$.post('/Ajax', {
text: 'my string',
number: 23
}, function(data) {
$('#presidents').html(data);
});
}
</script>
</body>
</html>
--------------------------------------------------------------
Ajax.java
-----------------------------------------------------
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class for Servlet: Ajax
*
*/
public class Ajax extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println(String.valueOf(System.currentTimeMillis()));
out.flush();
out.close();
}
}
-----------------------------------------------------------
至此我们就实现了简单的AJAX功能简单说一下代码，jsp页面的js代码很少，是调用了jQuery lib 实现
<script type="text/javascript">
function onInvokeAction(){
$.post('/Ajax', {
//request提交方式，如果是post 那么就是 $.post ，'/Ajax'是处理请求的servlet映射路径，也可以是struts里面的 .do，如果是GET方式提交 那么就是$.get('/Ajax?parameter1=value¶meter2=value……')
text: 'my string',
//需要设定的参数，servlet处理的时候request.getParameter("test")得到的就是“my string”
number: 23
//同上，多个参数提交的格式为{name1:value,name2:value,name3:value}
}, function(data) {
//定义AJAX回调函数，传入从servlet返回的“data”
$('#presidents').html(data);
//查找CSS样式ID为presidents的元素并以html格式 用“data”替换掉,data可以是html代码，例如“<input type='button' value ='hahaha'>”
});
}
</script>
===============================================
一个最基本的实现可以拓展出更丰富的功能，例如可以在servlet中利用传入的参数和反射来构造一个通用validator比如提交的地址'/Ajax' 改为'/Ajax?parameter=zipcode' 那么利用反射可以在servlet调用一个private void zipcode()然后实现邮政编码的server side验证以上仅是浅浅而谈，希望可以达到抛砖引玉的作用[/size]
页:
[1]
