OGeek|极客世界-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

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

2022-2-5 16:58| 发布者: 菜鸟教程小白| 查看: 235| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 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> 