上一篇说到了利用ajax技术实现无刷新验证用户名,这篇将介绍无刷新获取后台商品信息并显示出来。实现的效果如下:
前台的操作逻辑和前面介绍的都差不多。都是获取XMLHttpRequest对象并进行请求监听等等。获取XMLHttpRequest对象封装在了util.js里面了。
util.js里代码如下:
/**
* 得到XMLHttpRequest对象
*/
function getXHR(){
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();
}catch(e)
{
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("你的浏览器不支持ajax");
return false;
}
}
}
return xmlHttp;
}
前台页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.odd{background-color:#c3f3c3;}
.even{background-color:#f3c3f3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<title>ajax用户名验证</title>
<script>
window.onload = function() {
document.getElementById("bt1").onclick = function() {
//发出已补请求
//1/得到xhr对象
var xhr = getXHR();
//2.注册状态变化监听器
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
}
//3.建立与服务器的连接
xhr.open("POST", "AjaxDemo2" + "?time=" + new Date().getTime());
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.向服务器发出请求
xhr.send();
}
}
</script>
</head>
<body>
<button id="bt1">获取商品信息</button>
<div id="div1"></div>
</body>
</html>
后台servlet代码如下:
package com.levi.servletajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.levi.domain.Product;
/**
* Servlet implementation class AjaxDemo2
*/
public class AjaxDemo2 extends HttpServlet {
private static final long serialVersionUID = 1L;
private List<Product>products=new ArrayList<Product>();
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxDemo2() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
public void init() throws ServletException
{
products.add(new Product(1, "篮球", 300));
products.add(new Product(2, "足球", 100));
products.add(new Product(3, "乒乓球",50));
products.add(new Product(4, "羽毛球",100));
products.add(new Product(5, "排球", 120));
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("products", products);
request.getRequestDispatcher("/listProducts.jsp").forward(request, response);
}
}
其中这里通过服务器转发到了listProducts.jsp这里,这里进行的是显示所有商品的代码。因为返回的是jsp文件,也就是相当于把所有的代码返回了。返回到前面前台页面的的div里面,达到了动态显示的效果。
listProducts.jsp中代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" width="438">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
<c:forEach items="${products }" var="p" varStatus="vs">
<tr class="${vs.index%2==0?'odd':'even'}">
<th>${p.id }</th>
<th>${p.name }</th>
<th>${p.price }</th>
</tr>
</c:forEach>
</table>
</body>
</html>
其中这里稍微难理解的就是前台xhr.responseText获取到的文本数据其实就是那整个jsp文件。