AJAX简介

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>