ajax 实例

项目结构图：

 

各文件内容如下

Ajax.js：

 

 
    
     
         
  1. var xhr;  
    2.  
         
  2.  
    3.  
         
  3. function createXHR(){  
    4.  
         
  4.  var xhr;  
    5.  
         
  5.  try{  
    6.  
         
  6.   xhr=new ActiveXObject("Msxml2.XMLHTTP");  
    7.  
         
  7.   return xhr;  
    8.  
         
  8.  }catch(e){  
    9.  
         
  9.   try{  
    10.  
         
  10.    xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    11.  
         
  11.    return xhr;  
    12.  
         
  12.   }catch(ee){  
    13.  
         
  13.    xhr=false;  
    14.  
         
  14.   }  
    15.  
         
  15.  }  
    16.  
         
  16.  if(!xhr&&typeof XMLHttpRequest!='undefined'){  
    17.  
         
  17.   xhr=new XMLHttpRequest();  
    18.  
         
  18.   return xhr;  
    19.  
         
  19.  }  
    20.  
         
  20.  return xhr;  
    21.  
         
  21. }  
    22.  
         
  22.  
    23.  
        
 
    
AjaxServlet01.java:
 
    
 
 
    
 
    
     
         
  1. package com.ajax.hw.web;  
    2.  
         
  2.  
    3.  
         
  3. import java.io.IOException;  
    4.  
         
  4. import java.io.PrintWriter;  
    5.  
         
  5.  
    6.  
         
  6. import javax.servlet.ServletException;  
    7.  
         
  7. import javax.servlet.http.HttpServlet;  
    8.  
         
  8. import javax.servlet.http.HttpServletRequest;  
    9.  
         
  9. import javax.servlet.http.HttpServletResponse;  
    10.  
         
  10.  
    11.  
         
  11. /**  
    12.  
         
  12.  * Servlet implementation class AjaxServlet01  
    13.  
         
  13.  */ 
    14.  
         
  14. public class AjaxServlet01 extends HttpServlet  
    15.  
         
  15. {  
    16.  
         
  16.     private static final long serialVersionUID = 1L;  
    17.  
         
  17.  
    18.  
         
  18.     public AjaxServlet01()  
    19.  
         
  19.     {  
    20.  
         
  20.         super();  
    21.  
         
  21.     }  
    22.  
         
  22.  
    23.  
         
  23.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException  
    24.  
         
  24.     {  
    25.  
         
  25.         System.out.println("request!");  
    26.  
         
  26.         response.setContentType("text/html; charset=UTF-8");  
    27.  
         
  27.         PrintWriter out = response.getWriter();  
    28.  
         
  28.         out.print("来自servlet的信息!");  
    29.  
         
  29.     }  
    30.  
         
  30.  
    31.  
         
  31.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,  
    32.  
         
  32.             IOException  
    33.  
         
  33.     {  
    34.  
         
  34.         doGet(request, response);  
    35.  
         
  35.     }  
    36.  
         
  36.  
    37.  
         
  37. }  
    38.  
        
 
    
test01.jsp:
 
    
 
 
    
 
    
     
         
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
    2.  
         
  2.     pageEncoding="UTF-8"%> 
    3.  
         
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    4.  
         
  4. <html> 
    5.  
         
  5. <head> 
    6.  
         
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    7.  
         
  7. <title>Insert title here</title> 
    8.  
         
  8. <script type="text/javascript" src="js/Ajax.js"></script> 
    9.  
         
  9. <script type="text/javascript"> 
    10.  
         
  10.     var xhr = createXHR();  
    11.  
         
  11.     xhr.onreadystatechange = onResponse;  
    12.  
         
  12.     xhr.open("GET", "AjaxServlet01", true);  
    13.  
         
  13.     xhr.send(null);  
    14.  
         
  14.     function onResponse2(){  
    15.  
         
  15. //alert(xhr);  
    16.  
         
  16.         }  
    17.  
         
  17.     function onResponse() {  
    18.  
         
  18.         var obj = xhr;  
    19.  
         
  19.         if (obj.readyState == 0) {  
    20.  
         
  20.             document.getElementById("copy").innerHTML = "Sending Request...";  
    21.  
         
  21.         }  
    22.  
         
  22.         if (obj.readyState == 1) {  
    23.  
         
  23.             document.getElementById("copy").innerHTML = "Loading Response...";  
    24.  
         
  24.         }  
    25.  
         
  25.         if (obj.readyState == 2) {  
    26.  
         
  26.             document.getElementById("copy").innerHTML = "Response Loaded...";  
    27.  
         
  27.         }  
    28.  
         
  28.         if (obj.readyState == 3) {  
    29.  
         
  29.             document.getElementById("copy").innerHTML = "Response Ready...";  
    30.  
         
  30.         }  
    31.  
         
  31.         if (obj.readyState == 4) {  
    32.  
         
  32.             if (obj.status == 200) {  
    33.  
         
  33.  
    34.  
         
  34.                 var response = obj.responseText;  
    35.  
         
  35.                 alert("获得的值： "+response);  
    36.  
         
  36.                 alert("123");  
    37.  
         
  37.                 return true;  
    38.  
         
  38.             } else if (obj.status == 404) {  
    39.  
         
  39.                 // 添加一个定制消息或把用户重定 向到另外一个页面  
    40.  
         
  40.                 document.getElementById("copy").innerHTML = "File not found";  
    41.  
         
  41.             } else {  
    42.  
         
  42.                 document.getElementById("copy").innerHTML = "There was a problem retrieving the XML.";  
    43.  
         
  43.             }  
    44.  
         
  44.         }  
    45.  
         
  45.     };  
    46.  
         
  46. </script> 
    47.  
         
  47. </head> 
    48.  
         
  48. <body> 
    49.  
         
  49. <span id="copy"> 
    50.  
         
  50. </span> 
    51.  
         
  51.  
    52.  
         
  52. </body> 
    53.  
         
  53. </html> 
    54.  
        
 
    
 
 
    
web.xml:
 
    
 
 
    
 
    
     
         
  1. <?xml version="1.0" encoding="UTF-8"?> 
    2.  
         
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> 
    3.  
         
  3.   <display-name>ajax00001</display-name> 
    4.  
         
  4.   <welcome-file-list> 
    5.  
         
  5.     <welcome-file>index.html</welcome-file> 
    6.  
         
  6.     <welcome-file>index.htm</welcome-file> 
    7.  
         
  7.     <welcome-file>index.jsp</welcome-file> 
    8.  
         
  8.     <welcome-file>default.html</welcome-file> 
    9.  
         
  9.     <welcome-file>default.htm</welcome-file> 
    10.  
         
  10.     <welcome-file>default.jsp</welcome-file> 
    11.  
         
  11.   </welcome-file-list> 
    12.  
         
  12.   <servlet> 
    13.  
         
  13.     <description></description> 
    14.  
         
  14.     <display-name>AjaxServlet01</display-name> 
    15.  
         
  15.     <servlet-name>AjaxServlet01</servlet-name> 
    16.  
         
  16.     <servlet-class>com.ajax.hw.web.AjaxServlet01</servlet-class> 
    17.  
         
  17.   </servlet> 
    18.  
         
  18.   <servlet-mapping> 
    19.  
         
  19.     <servlet-name>AjaxServlet01</servlet-name> 
    20.  
         
  20.     <url-pattern>/AjaxServlet01</url-pattern> 
    21.  
         
  21.   </servlet-mapping> 
    22.  
         
  22. </web-app> 
    23.  
        
 
    
 
 
    
在浏览器地址栏中输入：