Ajax详解及其案例分析

1 获得Ajax对象

1.1 问题

如何获得XmlHttpRequest对象。

1.2 方案

区分浏览器，使用不同的获取方式。

1.3 步骤

步骤一： 新建ajax01.html页面

新建一个Web工程，在WebRoot下新建ajax01.html页面。在<script>标记内编写JavaScript代码实现获取Ajax对象。

<script type="text/javascript">
            /*获取Ajax对象*/
            function getXhr(){
                var xhr = null;
                //确保IE7,IE8，FireFox下可以运行
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    //确保IE6可以运行，无视更古老的IE浏览器
                    xhr = new ActiveXObject("Microsoft.XMLHttp");
                }
                return xhr;
                //更简易的写法
                //xhr = window.XMLHttpRequest?
                //    new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
            }
        </script>

步骤二： 部署项目访问ajax01.html页面

访问页面如图-2所示。

图 – 2

点击链接：

图 - 3

使用IE测试结果如图-4所示。

图 – 4

注意：本次测试使用的是IE11，但IE的早期5.5，6.0版本创建的都是ActiveXObject类型的。从IE7开始支持创建XMLHttpRequest的方式来获取Ajax对象。

1.4 完整代码

ajax01.html文件代码如下：

<html>
    <head>
        <title>ajax01.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            /*获取Ajax对象*/
            function getXhr(){
                var xhr = null;
                //确保IE7,IE8，FireFox下可以运行
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    //确保IE6可以运行，无视更古老的IE浏览器
                    xhr = new ActiveXObject("Microsoft.XMLHttp");
                }
                return xhr;
                //更简易的写法
                //xhr = window.XMLHttpRequest?
                //    new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
            }
        </script>
    </head>
    <body>
        <!-- 获取XMLHttpRequest对象 -->
        <a href="javascript:;" onclick="alert(getXhr());"> 获取Ajax对象 </a>
    </body>
</html>

2 使用Ajax对象发送GET请求

2.1 问题

使用Ajax对象发送GET类型的请求，从服务器端获取一小段文本。

2.2 方案

遵循创建Ajax对象，创建请求，设置回调函数，发送请求的步骤来完成一次异步请求。

2.3 步骤

步骤一： 新建ajax02.html页面

步骤二： 添加getText()方法，并补充超链接对该方法的调用

<html>
    <head>
        <title>ajax02.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">

            function getXhr(){
                var xhr = null;
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest();
                }else{
                    xhr = new ActiveXObject("Microsoft.XMLHttp");
                }
                return xhr;
            }

            function getText(){
                //1.获取Ajax对象
                var xhr = getXhr();
                //2.设置回调函数
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        var txt = xhr.responseText;
                        alert(txt);
                    }
                };
                //3.创建请求
                xhr.open("get","get_text.do",true);
                //4.发送请求
                xhr.send(null);
            }
        </script>
    </head>
    <body>
        <!-- 获取服务器端一小段文本 -->
        <a href="javascript:;" onclick="getText()">获取文本</a>
    </body>
</html>

步骤三： 编写ActionServlet类

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(
                uri.lastIndexOf("/"),
                uri.lastIndexOf("."));
        if(path.equals("/get_text")){//get请求
            out.println("get请求-服务器返回的数据");
        }
        out.close();
    }

}

步骤四： 部署、运行，查看结果

点击链接：

2.4 完整代码

ajax02.html页面代码：

<html>

  <head>

    <title>ajax02.html</title>    

    <meta http-equiv="Content-Type"

          content="text/html; charset=UTF-8">

    <script type="text/javascript">

        function getXhr(){

            var xhr = null;

            if(window.XMLHttpRequest){

                xhr = new XMLHttpRequest();

            }else{

                xhr = new ActiveXObject("Microsoft.XMLHttp");

            }

            return xhr;        

        }

        function getText(){

            //1.获取Ajax对象

            var xhr = getXhr();    

            //2.设置回调函数    

            xhr.onreadystatechange=function(){                

                if(xhr.readyState==4 && xhr.status==200){

                    var txt = xhr.responseText;

                    alert(txt);

                }

            };

//3.创建请求

            xhr.open("get","get_text.do",true); 

            //4.发送请求

            xhr.send(null);

        }  

    </script>

  </head>

  <body>

    <!-- 获取服务器端一小段文本 -->

    <a href="javascript:;" onclick="getText()">获取文本</a>

  </body>

</html>

ActionServlet.java页面代码：

package web;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter out = response.getWriter();

        //获取请求资源路径

        String uri = request.getRequestURI();

        String path = uri.substring(

                uri.lastIndexOf("/"),

                uri.lastIndexOf("."));

        if(path.equals("/get_text")){//get请求

            out.println("来自星星的你");

        }

        out.close();

    }

}

web.xml文件代码：

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5"

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

  <display-name></display-name>

  <servlet>

    <servlet-name>ActionServlet</servlet-name>

    <servlet-class>web.ActionServlet</servlet-class>

  </servlet>

  <servlet-mapping>

    <servlet-name>ActionServlet</servlet-name>

    <url-pattern>*.do</url-pattern>

  </servlet-mapping>    

</web-app>

3 使用Ajax对象发送POST请求

3.1 问题

使用Ajax对象发送POST类型的请求，并向服务器提交一小段文本，显示从服务器端返回的文本。

3.2 方案

遵循GET请求方式的4步基础上，多增加一个设定，设定请求头中的content-type属性的值为application/x-www-form-urlencoded

3.3 步骤

步骤一： 新建my.js文件

在WebRoot节点下，新增一个文件夹“js”。在该文件夹中新增一个文件，名为my.js。将获取XMLHttpRequest对象的方法拷贝到该文件中，便于更多页面重用该方法。

my.js 代码：

function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}

步骤二： 新建ajax03.html页面

步骤三： 编写getText（）方法

<html>
    <head>
        <title>ajax03.html</title>
        <meta http-equiv="Content-Type" content="type=text/html;charset=UTF-8">
        <script type="text/javascript" src="js/my.js"></script>
        <script type="text/javascript">
        function getText(){
            var xhr = getXhr();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    alert(xhr.responseText);
                }
            };
          xhr.open("post","post_text.do",true);
            xhr.setRequestHeader(‘content-type‘,
                ‘application/x-www-form-urlencoded‘);
            xhr.send("uname=daliu_it");
        }
    </script>
    </head>
    <body>
        <!-- 使用Ajax对象发送POST类型请求，并获取文本 -->
        <input type="button" onclick="getText()" value="POST请求" />
    </body>
</html>

步骤四： 修改ActionServlet

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        //获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(
                uri.lastIndexOf("/"),
                uri.lastIndexOf("."));
        if(path.equals("/get_text")){//get请求
            out.println("get请求-服务器返回的数据");
        }else if(path.equals("/post_text")){//post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        }
        out.close();
    }
}

步骤五： 运行，查看结果

3.4 完整代码

ajax03.html文件代码如下：

<html>

  <head>

    <title>ajax03.html</title>    

    <meta  http-equiv="Content-Type"

           content="type=text/html;charset=UTF-8">

    <script type="text/javascript" src="js/my.js"></script>

    <script type="text/javascript">

        function getText(){

            var xhr = getXhr();

            xhr.onreadystatechange=function(){

                if(xhr.readyState==4 && xhr.status==200){

                    alert(xhr.responseText);

                }

            };

          xhr.open("post","post_text.do",true);

            xhr.setRequestHeader(‘content-type‘,

                ‘application/x-www-form-urlencoded‘);

            xhr.send("uname=daliu_it");

        }

    </script>

  </head> 

  <body>

  <!-- 使用Ajax对象发送POST类型请求，并获取文本 -->

  <input type="button" onclick="getText()" value="POST请求"/>

  </body>

</html>

ActionServlet.java文件代码如下：

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
        if (path.equals("/get_text")) {// get请求
            out.println("get请求-服务器返回的数据");
        } else if (path.equals("/post_text")) {// post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        }
        out.close();
    }

}

web.xml文件代码。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <display-name></display-name>
    <servlet>
        <servlet-name>ActionServlet</servlet-name>
        <servlet-class>web.ActionServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ActionServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

my.js文件代码。

function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}

4 使用Ajax校验用户名

4.1 问题

实现注册功能中，用户名是否可用的校验。

4.2 方案

填写完用户名后，通过点击后面的按钮进行验证。并显示服务器返回的说明信息。

4.3 步骤

步骤一： 新建regist.html文件

<body>
        <!-- 验证注册信息中的用户名是否可用 -->
        <form action="" method="post">
            <fieldset>
                <legend>
                    注册信息
                </legend>
                用户名：
                <input name="uname" id="uname" />
                <input type="button" value="检查一下吧" onclick="check_name()" />
                <span id="name_msg" style="color: red;"></span>
                <br />
                <br />
                <input type="submit" value="注册" />
            </fieldset>
        </form>
    </body>

步骤二： 编写check_name（）方法

<script type="text/javascript">
            function check_name(){
                var xhr = getXhr();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        document.getElementById("name_msg")
                                .innerHTML = xhr.responseText;
                    }
                };
                xhr.setRequestHeader(‘content-type‘,
                    ‘application/x-www-form-urlencoded‘);
              xhr.open("post","check_name.do",true);
                document.getElementById("name_msg")
                                .innerHTML="正在检查。。。";
                var uname = document.getElementById("uname");
                xhr.send("uname="+uname.value);
            }
        </script>

document.getElementById(“name_msg”).innerHTML=“正在检查“；这行代码在服务器还没有返回信息之前，为用户提供良好的交互体验。

步骤三： 修改ActionServlet.java文件

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
        if (path.equals("/get_text")) {// get请求
            out.println("get请求-服务器返回的数据");
        } else if (path.equals("/post_text")) {// post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        } else if (path.equals("/check_name")) {// 检查用户名
            String name = request.getParameter("uname");
            // 模拟网络延迟的操作
            if (1 == 1) {
                try {
                    Thread.sleep(6000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            System.out.println(name);
            if ("Luffy".equals(name)) {
                out.println("该用户名不可用");
            } else {
                out.println("可以使用！");
            }
        }
        out.close();
    }

}

说明：

xhr.open("post","check_name.do",true);
 xhr.setRequestHeader(‘content-type‘,
                    ‘application/x-www-form-urlencoded‘);

这俩句的顺序不能颠倒，不然没有想要的效果。

步骤四： 运行，查看结果

输入不可用的用户名：

输入可用的用户名

完整代码

regist.html文件代码如下：

<html>
    <head>
        <title>regist.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/my.js"></script>
        <script type="text/javascript">
            function check_name(){
                var xhr = getXhr();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        document.getElementById("name_msg")
                                .innerHTML = xhr.responseText;
                    }
                };
                xhr.open("post","check_name.do",true);
                xhr.setRequestHeader(‘content-type‘,
                    ‘application/x-www-form-urlencoded‘);
                document.getElementById("name_msg")
                                .innerHTML="正在检查。。。";
                var uname = document.getElementById("uname");
                xhr.send("uname="+uname.value);
            }
        </script>
    </head>
    <body>
        <!-- 验证注册信息中的用户名是否可用 -->
        <form action="" method="post">
            <fieldset>
                <legend>
                    注册信息
                </legend>
                用户名：
                <input name="uname" id="uname" />
                <input type="button" value="检查一下吧" onclick="check_name()" />
                <span id="name_msg" style="color: red;"></span>
                <br />
                <br />
                <input type="submit" value="注册" />
            </fieldset>
        </form>
    </body>
</html>

ActionServlet.java文件代码如下：

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
        if (path.equals("/get_text")) {// get请求
            out.println("get请求-服务器返回的数据");
        } else if (path.equals("/post_text")) {// post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        } else if (path.equals("/check_name")) {// 检查用户名
            String name = request.getParameter("uname");
            // 模拟网络延迟的操作
            if (1 == 1) {
                try {
                    Thread.sleep(6000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            System.out.println(name);
            if ("Luffy".equals(name)) {
                out.println("该用户名不可用");
            } else {
                out.println("可以使用！");
            }
        }
        out.close();
    }

}

if(xhr.readyState==4 && xhr.status==200){
                        document.getElementById("name_msg")
                                .innerHTML = xhr.responseText;
                    }

说明：

// 模拟网络延迟的操作
            if (1 == 1) {
                try {
                    Thread.sleep(6000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }

这个是为了模拟一个等待的效果。

5 POST请求时的乱码处理

5.1 问题

在上例中，如果填写的用户名为中文信息时，就会出现下图所示的结果。在控制台中打印服务器端获取的数据为乱码。但火狐浏览器提交的中文 可以被服务器端正确识别。原因是火狐会告诉服务器端以什么方式解码。而IE浏览器和Chrome浏览器提交的数据，到了服务器端都是以默认解码方式 ISO-8859-1来解析的，而提交时浏览器依据meta标记指定的UTF-8的方式进行的编码，编码解码不一致就会导致乱码出现。如何解决？

5.2 方案

在获取表单提交的数据之前，设置服务器端的解码方式为UTF-8即可。

5.3 步骤

步骤一： 修改ActionServlet类

在service方法中增加一行代码即可：

 request.setCharacterEncoding("UTF-8");

步骤二： 重新运行regist.html页面

重新运行程序，分别使用Chrome、IE、FireFox浏览器来访问regist.html页面，测试中文情况，可以正确得到表单以POST方式提交的中文字符了。

6 GET请求时的乱码处理

6.1 问题

在regist.html页面中，如果将表单的提交方式更换为get，并且服务器端依然保留UTF-8的解码代码，运行程序时，依然会有如图所示的乱码问题。如何解决？

6.2 方案

产生乱码的原因是，以GET方式提交的数据存在于提交的消息头中URL中，HTTP协议对于URI的编码方式为UTF-8，但是URI后面的 查询字符串的编码方式却是ISO-8859-1。到了服务器端，容器针对URI的解码方式是ISO-8859-1，依然解析不了中文，所以，会出现乱码。 为了能够支持地址中查询字符串的中文格式，需要在浏览器端和服务器端同时进行支持UTF-8格式编码、解码的设置。

6.3 步骤

步骤一： 修改tomcat的默认解码设置

修改tomcat安装路径下conf/server.xml文件。找到Connector节点后，增加 URIEncoding="UTF-8"这个属性即可。

步骤二： 新建regist01.html页面

新建regist01.html文件，表单内容参考regist.html，Ajax的请求修改为GET方式，为了让URL整体都使用 UTF-8的方式进行编码，需要使用JavaScript语言中的encodeURI（）方法，所以在open方法创建请求时，第二个URI参数要使用 encodeURI方法进行编码。如图-27所示。

步骤三： ActionServlet保持不变

步骤四： 运行，查看结果

6.4 完整代码

regist01.html文件代码如下：

    <html>
      <head>
        <title>regist01.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/my.js"></script>
        <script type="text/javascript">
            function check_name(){
                var uname = document.getElementById("uname");
                var uri = "check_name.do?uname="+uname.value;
                var xhr = getXhr();
              xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        document.getElementById("name_msg").innerHTML
                        = xhr.responseText;
                    }
                };
                xhr.open("get",encodeURI(uri),true);
                document.getElementById("name_msg").innerHTML="正在检查。。。";
                xhr.send(null);
            }
        </script>
      </head>
        <body>
        <!-- GET方式提交中文用户名进行验证 -->
        <form action="" method="post">
            <fieldset>
                <legend>注册信息</legend>
                用户名：<input name="uname" id="uname"/>
                <input type="button" value="检查一下吧" onclick="check_name()"/>
                <span id="name_msg" style="color:red;"></span>
                <br/><br/>
                <input type="submit" value="注册"/>
            </fieldset>
        </form>
      </body>
    </html>

ActionServlet.java文件代码如下：

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        // 获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
        if (path.equals("/get_text")) {// get请求
            out.println("get请求-服务器返回的数据");
        } else if (path.equals("/post_text")) {// post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        } else if (path.equals("/check_name")) {// 检查用户名
            String name = request.getParameter("uname");
            // 模拟网络延迟的操作
            if (1 == 1) {
                try {
                    Thread.sleep(6000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            System.out.println(name);
            if ("Luffy".equals(name)) {
                out.println("该用户名不可用");
            } else {
                out.println("可以使用！");
            }
        }
        out.close();
    }

}

7 使用Ajax实现级联的下拉列表

7.1 问题

实现市区的级联下拉列表。即，选择城市后，动态加载该城市包含的区域信息。

7.2 方案

下拉列表发生onchange事件时，将选中的城市对应的value发送给服务器端，服务器端收到这个城市拼音 缩写后，进行比对，返回区域的组合信息。客户端收到信息后分别按照“；“和”，“进行分割，然后构建option对象，添加到区域对应的下拉列表中。

7.3 步骤

步骤一： 修改my.js文件

修改my.js文件，增加两个便于定位html页面中元素的方法，以及便于读取元素value属性的方法。

function $(id) {
    return document.getElementById(id);
}
function $F(id) {
    return $(id).value;
}

步骤二： 新建select.html文件

编写页面中的下拉列表。并且在onchange事件时，将选中项的value属性作为参数传给getCity方法。

<body>
        <!-- Ajax实现级联下拉列表 -->
        <select id="s1" style="width: 120px;" onchange="getCity(this.value);">
            <option value="bj">
                北京
            </option>
            <option value="sh">
                上海
            </option>
            <option value="gz">
                广州
            </option>
        </select>
        <select id="s2" style="width: 120px;">
        </select>
    </body>

步骤三： 编写Ajax代码

    <script type="text/javascript">
        function getCity(v1) {
            var xhr = getXhr();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status==200) {
                    var txt = xhr.responseText;
                    //静安,ja;黄浦,hp;浦东新,pdx
                    var strs = txt.split(‘;‘);
                    //先清空s2
                    $(‘s2‘).innerHTML = ‘‘;
                    for (i = 0; i < strs.length; i++) {
                        var str1s = strs[i].split(‘,‘);
                        /*构造一个Option对象 */
                        var op = new Option(str1s[0], str1s[1]);
                        /* options是select的一个属性,
                              其值是一个数组。数组中的元素是Option对象。
                        */
                        $(‘s2‘).options[i] = op;
                    }
                }
            };
         xhr.open(‘get‘, ‘getCity.do?name=‘ + v1, true);
            xhr.send(null);
        }
    </script>

步骤四： 修改ActionServlet，添加对getCity.do的请求处理

else if(path.equals("/getCity")){//城市列表联动
            String name = request.getParameter("name");
            if("bj".equals(name)){
                out.println("朝阳,cy;东城,dc");
            }else if("sh".equals(name)){
                out.println("静安,ja;黄浦,hp;浦东新,pdx");
            }else{
                out.println("白云,by;番禺,py");
            }
        }

步骤五：访问，查看运行结果

7.4 完整代码

js/my.js文件代码如下：

function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}
function $(id) {
    return document.getElementById(id);
}
function $F(id) {
    return $(id).value;
}

select.html文件代码如下 ：

<html>
    <head>
        <title>select.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/my.js"></script>
        <script type="text/javascript">
        function getCity(v1) {
            var xhr = getXhr();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status==200) {
                    var txt = xhr.responseText;
                    //静安,ja;黄浦,hp;浦东新,pdx
                    var strs = txt.split(‘;‘);
                    //先清空s2
                    $(‘s2‘).innerHTML = ‘‘;
                    for (i = 0; i < strs.length; i++) {
                        var str1s = strs[i].split(‘,‘);
                        /*构造一个Option对象 */
                        var op = new Option(str1s[0], str1s[1]);
                        /* options是select的一个属性,
                              其值是一个数组。数组中的元素是Option对象。
                        */
                        $(‘s2‘).options[i] = op;
                    }
                }
            };
         xhr.open(‘get‘, ‘getCity.do?name=‘ + v1, true);
            xhr.send(null);
        }
    </script>
    </head>
    <body>
        <!-- Ajax实现级联下拉列表 -->
        <select id="s1" style="width: 120px;" onchange="getCity(this.value);">
            <option value="bj">
                北京
            </option>
            <option value="sh">
                上海
            </option>
            <option value="gz">
                广州
            </option>
        </select>
        <select id="s2" style="width: 120px;">
        </select>
    </body>
</html>

ActionServlet.java文件代码如下：

package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        // 获取请求资源路径
        String uri = request.getRequestURI();
        String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
        if (path.equals("/get_text")) {// get请求
            out.println("get请求-服务器返回的数据");
        } else if (path.equals("/post_text")) {// post请求
            String name = request.getParameter("uname");
            System.out.println(name);
            out.println("又来了一次的" + name);
        } else if (path.equals("/check_name")) {// 检查用户名
            String name = request.getParameter("uname");
            // 模拟网络延迟的操作
            if (1 == 1) {
                try {
                    Thread.sleep(6000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            System.out.println(name);
            if ("Luffy".equals(name)) {
                out.println("该用户名不可用");
            } else {
                out.println("可以使用！");
            }
        } else if (path.equals("/getCity")) {// 城市列表联动
            String name = request.getParameter("name");
            if ("bj".equals(name)) {
                out.println("朝阳,cy;东城,dc");
            } else if ("sh".equals(name)) {
                out.println("静安,ja;黄浦,hp;浦东新,pdx");
            } else {
                out.println("白云,by;番禺,py");
            }
        }
        out.close();
    }

}

web.xml文件代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <display-name></display-name>
    <servlet>
        <servlet-name>ActionServlet</servlet-name>
        <servlet-class>web.ActionServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>ActionServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

源码下载：

http://yunpan.cn/cQs2VUIqdERkb  提取码 61a9

时间： 2024-08-29 09:33:16

Ajax详解及其案例分析的相关文章

node.js中socket.io的使用（node.js开发实战详解一个案例分析）

啊,又是这本书.好像里面有个交互图,呃...那个消息响应的顺序好像与我的程序不同. 其实问题也不大,操作实例,控制台运行该文件app.js开启服务: var io=require('socket.io').listen(8080,{log:false}); io.sockets.on('connection',function (socket){ socket.on('msg',function(data){ console.log(data); if(data.state){ if(data.

DBA_Oracle GoldenGate安装详解（案例）

http://www.oracle.com/technetwork/middleware/goldengate/downloads/index.html Oracle GoldenGate软件基于数据库日志结构变化,通过解析源端在线日志或归档日志获得数据增量,再将这些变化应用到目标数据库,从而实现源库和目标库的 数据同步.下面通过一个简单的示例,详细介绍利用GoldenGate实现Oracle数据库之间的同步.基本架构如下图所示: 1. 安装 1.1 下载介质 GoldenGate的安装介质可以

Unix Shell_Oracle EBS基于主机文件Host开发详解（案例）

2014-06-20 BaoXinjian 一.摘要 Oracle 并发程式中Host Type的可执行程式,它的作用是用于调用Unix Shell去执行某些需求 个人觉得Oracle EBS中引入Host去调用unix shell其弥补了很多PLSQL类型程式无法做的某些功能,以unix shell的语法结构直接对服务器进行操作 写host并发程式时,需要较强的Bash语法知识,个人不做DBA,只了解一部分,所以就不具体介绍了,只说明一下Oracle EBS开发Unix Shell时需要注意的

下载Zookeeper从入门到精通（开发详解，案例实战，Web界面监控）

ZooKeeper是Hadoop的开源子项目(Google Chubby的开源实现),它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.命名服务.分布式同步.组服务等. Zookeeper的Fast Fail 和 Leader选举特性大大增强了分布式集群的稳定和健壮性,并且解决了Master/Slave模式的单点故障重大隐患,这是越来越多的分布式产品如HBase.Storm(流计算).S4(流计算)等强依赖Zookeeper的原因. Zookeeper从入门到精通(开发详解,案

RPM安装包-Spec文件参数详解与示例分析

spec文件是整个RPM包建立过程的中心,它的作用就如同编译程序时的Makefile文件. 1.Spec文件参数 spec文件包含建立一个RPM包必需的信息,包括哪些文件是包的一部分以及它们安装在哪个目录下.这个文件一般分为如下的几节: (1) Preamle(序言) 序言包含用户请求包的信息时所显示的内容.它可以包含包的功能描述.包的软件版本.版权信息和所属的包组等.Summary 是一行关于该软件包的描述,Name 是该软件包的基名,Version 是该软件的版本号,Release 是 RP

Android 4.4 KitKat NotificationManagerService使用详解与原理分析(二)__原理分析

前置文章: <Android 4.4 KitKat NotificationManagerService使用详解与原理分析(一)__使用详解> 转载请务必注明出处:http://blog.csdn.net/yihongyuelan 概况 在上一篇文章<Android 4.4 KitKat NotificationManagerService使用详解与原理分析(一)__使用详解>中详细介绍了NotificationListenerService的使用方法,以及在使用过程中遇到的问题和

Java指针详解___案例解答

大家先看看下面的这个程序:--------->相信初级程序员就能看得懂 int k1=1; int k2=k1; k2+=8; System.out.println("k1:"+k1); 大声回答,k1等于几? 输出: k1:1 这是为什么呢?不是明明k2已经指向了k1,然后k2的值发生改变,k1就要发生改变吗? 刚开始:k1 ,k2指向同一个内存地址: 当发生语句:k2+=8的时候,我们这么看:k2=k2+8,第一步:k2+8,很简单啊,等于9呗,这时候,内存空间会自动分配一个

TCP协议详解即实例分析

 TCP协议详解 3.1 TCP服务的特点 TCP协议相对于UDP协议的特点是面向连接.字节流和可靠传输. 使用TCP协议通信的双方必须先建立链接,然后才能开始数据的读写.双方都必须为该链接分配必要的内核资源,以还礼链接状态和连接上数据的传输.TCP链接是全双工的,即双方的数据读写可以通过一个连接进行.完成数据交换之后,通信双方都必须断开连接以释放系统资源. TCP协议的这种连接是一对一的,所以基于广播和多播(目标是多个主机地址)的应用程序不能使用TCP服务.而无连接协议UDP则非常适合于广

OAF_OAF Debug And Log调试和记录工具的详解（案例）

2014-06-16 BaoXinjian 一.摘要 在需求后期,对实现该需求的代码进行调试时一个不可忽略的步骤,可以确保代码在上线后尽可能避免出现bug和异常 在OAF开发中一般相关的部分主要有 1. 使用OAF Bug工具调试代码 设定Breakpoint断电 查看Exception Stack Trace 设定Exception Breakpoint断点 进行Debug,查看Call Stack和Data在断点上 2. 使用OAF Diagnostic工具产生log 确认调试项目启动了Di