ajax使用之动态显示商品信息

清疚 2022-09-21 04:54 81阅读 0赞

上一篇说到了利用ajax技术实现无刷新验证用户名，这篇将介绍无刷新获取后台商品信息并显示出来。实现的效果如下：

![SouthEast][]![SouthEast 1][]

前台的操作逻辑和前面介绍的都差不多。都是获取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文件。

[SouthEast]: https://img-blog.csdn.net/20160615141048750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220721/d2af1539929c487eb189e84ec1fe54b1.png