AJAX+JSP+SERVLET入门例子



AJAX+JSP+SERVLET入门例子

1.       servlet Hello.java

package com;

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;

public class Hello extends HttpServlet {

/**

* Constructor of the object.

*/

public Hello() {

super();

}

/**

* Destruction of the servlet. <br>

*/

public void destroy() {

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

// Put your code here

}

/**

* The doGet method of the servlet. <br>

*

* This method is called when a form has its tag value method equals to get.

*

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

*/

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String date = request.getParameter(“birthDate”);

System.out.println(date);

this.returnResultXml2(response, “<message> hello,world ” + date + “你好! </message>”);

//response.setContentType(“text/html”);

/*PrintWriter out = response.getWriter();

out.println(“<!DOCTYPE HTML PUBLIC “”-//W3C//DTD HTML 4.01 Transitional//EN”">”);

out.println(“<HTML>”);

out.println(“  <HEAD><TITLE>A Servlet</TITLE></HEAD>”);

out.println(“  <BODY>”);

out.print(“    This is “);

out.print(this.getClass());

out.println(“, using the GET method”);

out.println(“  </BODY>”);

out.println(“</HTML>”);

out.flush();

out.close();*/

}

/**

* The doPost method of the servlet. <br>

*

* This method is called when a form has its tag value method equals to post.

*

* @param request the request send by the client to the server

* @param response the response send by the server to the client

* @throws ServletException if an error occurred

* @throws IOException if an error occurred

*/

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request,response);

}

/**

* Initialization of the servlet. <br>

*

* @throws ServletException if an error occure

*/

public void init() throws ServletException {

// Put your code here

}

public void returnResultXml2(HttpServletResponse response, String resultxml)

{

try

{

response.setContentType(“text/xml; charset=UTF-8″);

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

response.getWriter().println(resultxml);

response.getWriter().flush();

} catch (IOException e)

{

e.printStackTrace();

}

}

}

2.       jsp index.jsp

<%@ page language=”java” %>

<%@ page contentType=”text/html; charset=GB2312″%>

<html>

<head>

<title>hello World</title>

</head>

<body bgcolor=”#ffffff”>

<center>


<font size=”5″ color=”blue”>各种字体大小显示</font><br><a href=”validdate.html”>validate</a><br>

</center>

<br>

<hr>

<br>

<div align=”center”>

<%

for(int i=1; i<=6;i++)

out.println(“<h” + i + “>hell  World!</h” + i + “>”);

%>

<div>

</body>

</html>

3.       xml  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”>

<servlet>

<servlet-name>ValidationServlet</servlet-name>

<servlet-class>ajaxbook.chap4.ValidationServlet</servlet-class>

</servlet>

<servlet>

<servlet-name>Hello</servlet-name>

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

</servlet>

<servlet-mapping>

<servlet-name>Hello</servlet-name>

<url-pattern>/hello</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

4.       html validate.html

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

<html>

<head>

<title>Using Ajax for validation</title>

<script type=”text/javascript”>

var xmlHttp;

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

}

function validate() {

createXMLHttpRequest();

var date = document.getElementById(“birthDate”);

alert(validate);

var url = “hello?birthDate=” + escape(date.value);

xmlHttp.open(“GET”, url, true);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

function callback() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

alert(xmlHttp.responseText);

var message = xmlHttp.responseXML.getElementsByTagName(“message”);

var value = message[0].firstChild.nodeValue;

setMessage(value,”true”);

}

}

}

function setMessage(message, isValid) {

var messageArea = document.getElementById(“dateMessage”);

var fontColor = “red”;if (isValid == “true”) {

fontColor = “green”;

}

messageArea.innerHTML = “<font color=” + fontColor + “>” + message + ” </font>”;

}

</script>

</head>

<body>

<h1>

Ajax Validation Example

</h1>

Birth date:

<input type=”text” size=”10″ id=”birthDate” ondblclick=”" />

<input type=”button” value=”press” onclick=”validate()” />

<div id=”dateMessage”></div>

</body>

</html>

5.       配置服务器

Tomcat server : Enable

填写路径

JDK              :填写名称和路径

Launch mode: debug mode;

6.       设置项目项目与服务器的关联

Project Deployment

选择tomcat服务。