六月丁香婷婷在线,欧美亚洲一二三区,久久激情五月婷婷

主頁(yè) > 知識(shí)庫(kù) > Ajax詳解及其案例分析

Ajax詳解及其案例分析

1 獲得Ajax對(duì)象

1.1 問(wèn)題

如何獲得XmlHttpRequest對(duì)象。

1.2 方案

區(qū)分瀏覽器，使用不同的獲取方式。

1.3 步驟

步驟一：新建ajax01.html頁(yè)面

新建一個(gè)Web工程，在WebRoot下新建ajax01.html頁(yè)面。在script>標(biāo)記內(nèi)編寫(xiě)JavaScript代碼實(shí)現(xiàn)獲取Ajax對(duì)象。

script type="text/javascript">
      /*獲取Ajax對(duì)象*/
      function getXhr(){
        var xhr = null;
        //確保IE7,IE8，F(xiàn)ireFox下可以運(yùn)行
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          //確保IE6可以運(yùn)行，無(wú)視更古老的IE瀏覽器
          xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;  
        //更簡(jiǎn)易的寫(xiě)法
        //xhr = window.XMLHttpRequest?
        //  new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");  
      }  
    /script>

步驟二：部署項(xiàng)目訪問(wèn)ajax01.html頁(yè)面

訪問(wèn)頁(yè)面如圖-2所示。

圖 – 2

點(diǎn)擊鏈接：

圖 - 3

使用IE測(cè)試結(jié)果如圖-4所示。

圖 – 4

注意：本次測(cè)試使用的是IE11，但I(xiàn)E的早期5.5，6.0版本創(chuàng)建的都是ActiveXObject類(lèi)型的。從IE7開(kāi)始支持創(chuàng)建XMLHttpRequest的方式來(lái)獲取Ajax對(duì)象。

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對(duì)象*/
      function getXhr(){
        var xhr = null;
        //確保IE7,IE8，F(xiàn)ireFox下可以運(yùn)行
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          //確保IE6可以運(yùn)行，無(wú)視更古老的IE瀏覽器
          xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;  
        //更簡(jiǎn)易的寫(xiě)法
        //xhr = window.XMLHttpRequest?
        //  new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");  
      }  
    /script>
  /head>
  body>
    !-- 獲取XMLHttpRequest對(duì)象 -->
    a href="javascript:;" onclick="alert(getXhr());"> 獲取Ajax對(duì)象 /a>
  /body>
/html>

2 使用Ajax對(duì)象發(fā)送GET請(qǐng)求

2.1 問(wèn)題

使用Ajax對(duì)象發(fā)送GET類(lèi)型的請(qǐng)求，從服務(wù)器端獲取一小段文本。

2.2 方案

遵循創(chuàng)建Ajax對(duì)象，創(chuàng)建請(qǐng)求，設(shè)置回調(diào)函數(shù)，發(fā)送請(qǐng)求的步驟來(lái)完成一次異步請(qǐng)求。

2.3 步驟

步驟一：新建ajax02.html頁(yè)面

步驟二：添加getText()方法，并補(bǔ)充超鏈接對(duì)該方法的調(diào)用

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對(duì)象
        var xhr = getXhr();   
        //2.設(shè)置回調(diào)函數(shù)  
        xhr.onreadystatechange=function(){        
          if(xhr.readyState==4  xhr.status==200){
            var txt = xhr.responseText;
            alert(txt);
          }
        };
        //3.創(chuàng)建請(qǐng)求
        xhr.open("get","get_text.do",true); 
        //4.發(fā)送請(qǐng)求
        xhr.send(null);
      }  
    /script>
  /head>
  body>
    !-- 獲取服務(wù)器端一小段文本 -->
    a href="javascript:;" onclick="getText()">獲取文本/a>
  /body>
/html>

步驟三：編寫(xiě)ActionServlet類(lèi)

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();
    //獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(
        uri.lastIndexOf("/"),
        uri.lastIndexOf("."));
    if(path.equals("/get_text")){//get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    }
    out.close();
  }

}

步驟四：部署、運(yùn)行，查看結(jié)果

點(diǎn)擊鏈接：

2.4 完整代碼

ajax02.html頁(yè)面代碼：

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對(duì)象

      var xhr = getXhr();  

      //2.設(shè)置回調(diào)函數(shù)  

      xhr.onreadystatechange=function(){        

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

          var txt = xhr.responseText;

          alert(txt);

        }

      };

//3.創(chuàng)建請(qǐng)求

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

      //4.發(fā)送請(qǐng)求

      xhr.send(null);

    } 

  /script>

 /head>

 body>

  !-- 獲取服務(wù)器端一小段文本 -->

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

 /body>

/html>

ActionServlet.java頁(yè)面代碼：

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();

    //獲取請(qǐng)求資源路徑

    String uri = request.getRequestURI();

    String path = uri.substring(

        uri.lastIndexOf("/"),

        uri.lastIndexOf("."));

    if(path.equals("/get_text")){//get請(qǐng)求

      out.println("來(lái)自星星的你");

    }

    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對(duì)象發(fā)送POST請(qǐng)求

3.1 問(wèn)題

使用Ajax對(duì)象發(fā)送POST類(lèi)型的請(qǐng)求，并向服務(wù)器提交一小段文本，顯示從服務(wù)器端返回的文本。

3.2 方案

遵循GET請(qǐng)求方式的4步基礎(chǔ)上，多增加一個(gè)設(shè)定，設(shè)定請(qǐng)求頭中的content-type屬性的值為application/x-www-form-urlencoded

3.3 步驟

步驟一：新建my.js文件

在WebRoot節(jié)點(diǎn)下，新增一個(gè)文件夾“js”。在該文件夾中新增一個(gè)文件，名為my.js。將獲取XMLHttpRequest對(duì)象的方法拷貝到該文件中，便于更多頁(yè)面重用該方法。

my.js 代碼：

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

步驟二：新建ajax03.html頁(yè)面

步驟三：編寫(xiě)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對(duì)象發(fā)送POST類(lèi)型請(qǐng)求，并獲取文本 -->
    input type="button" onclick="getText()" value="POST請(qǐng)求" />
  /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();
    //獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(
        uri.lastIndexOf("/"),
        uri.lastIndexOf("."));
    if(path.equals("/get_text")){//get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    }else if(path.equals("/post_text")){//post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + name);
    }    
    out.close();
  }
}

步驟五：運(yùn)行，查看結(jié)果

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對(duì)象發(fā)送POST類(lèi)型請(qǐng)求，并獲取文本 -->

 input type="button" onclick="getText()" value="POST請(qǐng)求"/>

 /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();
    // 獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    if (path.equals("/get_text")) {// get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    } else if (path.equals("/post_text")) {// post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + 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校驗(yàn)用戶名

4.1 問(wèn)題

實(shí)現(xiàn)注冊(cè)功能中，用戶名是否可用的校驗(yàn)。

4.2 方案

填寫(xiě)完用戶名后，通過(guò)點(diǎn)擊后面的按鈕進(jìn)行驗(yàn)證。并顯示服務(wù)器返回的說(shuō)明信息。

4.3 步驟

步驟一：新建regist.html文件

body>
    !-- 驗(yàn)證注冊(cè)信息中的用戶名是否可用 -->
    form action="" method="post">
      fieldset>
        legend>
          注冊(cè)信息
        /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="注冊(cè)" />
      /fieldset>
    /form>
  /body>

步驟二：編寫(xiě)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=“正在檢查“；這行代碼在服務(wù)器還沒(méi)有返回信息之前，為用戶提供良好的交互體驗(yàn)。

步驟三：修改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();
    // 獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    if (path.equals("/get_text")) {// get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    } else if (path.equals("/post_text")) {// post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + name);
    } else if (path.equals("/check_name")) {// 檢查用戶名
      String name = request.getParameter("uname");
      // 模擬網(wǎng)絡(luò)延遲的操作
      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();
  }

}

說(shuō)明：

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

這倆句的順序不能顛倒，不然沒(méi)有想要的效果。

步驟四：運(yùn)行，查看結(jié)果

輸入不可用的用戶名：

輸入可用的用戶名

完整代碼

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>
    !-- 驗(yàn)證注冊(cè)信息中的用戶名是否可用 -->
    form action="" method="post">
      fieldset>
        legend>
          注冊(cè)信息
        /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="注冊(cè)" />
      /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();
    // 獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    if (path.equals("/get_text")) {// get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    } else if (path.equals("/post_text")) {// post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + name);
    } else if (path.equals("/check_name")) {// 檢查用戶名
      String name = request.getParameter("uname");
      // 模擬網(wǎng)絡(luò)延遲的操作
      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;
}

說(shuō)明：

// 模擬網(wǎng)絡(luò)延遲的操作
if (1 == 1) {
try {
Thread.sleep(6000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}

這個(gè)是為了模擬一個(gè)等待的效果。

5 POST請(qǐng)求時(shí)的亂碼處理

5.1 問(wèn)題

在上例中，如果填寫(xiě)的用戶名為中文信息時(shí)，就會(huì)出現(xiàn)下圖所示的結(jié)果。在控制臺(tái)中打印服務(wù)器端獲取的數(shù)據(jù)為亂碼。但火狐瀏覽器提交的中文可以被服務(wù)器端正確識(shí)別。原因是火狐會(huì)告訴服務(wù)器端以什么方式解碼。而IE瀏覽器和Chrome瀏覽器提交的數(shù)據(jù)，到了服務(wù)器端都是以默認(rèn)解碼方式 ISO-8859-1來(lái)解析的，而提交時(shí)瀏覽器依據(jù)meta標(biāo)記指定的UTF-8的方式進(jìn)行的編碼，編碼解碼不一致就會(huì)導(dǎo)致亂碼出現(xiàn)。如何解決？

5.2 方案

在獲取表單提交的數(shù)據(jù)之前，設(shè)置服務(wù)器端的解碼方式為UTF-8即可。

5.3 步驟

步驟一：修改ActionServlet類(lèi)

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

復(fù)制代碼代碼如下:

request.setCharacterEncoding("UTF-8");

步驟二：重新運(yùn)行regist.html頁(yè)面

重新運(yùn)行程序，分別使用Chrome、IE、FireFox瀏覽器來(lái)訪問(wèn)regist.html頁(yè)面，測(cè)試中文情況，可以正確得到表單以POST方式提交的中文字符了。

6 GET請(qǐng)求時(shí)的亂碼處理

6.1 問(wèn)題

在regist.html頁(yè)面中，如果將表單的提交方式更換為get，并且服務(wù)器端依然保留UTF-8的解碼代碼，運(yùn)行程序時(shí)，依然會(huì)有如圖所示的亂碼問(wèn)題。如何解決？

6.2 方案

產(chǎn)生亂碼的原因是，以GET方式提交的數(shù)據(jù)存在于提交的消息頭中URL中，HTTP協(xié)議對(duì)于URI的編碼方式為UTF-8，但是URI后面的查詢字符串的編碼方式卻是ISO-8859-1。到了服務(wù)器端，容器針對(duì)URI的解碼方式是ISO-8859-1，依然解析不了中文，所以，會(huì)出現(xiàn)亂碼。為了能夠支持地址中查詢字符串的中文格式，需要在瀏覽器端和服務(wù)器端同時(shí)進(jìn)行支持UTF-8格式編碼、解碼的設(shè)置。

6.3 步驟

步驟一：修改tomcat的默認(rèn)解碼設(shè)置

修改tomcat安裝路徑下conf/server.xml文件。找到Connector節(jié)點(diǎn)后，增加URIEncoding="UTF-8"這個(gè)屬性即可。

步驟二：新建regist01.html頁(yè)面

新建regist01.html文件，表單內(nèi)容參考regist.html，Ajax的請(qǐng)求修改為GET方式，為了讓URL整體都使用 UTF-8的方式進(jìn)行編碼，需要使用JavaScript語(yǔ)言中的encodeURI（）方法，所以在open方法創(chuàng)建請(qǐng)求時(shí)，第二個(gè)URI參數(shù)要使用 encodeURI方法進(jìn)行編碼。如圖-27所示。

步驟三： ActionServlet保持不變

步驟四：運(yùn)行，查看結(jié)果

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方式提交中文用戶名進(jìn)行驗(yàn)證 -->
    form action="" method="post">
      fieldset>
        legend>注冊(cè)信息/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="注冊(cè)"/>
      /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();
    // 獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    if (path.equals("/get_text")) {// get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    } else if (path.equals("/post_text")) {// post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + name);
    } else if (path.equals("/check_name")) {// 檢查用戶名
      String name = request.getParameter("uname");
      // 模擬網(wǎng)絡(luò)延遲的操作
      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實(shí)現(xiàn)級(jí)聯(lián)的下拉列表

7.1 問(wèn)題

實(shí)現(xiàn)市區(qū)的級(jí)聯(lián)下拉列表。即，選擇城市后，動(dòng)態(tài)加載該城市包含的區(qū)域信息。

7.2 方案

下拉列表發(fā)生onchange事件時(shí)，將選中的城市對(duì)應(yīng)的value發(fā)送給服務(wù)器端，服務(wù)器端收到這個(gè)城市拼音縮寫(xiě)后，進(jìn)行比對(duì)，返回區(qū)域的組合信息。客戶端收到信息后分別按照“；“和”，“進(jìn)行分割，然后構(gòu)建option對(duì)象，添加到區(qū)域?qū)?yīng)的下拉列表中。

7.3 步驟

步驟一：修改my.js文件

修改my.js文件，增加兩個(gè)便于定位html頁(yè)面中元素的方法，以及便于讀取元素value屬性的方法。

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

步驟二：新建select.html文件

編寫(xiě)頁(yè)面中的下拉列表。并且在onchange事件時(shí)，將選中項(xiàng)的value屬性作為參數(shù)傳給getCity方法。

body>
    !-- Ajax實(shí)現(xiàn)級(jí)聯(lián)下拉列表 -->
    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>

步驟三：編寫(xiě)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(',');
            /*構(gòu)造一個(gè)Option對(duì)象 */
            var op = new Option(str1s[0], str1s[1]);
            /* options是select的一個(gè)屬性,
               其值是一個(gè)數(shù)組。數(shù)組中的元素是Option對(duì)象。
            */
            $('s2').options[i] = op;
          }
        }
      };
     xhr.open('get', 'getCity.do?name=' + v1, true);
      xhr.send(null);
    }
  /script>

步驟四：修改ActionServlet，添加對(duì)getCity.do的請(qǐng)求處理

else if(path.equals("/getCity")){//城市列表聯(lián)動(dòng)
      String name = request.getParameter("name");
      if("bj".equals(name)){
        out.println("朝陽(yáng),cy;東城,dc");
      }else if("sh".equals(name)){
        out.println("靜安,ja;黃浦,hp;浦東新,pdx");
      }else{
        out.println("白云,by;番禺,py");
      }
    }

步驟五：訪問(wèn)，查看運(yùn)行結(jié)果

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(',');
            /*構(gòu)造一個(gè)Option對(duì)象 */
            var op = new Option(str1s[0], str1s[1]);
            /* options是select的一個(gè)屬性,
               其值是一個(gè)數(shù)組。數(shù)組中的元素是Option對(duì)象。
            */
            $('s2').options[i] = op;
          }
        }
      };
     xhr.open('get', 'getCity.do?name=' + v1, true);
      xhr.send(null);
    }
  /script>
  /head>
  body>
    !-- Ajax實(shí)現(xiàn)級(jí)聯(lián)下拉列表 -->
    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();
    // 獲取請(qǐng)求資源路徑
    String uri = request.getRequestURI();
    String path = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
    if (path.equals("/get_text")) {// get請(qǐng)求
      out.println("get請(qǐng)求-服務(wù)器返回的數(shù)據(jù)");
    } else if (path.equals("/post_text")) {// post請(qǐng)求
      String name = request.getParameter("uname");
      System.out.println(name);
      out.println("又來(lái)了一次的" + name);
    } else if (path.equals("/check_name")) {// 檢查用戶名
      String name = request.getParameter("uname");
      // 模擬網(wǎng)絡(luò)延遲的操作
      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")) {// 城市列表聯(lián)動(dòng)
      String name = request.getParameter("name");
      if ("bj".equals(name)) {
        out.println("朝陽(yáng),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

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

php簡(jiǎn)單實(shí)現(xiàn)查詢數(shù)據(jù)庫(kù)返回json數(shù)據(jù)
Ajax方式實(shí)現(xiàn)定期更新頁(yè)面某塊內(nèi)容的方法
ajax添加數(shù)據(jù)后如何在網(wǎng)頁(yè)顯示

標(biāo)簽：揭陽(yáng) 商洛辛集咸寧佛山股票紅河荊州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Ajax詳解及其案例分析》，本文關(guān)鍵詞 Ajax,詳解,及其,案例分析,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。