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" onsubmit="return checkform()">

                     用户ID: <input type="text" name="userid" id="userid" onblur="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" onchange="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>