Ajax局部刷新应用案例---简单登录-巨人网络通讯

Ajax局部刷新应用案例---简单登录

二话不说了，直接给代码，相信需要的都是代码而不是废话一堆……
1.java代码：

复制代码代码如下:

 
package tt; 

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 TestA extends HttpServlet { 

private static final long serialVersionUID = -7999241892841130740L; 

protected void doGet(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
request.setCharacterEncoding("utf-8"); 
String name = request.getParameter("name"); 

response.setContentType("text/xml; charset=utf-8"); 
response.setHeader("Cache-Control", "no-cache"); 
PrintWriter out = response.getWriter(); 
out.println("pront>"); 
if (name.equals("yangjinde")) { 
out.println("content>" + "对不起,'yangjinde'此名已经注册" + "/content>"); 
} else { 
out.println("content>" + "可以注册哦" + "/content>"); 
} 
out.println("/pront>"); 
out.close(); 
} 
} 

2.jsp代码：

复制代码代码如下:

 
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
html> 
head> 
base href="%=basePath%>"> 

title>My JSP 'index.jsp' starting page/title> 
meta http-equiv="pragma" content="no-cache"> 
meta http-equiv="cache-control" content="no-cache"> 
meta http-equiv="expires" content="0"> 
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
meta http-equiv="description" content="This is my page"> 
script> 
//设一个变量 
var XMLHttpReq=false; 
//创建一个XMLHttpRequest对象 
function createXMLHttpRequest(){ 
if(window.XMLHttpRequest){ //Mozilla 
XMLHttpReq=new XMLHttpRequest(); 
} 
else if(window.ActiveXObject){ 
try{ 
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try{ 
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){} 
} 
} 
} 
//发送请求函数 
function send(url){ 
createXMLHttpRequest(); 
XMLHttpReq.open("GET",url,true); 
XMLHttpReq.onreadystatechange=proce; //指定响应的函数 
XMLHttpReq.send(null); //发送请求 
} 
function proce(){ 
if(XMLHttpReq.readyState==4){ //对象状态 
if(XMLHttpReq.status==200){//信息已成功返回，开始处理信息 
var res=XMLHttpReq.responseXML.getElementsByTagName("content")[0].firstChild.data; 
window.alert(res); 
document.getElementById("data").innerHTML = res; 
document.getElementById("name").value = res; 
}else{ 
window.alert("不好意思，所请求的页面有异常"); 
} 
} 
} 
//身份验证 
function check(){ 
var name=document.getElementById("name").value; 
if(name==""){ 
alert("请输入内容哦"); 
return false; 
} 
else{ 
send('login?name='+name); 
} 
} 

/script> 
/head> 

body> 
form action="login" method="post"> 
tr>td>姓名: input id="name" type="text" name="name"/> 
input type="button" value="点我试试看" onClick="check()"/> 
/td> 
/tr> 
tr>td>div id="data">等下我会变哦！！/div>/td>/tr> 
/form> 
/body> 
/html> 

3.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>login/servlet-name> 
servlet-class>tt.TestA/servlet-class> 
/servlet> 

servlet-mapping> 
servlet-name>login/servlet-name> 
url-pattern>/login/url-pattern> 
/servlet-mapping> 
welcome-file-list> 
welcome-file>index.jsp/welcome-file> 
/welcome-file-list> 
/web-app> 