ajax實例01

ajax 實例
項目結構圖:
 

各文件內容如下
Ajax.js:
 
var xhr; 
 
function createXHR(){ 
 var xhr; 
 try{ 
  xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
  return xhr; 
 }catch(e){ 
  try{ 
   xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
   return xhr; 
  }catch(ee){ 
   xhr=false; 
  } 
 } 
 if(!xhr&&typeof XMLHttpRequest!='undefined'){ 
  xhr=new XMLHttpRequest(); 
  return xhr; 
 } 
 return xhr; 

 
AjaxServlet01.java:
 
package com.ajax.hw.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; 
 
/** 
 * Servlet implementation class AjaxServlet01 
 */
public class AjaxServlet01 extends HttpServlet 

    private static final long serialVersionUID = 1L; 
 
    public AjaxServlet01() 
    { 
        super(); 
    } 
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
    { 
        System.out.println("request!"); 
        response.setContentType("text/html; charset=UTF-8"); 
        PrintWriter out = response.getWriter(); 
        out.print("來自servlet的信息!"); 
    } 
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, 
            IOException 
    { 
        doGet(request, response); 
    } 
 

test01.jsp:
 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/Ajax.js"></script>
<script type="text/javascript">
    var xhr = createXHR(); 
    xhr.onreadystatechange = onResponse; 
    xhr.open("GET", "AjaxServlet01", true); 
    xhr.send(null); 
    function onResponse2(){ 
//alert(xhr); 
        } 
    function onResponse() { 
        var obj = xhr; 
        if (obj.readyState == 0) { 
            document.getElementById("copy").innerHTML = "Sending Request…"; 
        } 
        if (obj.readyState == 1) { 
            document.getElementById("copy").innerHTML = "Loading Response…"; 
        } 
        if (obj.readyState == 2) { 
            document.getElementById("copy").innerHTML = "Response Loaded…"; 
        } 
        if (obj.readyState == 3) { 
            document.getElementById("copy").innerHTML = "Response Ready…"; 
        } 
        if (obj.readyState == 4) { 
            if (obj.status == 200) { 
 
                var response = obj.responseText; 
                alert("獲得的值: "+response); 
                alert("123"); 
                return true; 
            } else if (obj.status == 404) { 
                // 添加一個定制消息或把用戶重定 向到另外一個頁面 
                document.getElementById("copy").innerHTML = "File not found"; 
            } else { 
                document.getElementById("copy").innerHTML = "There was a problem retrieving the XML."; 
            } 
        } 
    }; 
</script>
</head>
<body>
<span id="copy">
</span>
 
</body>
</html>
 
web.xml:
 
<?xml version="1.0" encoding="UTF-8"?>
<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">
  <display-name>ajax00001</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>AjaxServlet01</display-name>
    <servlet-name>AjaxServlet01</servlet-name>
    <servlet-class>com.ajax.hw.web.AjaxServlet01</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxServlet01</servlet-name>
    <url-pattern>/AjaxServlet01</url-pattern>
  </servlet-mapping>
</web-app>

作者“whuang”

You May Also Like