ajax 实例

项目结构图：

 

ajax 实例01_ajax

各文件内容如下

Ajax.js：

 

  1. var xhr;  
  2.  
  3. function createXHR(){  
  4.  var xhr;  
  5.  try{  
  6.   xhr=new ActiveXObject("Msxml2.XMLHTTP");  
  7.   return xhr;  
  8.  }catch(e){  
  9.   try{  
  10.    xhr=new ActiveXObject("Microsoft.XMLHTTP");  
  11.    return xhr;  
  12.   }catch(ee){  
  13.    xhr=false;  
  14.   }  
  15.  }  
  16.  if(!xhr&&typeof XMLHttpRequest!='undefined'){  
  17.   xhr=new XMLHttpRequest();  
  18.   return xhr;  
  19.  }  
  20.  return xhr;  
  21. }  
  22.  

AjaxServlet01.java:

 

  1. package com.ajax.hw.web;  
  2.  
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.  
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.  
  11. /**  
  12.  * Servlet implementation class AjaxServlet01  
  13.  */ 
  14. public class AjaxServlet01 extends HttpServlet  
  15. {  
  16.     private static final long serialVersionUID = 1L;  
  17.  
  18.     public AjaxServlet01()  
  19.     {  
  20.         super();  
  21.     }  
  22.  
  23.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException  
  24.     {  
  25.         System.out.println("request!");  
  26.         response.setContentType("text/html; charset=UTF-8");  
  27.         PrintWriter out = response.getWriter();  
  28.         out.print("来自servlet的信息!");  
  29.     }  
  30.  
  31.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,  
  32.             IOException  
  33.     {  
  34.         doGet(request, response);  
  35.     }  
  36.  
  37. }  

test01.jsp:

 

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <html> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  7. <title>Insert title here</title> 
  8. <script type="text/javascript" src="js/Ajax.js"></script> 
  9. <script type="text/javascript"> 
  10.     var xhr = createXHR();  
  11.     xhr.onreadystatechange = onResponse;  
  12.     xhr.open("GET", "AjaxServlet01", true);  
  13.     xhr.send(null);  
  14.     function onResponse2(){  
  15. //alert(xhr);  
  16.         }  
  17.     function onResponse() {  
  18.         var obj = xhr;  
  19.         if (obj.readyState == 0) {  
  20.             document.getElementById("copy").innerHTML = "Sending Request...";  
  21.         }  
  22.         if (obj.readyState == 1) {  
  23.             document.getElementById("copy").innerHTML = "Loading Response...";  
  24.         }  
  25.         if (obj.readyState == 2) {  
  26.             document.getElementById("copy").innerHTML = "Response Loaded...";  
  27.         }  
  28.         if (obj.readyState == 3) {  
  29.             document.getElementById("copy").innerHTML = "Response Ready...";  
  30.         }  
  31.         if (obj.readyState == 4) {  
  32.             if (obj.status == 200) {  
  33.  
  34.                 var response = obj.responseText;  
  35.                 alert("获得的值： "+response);  
  36.                 alert("123");  
  37.                 return true;  
  38.             } else if (obj.status == 404) {  
  39.                 // 添加一个定制消息或把用户重定 向到另外一个页面  
  40.                 document.getElementById("copy").innerHTML = "File not found";  
  41.             } else {  
  42.                 document.getElementById("copy").innerHTML = "There was a problem retrieving the XML.";  
  43.             }  
  44.         }  
  45.     };  
  46. </script> 
  47. </head> 
  48. <body> 
  49. <span id="copy"> 
  50. </span> 
  51.  
  52. </body> 
  53. </html> 

 

web.xml:

 

  1. <?xml version="1.0" encoding="UTF-8"?> 
  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.   <display-name>ajax00001</display-name> 
  4.   <welcome-file-list> 
  5.     <welcome-file>index.html</welcome-file> 
  6.     <welcome-file>index.htm</welcome-file> 
  7.     <welcome-file>index.jsp</welcome-file> 
  8.     <welcome-file>default.html</welcome-file> 
  9.     <welcome-file>default.htm</welcome-file> 
  10.     <welcome-file>default.jsp</welcome-file> 
  11.   </welcome-file-list> 
  12.   <servlet> 
  13.     <description></description> 
  14.     <display-name>AjaxServlet01</display-name> 
  15.     <servlet-name>AjaxServlet01</servlet-name> 
  16.     <servlet-class>com.ajax.hw.web.AjaxServlet01</servlet-class> 
  17.   </servlet> 
  18.   <servlet-mapping> 
  19.     <servlet-name>AjaxServlet01</servlet-name> 
  20.     <url-pattern>/AjaxServlet01</url-pattern> 
  21.   </servlet-mapping> 
  22. </web-app> 

 

在浏览器地址栏中输入：

http://localhost:8080/ajax00001/test01.jsp