码迷，mamicode.com
首页 > Web开发 > 详细

Ajax详解及其案例分析

时间：2015-06-14 12:16:41      阅读：104      评论：0      收藏：0      [点我收藏+]

标签：

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

Ajax详解及其案例分析

标签：

原文地址：http://www.cnblogs.com/liuhongfeng/p/4574599.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！