1、AJAX
1.2、AJAX概述
AJAX:Asynchronoused Javascript And Xml,异步的js与xml。
AJAX可以完成的功能:提高用户体验,提高开发效率,自动回填功能!就是在页面不改变的情况下进入Servlet/Action,并查询数据。
例如:验证用户名是否重复,联动菜单,百度提示,分页,树型列表
要完成AJAX,首先需要浏览器支持一个XMLHttpRequest的对象,这个对象是AJAX的核心对象。
需要注意编写时的两个点。一个是调用时的操作js,还有一个是Servlet/Action返回时调用的js(回调函数)
1.3、使用AJAX完成用户名验证
编写注册页面,加入onblur事件
<form action="" method="post" οnsubmit="return checkform()"> 用户ID: <input type="text" name="userid" id="userid" οnblur="checkid(this.value);"/> <br/> 真实姓名: <input type="text" name="username" id="username"/> <br/> 密码: <input type="password" name="password" id="password"/> <br/> <input type="submit" value="注册"/> </form> |
编写js操作,先建立出XMLHttpRequest核心对象。
<script type="text/javascript"> var xmlHttp ; function createXMLHttp() { // 判断浏览器类型 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); // FF的内核 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE内核 } } function checkid(userid) {// 调用AJAX操作,固定的4个步骤 // 1:创建对象 createXMLHttp(); // 2:设置提交路径 xmlHttp.open("post","${pageContext.request.contextPath}/AjaxServlet?status=checkid&userid="+userid); // 3:设置回调函数,使Servlet执行后可以自动调用某一个js方法 xmlHttp.onreadystatechange = checkidCallback ; // 4:发送,提交 xmlHttp.send(); } function checkidCallback() { // 判断当前状态,在回调函数中,一共执行了4次. // 在核心对象中包含一个叫readyState的属性,该属性在执行AJAX的过程中会按照 1 - 4 值改变,当该值改变时,就会自动执行回调函数 // 按照以下情况进行改变 // 1:执行open方法时 // 2:执行到send方法时 // 3:执行到Servlet中的out.print时 // 4:执行到Servlet中的out.close时执行 if (xmlHttp.readyState == 4) { // 还要判断是否正确执行,执行过程中是否出现了异常 if (xmlHttp.status == 200) { // 接收Servlet的返回值 var value = xmlHttp.responseText ; alert(value); } else { alert("执行过程中出现了异常,请与管理员联系:" + xmlHttp.readyState); } } } function checkform() { return flag ; } </script> |
编写Servlet
public class AjaxServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String status = request.getParameter("status"); if ("checkid".equals(status)) { // 接收参数 String userid = request.getParameter("userid"); // 调用服务 boolean flag = ServiceFactory.getUserServiceInstance().checkUserid( userid); // AJAX返回时,需要使用下面的out对象,通过out.print返回数据
response.setContentType("text/html"); PrintWriter out = response.getWriter();//注意,返回数据时,不能在out.print后加ln out.print(flag); out.close(); // 一定不要跳转 } } } |
1.4、联动菜单
页面加入连接
<a href="${pageContext.request.contextPath}/AjaxServlet?status=showArea">联动菜单</a> |
完成Servlet中的查询操作。
public class AjaxServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String status = request.getParameter("status"); if ("checkid".equals(status)) { // 接收参数 String userid = request.getParameter("userid");// 调用服务 boolean flag = ServiceFactory.getUserServiceInstance().checkUserid( userid); // AJAX返回时,需要使用下面的out对象,通过out.print返回数据 response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.print(flag); out.close();// 一定不要跳转 } else if ("showArea".equals(status)) { List<Area> allArea = null; allArea = ServiceFactory.getAreaServiceInstance().findAllArea(); request.setAttribute("allArea", allArea); request.getRequestDispatcher("/pages/front/area_list.jsp").forward(request, response); } else if ("showplus".equals(status)) { int upid = Integer.parseInt(request.getParameter("upid")); List allPlus = ServiceFactory.getAreaServiceInstance().findByUpid(upid); response.setContentType("text/html"); // 一定注意乱码处理 response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter(); if (allPlus != null && allPlus.size() > 0) { Iterator iter = allPlus.iterator(); while(iter.hasNext()) { Areaplus plus = (Areaplus) iter.next(); out.print(plus.getId() + ":"); out.print(plus.getTitle() + "|"); } } out.close(); } } } |
编写页面显示两个下拉列表
<html> <head> <title>联动菜单</title> <script type="text/javascript"> var xmlHttp ; function createXMLHttp() { // 判断浏览器类型 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); // FF的内核 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE内核 } } function showplus(upid) { createXMLHttp(); xmlHttp.open("post","${pageContext.request.contextPath}/AjaxServlet?status=showplus&upid="+upid); xmlHttp.onreadystatechange = showplusCallback; xmlHttp.send(); } function showplusCallback () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var value = xmlHttp.responseText; var allPlus = value.split("|"); // 取得select var select = document.getElementById("plus"); // 先删除下拉列表中原有的内容 select.options.length = 1; // 可以简写为 select.length = 1; for (var i = 0; i < allPlus.length - 1; i++) { // 取得id和title var id = allPlus[i].split(":")[0]; var title = allPlus[i].split(":")[1]; // 创建一个<option> var option = document.createElement("option"); // 先赋值value option.value = id ; // 创建option内的文本信息 var text = document.createTextNode(title); // 将text加入到option中 option.appendChild(text); // 将 optioin 加入到select中 select.appendChild(option); } } else { alert("出现错误:" + xmlHttp.status); } } } </script> </head> <body> <center> 省份:<select name="area" οnchange="showplus(this.value);"> <option value="0">-请选择省份-</option> <c:if test="${allArea != null}"> <c:forEach var="area" items="${allArea}"> <option value="${area.id}">${area.title }</option> </c:forEach> </c:if> </select> 城市:<select name="plus" id="plus"> <option value="0">-请选择城市-</option> </select> </center> </body> </html> |