前言
在javaweb中，ajax是前后台交互的技术，可以实现异步请求，不用刷新整个页面就可以完成操作。
案例1：用ajax实现登录
1、在myeclipce中创建web项目，目录结构如下，该建包建包，该建类建类，该建jsp建jsp，该导入jquery导入jquery。
2、实现的功能是：在index.jsp 中用户输入id和username，点击登录，传到后台，如果id为110，username为helloworld，那么页面跳转到pages/sussess.jsp中（当然，是用Ajax实现）
3、前台index.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<script type = "text/javascript">
function login(){
var id = document.getElementById("id").value;
var username = document.getElementById("username").value;
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/LoginServlet",
data:{"id":id, "username":username},
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function(data){
if(data == "0"){
alert("您输入的用户名或密码有错！");loginform.username.focus();return false;
}else{
window.location.href = "${pageContext.request.contextPath}/pages/success.jsp";//跳转
}
},
error:function(arr) {
alter("有错误");
}
});
}
</script>
</head>
<body>
id:<input id="id" type="text" name="id" /><br>
username:<input id="username" type="text" name="username" /><br>
<input type="submit" value="登录" onclick="login()"/>
</body>
</html>
4、LoginServlet代码
package com.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String id = request.getParameter("id");
String username = request.getParameter("username");
String flag = "0";
PrintWriter out = response.getWriter();
if(id != null && !username.trim().equals("") && username != null){
if(id.equals("110") && username.equals("helloworld")){
flag = "1";
request.getSession().setAttribute("username", username);
request.getSession().setAttribute("id", id);
}
}
out.print(flag);// 返回登录信息
out.flush();
out.close();
}
}
5、success.jsp 代码（就加了一句${sessionScope.username }）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'success.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
Hello World ${sessionScope.username }
</body>
</html>
6、效果截图
注：LoginServlet的url-pattern是/LoginServlet
案例2：局部刷新
1、在案例一的基础上，新建了这么几个文件，看下图，没有建的建好
2、实现的功能：在test.jsp 中有一个button，点击button，从后台获取数据，输出到前台的table中。
3、test.jsp代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>
<script type = "text/javascript">
function showAll(){
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/ShowServlet",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function(data){
var data = JSON.parse(data);
var inner = "<tr><td>id</td><td>username</td></tr>";
for(var i = 0; i < data.length; i++){
inner += "<tr><td>"+data[i].id+"</td><td>"+data[i].username+"</td></tr>";
}
$("#content").html(inner);
},
error:function(arr) {
alert("有错误");
}
});
}
</script>
</head>
<body>
<button id="showAll" onclick="showAll()">查看</button>
<table id="content">
</table>
</body>
</html>
4、几个java类的代码
package com.domain;
public class User {
private String id;
private String username;
public User() {
super();
// TODO Auto-generated constructor stub
}
public User(String id, String username) {
super();
this.id = id;
this.username = username;
}
@Override
public String toString() {
return "User [id=" + id + ", username=" + username + "]";
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
}
package com.common;
import java.util.ArrayList;
import com.domain.User;
public class UserFactory {
/**
* 这个方法可以从数据库中提取
* @return
*/
public static ArrayList<User> getUsers(){
ArrayList<User> users = new ArrayList<User>();
User user = null;
for (int i = 0; i < 10; i++) {
user = new User(i+"","user"+i);
users.add(user);
}
return users;
}
}
package com.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import com.common.UserFactory;
import com.domain.User;
public class ShowServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ArrayList<User> users = UserFactory.getUsers();
JSONArray jsonArray2 =JSONArray.fromObject(users);
PrintWriter out = response.getWriter();
out.print(jsonArray2);
out.flush();
out.close();
}
}
注1：ShowServlet的url-pattern是/ShowServlet
注2：原理什么的我简单说，Java里面生成的是ArrayList，要把它转化成json格式（我用了JSONArray），需要用几个jar包；相应的，在前台收到后台发送过来的json格式，需要解析（JSON.parse），因为我后台传输的是JSONArray，所以前台解析出来的就是json数组形式，因此循环遍历一下就可以了。
注3：案例2需要的jar包下载地址：http://download.csdn.net/download/tsfx051435adsl/10157423
案例截图：
