Ajax详解及其案例分析

2024-10-16 23:36:13

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;
}

使用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添加数据后如何在网页显示

下面通过图文并茂的方式展示给大家,具体内容如下所述: 今天下午做一个项目小练习.需要把查询日志的内容显示到网页上来.一开始陷入了一个误区. 一直以来我这个小项目需要访问ashx来生成html的代码.后台用的Razor模板引擎. 刚开始显示用户列表时.因为是显示到了另一个界面(其实就是另一个网页).razor直接输出没什么问题但是下面这个需要显示到当前页面的下面当我ajax提交后.razor模板引擎拼接后的代码.确是返回到了ajax中的data中不能像最上面那张图那样显示了.我的想法破灭了.
php简单实现查询数据库返回json数据

示例代码一: // 设置返回json格式数据 header('content-type:application/json;charset=utf8'); //连接数据库 $link = mysql_connect("localhost", "root", "root") or die("Unable to connect to the MySQL!"); mysql_query("SET NAMES 'UTF8'&q
Ajax方式实现定期更新页面某块内容的方法

本文实例讲述了Ajax方式实现定期更新页面某块内容的方法.分享给大家供大家参考.具体实现方法如下: function updateShouts(){ // Assuming we have #shoutbox $('#shoutbox').load('latestShouts.php'); } setInterval( "updateShouts()", 10000 ); 希望本文所述对大家的Ajax程序设计有所帮助.
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
详解Python 关联规则分析

1. 关联规则大家可能听说过用于宣传数据挖掘的一个案例:啤酒和尿布:据说是沃尔玛超市在分析顾客的购买记录时,发现许多客户购买啤酒的同时也会购买婴儿尿布,于是超市调整了啤酒和尿布的货架摆放,让这两个品类摆放在一起:结果这两个品类的销量都有明显的增长:分析原因是很多刚生小孩的男士在购买的啤酒时,会顺手带一些婴幼儿用品. 不论这个案例是否是真实的,案例中分析顾客购买记录的方式就是关联规则分析法Association Rules. 关联规则分析也被称为购物篮分析,用于分析数据集各项之间的关联关系. 1
mysql分区功能详解,以及实例分析

一,什么是数据库分区前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例.mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面 (可以通过my.cnf中的datadir来查看),一张表主要对应着三个文件,一个是frm存放表结构的,一个是myd存放表数据的,一个是myi存表索引的.如果一张表的数据量太大的话,那么myd,myi就会变的很大,查找数据就会变的很慢,这个时候我们可以利用mysql的分区功能,在物理上将这一张
Java List 用法详解及实例分析

Java List 用法详解及实例分析 Java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对Java List用法做了详解. List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引 ArrayList:底层的数据结构使用的是数组结构(数组长度是可变的百分之五十延长)(特点是查询很快,但增删较慢)线程不同步 LinkedList:底层的数据结构是链表结构(特点是查询较慢,增删较快) Vector
JDK动态代理步骤详解(源码分析)

动态代理步骤 1.创建一个实现接口InvocationHandler的类,它必须实现invoke方法 2.创建被代理的类以及接口 3.通过Proxy的静态方法通过Proxy的静态方法 ProxyObject proxyObject = new ProxyObject(); InvocationHandler invocationHandler = new DynamicProxy(proxyObject); ClassLoader classLoader = proxyObject.getCl
C语言链表详解及代码分析

C语言链表详解附实例什么是链表链表是一种常见的重要的数据结构.它是动态地进行存储分配的一种结构.链表和数组比较,不用事先确定存储空间,而是根据需要开辟内存单元. 下图1是最简单的一种链表(单向链表)的结构第 0 个结点称为头结点,它存放有第一个结点的首地址,它没有数据,只是一个指针变量.以下的每个结点都分为两个域,一个是数据域,存放各种实际的数据,如学号 num,姓名 name,性别 sex 和成绩 score 等.另一个域为指针域,存放下一结点的首地址.链表中的每一个结点都是同一种结构类
JavaWeb会话技术详解与案例

1.什么是会话: 2.会话技术有哪些: 什么是Cookie? Cookie,有时也用其复数形式 Cookies.类型为"小型文本文件",是某些网站为了辨别用户身份,进行Session跟踪而储存在用户本地终端上的数据(通常经过加密),由用户客户端计算机暂时或永久保存的信息. 3.cookie学习案例: cookie:是数组,中每个元素有:名称和值, 可以通过名称找到名称对应的元素. 重要: Cookie[] cookies = req.getCookies(); //创建cookie对象
Spring的事件机制知识点详解及实例分析

同步事件和异步事件同步事件: 在一个线程里,按顺序执行业务,做完一件事再去做下一件事. 异步事件: 在一个线程里,做一个事的同事,可以另起一个新的线程执行另一件事,这样两件事可以同时执行. 用一个例子来解释同步事件和异步事件的使用场景,有时候一段完整的代码逻辑,可能分为几部分,拿最常见的注册来说,假设完整流程是,1.点击注册->2.检验信息并存库->3.发送邮件通知->4.返回给用户.代码这么写是正确,但不是最好的,缺点如下: 逻辑复杂,业务耦合,我们把校验数据并存库和发送邮件写到一个
Java 多态中继承的转型详解与用法分析

目录一.前言二.转型向上转型向下转型三.instanceof运算符 instanceof的用处 instanceof的使用格式: 一.前言前面我们学习了多态的概述和使用,现在我们来学习前面剩下的转型问题. 二.转型
php函数之strtr和str_replace的用法详解以及效率分析原创

目录一. str_repalce()用法二. strtr()用法三. 效率对比四. 总结 PHP中主要用strtr()和str_repalce()这两个函数替换字符串和数组,但你们都知道他们这两个函数的区别和用法吗?有不少文章在说使用strtr函数比str_replace快4倍,那为什么很多时候都在用str_replace,到底应该使用哪个函数呢? 一. str_repalce()用法 str_replace(find,replace,string,count)find:规定要查找的字符

Ajax详解及其案例分析

相关推荐

随机推荐