ajax

1]写index.jsp文件

<%@ page contentType="text/html;charset=gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

</head>

<body>

var req;

function validate() {

var idField = document.getElementByIdx("userid");

var url = "servlet/ValidateServlet?id=" + escape(idField.value);

if (window.XMLHttpRequest) {

alert("0");

req = new XMLHttpRequest();

}else if (window.ActiveXObject) {

alert("1");

req = new ActiveXObject("Microsoft.XMLHTTP");

}

if(req){

req.open("GET",url,true);

req.onreadystatechange = callback;

req.send(null);

}

function callback() {

if (req.readyState == 4) {

if (req.status == 200) {

parseMessage();

// update the HTML DOM based on whether or not message is valid

}else{

alert ("Not able to retrieve description" + req.statusText);

}

function parseMessage() {

var message = req.responseXML.getElementsByTagName_r("message")[0];

var name = req.responseXML.getElementsByTagName_r("name")[0];

setMessage(message.firstChild.data,name.firstChild.data);

}

function setMessage(message,name) {

var userMessageElement = document.getElementByIdx("userIdMessage");

userMessageElement.innerHTML = "<font color=\"red\">" + message + " you "+name+"</font>";

}

</script>

<input type="text"

size="20"

id="userid"

name="id"

onkeyup="validate();">

</body>

</html>

[2] 写servlet/ValidateServlet.java类

package com;//com包需要自己创建.

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import javax.servlet.ServletConfig;

import javax.servlet.ServletContext;

import javax.servlet.servletexception;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ValidateServlet extends HttpServlet {

private ServletContext context;

private HashMap users = new HashMap();

public ValidateServlet() {

super();

}

public void destroy() {

super.destroy(); // Just puts "destroy" string in log

// Put your code here

}

public void doGet(HttpServletRequest request,HttpServletResponse response)

throws servletexception,IOException {

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

String targetId = request.getParameter("id");

System.out.println(targetId.trim());

if ((targetId != null) && users.containsKey(targetId.trim())) {

response.getWriter().write("<info><message>welcome</message><name>sdl</name></info>");

} else {

response.getWriter().write("<info><message>kill</message><name>bush</name></info>");

System.out.print("invalid");

}

public void init(ServletConfig config) throws servletexception {

this.context = config.getServletContext();

users.put("greg","account data");

users.put("duke","account data");

}

[3]写web.xml文件

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.4"

xmlns="http://java.sun.com/xml/ns/j2ee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<description>This is the description of my J2EE component</description>

<display-name>This is the display name of my J2EE component</display-name>

<servlet-name>ValidateServlet</servlet-name>

<servlet-class>com.ValidateServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>ValidateServlet</servlet-name>

<url-pattern>/servlet/ValidateServlet</url-pattern>

</servlet-mapping>

</web-app>

[4]说明：

你可以在IE或FireFox里测试，在文本输入框里输入，当按键抬起，会在层中显示”kill you bush”。其中index.htm中的styles.css只是美化页面，没有列出来源代码。如果在servlet向客户端输出中文，需要编码转换。

相关推荐