快捷導(dǎo)航

Ajax局部刷新應(yīng)用案例---簡(jiǎn)單登錄

更新時(shí)間：2013年12月12日 17:26:17 作者：

Ajax局部刷新在之前的文章中也有介紹過(guò)，下面以一個(gè)登錄的例子為大家介紹下其具體的使用

二話不說(shuō)了，直接給代碼，相信需要的都是代碼而不是廢話一堆……
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>" + "對(duì)不起,'yangjinde'此名已經(jīng)注冊(cè)" + "</content>"); 
} else { 
out.println("<content>" + "可以注冊(cè)哦" + "</content>"); 
} 
out.println("</pront>"); 
out.close(); 
} 
} 

2.jsp代碼：

復(fù)制代碼代碼如下:

 
<%@ 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> 
//設(shè)一個(gè)變量 
var XMLHttpReq=false; 
//創(chuàng)建一個(gè)XMLHttpRequest對(duì)象 
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){} 
} 
} 
} 
//發(fā)送請(qǐng)求函數(shù) 
function send(url){ 
createXMLHttpRequest(); 
XMLHttpReq.open("GET",url,true); 
XMLHttpReq.onreadystatechange=proce; //指定響應(yīng)的函數(shù) 
XMLHttpReq.send(null); //發(fā)送請(qǐng)求 
} 
function proce(){ 
if(XMLHttpReq.readyState==4){ //對(duì)象狀態(tài) 
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("不好意思，所請(qǐng)求的頁(yè)面有異常"); 
} 
} 
} 
//身份驗(yàn)證 
function check(){ 
var name=document.getElementById("name").value; 
if(name==""){ 
alert("請(qǐng)輸入內(nèi)容哦"); 
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="點(diǎn)我試試看" onClick="check()"/> 
</td> 
</tr> 
<tr><td><div id="data">等下我會(huì)變哦??！</div></td></tr> 
</form> 
</body> 
</html> 

3.xml配置文件代碼：

復(fù)制代碼代碼如下:

 
<?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> 