刚开始学习AJAX，其实没什么难的，主要的思想就是异步传输，不用整个刷新页面，就是JAVASCRIPT技术，新瓶装老酒罢了；一般分三个步骤走：1、Jsp页面 2、Servlet 3、Javascript
Step1 Create a page: login.jsp
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Login
</title>
<script src="login.js" type="text/javascript"></script>
</head>
<body bgcolor="#ffffff">
<h1 align="center">
Login
</h1>
<div>
<table>
<tr><td>Username:</td>
<td><input id="username" type="text"/></td>
</tr>
<tr><td>Password:</td>
<td><input id="password" type="text"/></td>
<td id="user"></td></tr>
</table>
<br/>
<input id="submit" type="button" value="Submit" onclick="linkServer();">
<input type="button" value="Reset">
</div>
</body>
</html>
这里不用Form，用JS。
Step2 Create a javascript: login.js
var xmlHttp;
function linkServer(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert ("Your browser does not support AJAX!");
return;
}
var url="login"+"?"+"username="+document.getElementById("username").value+
"&"+"password="+document.getElementById("password").value;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4){
alert("xmlState:"+xmlHttp.status);
alert("xmlHttp.responseText:"+xmlHttp.responseText);
if(xmlHttp.responseText=="DONE"){
document.getElementById("user").innerHTML="(登录成功)";
}
else
document.getElementById("user").innerHTML="(用户名或密码错误)";
}
}
//获得HTTP对象
function GetXmlHttpObject(){
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Step3 Create a java servlet: Login.java
package com.service;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class Login extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";
//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
String u1 = request.getParameter("username");
String p1 = request.getParameter("password");
System.out.println("u1:" + u1);
System.out.println("u2:" + p1);
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
//下面就可以数据库查询，这里简单的作个判断
if((u1!=null&&u1.equals("hello"))&&((p1!=null&&p1.equals("123456"))))
out.print("DONE");
else{
out.print("FAIL");
}
out.close();
}
//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doGet(request, response);
}
}
posted on 2007-09-12 11:51
蒋家狂潮 阅读(201)
评论(0) 编辑 收藏 所属分类:
JWeb