首页 > 程序开发 > web前端 > JavaScript >

ajax实例01

2011-09-20

ajax 实例项目结构图:各文件内容如下Ajax.js:var xhr;function createXHR(){var xhr;try{ xhr=new ActiveXObject("Msxml2.XMLHTTP"); return xhr;}catch(e){ try{ xhr=new ActiveXObject("Microsof...

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”

相关文章
最新文章
热点推荐