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

更新时间：2013年12月12日 17:26:17 作者：

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> 

您可能感兴趣的文章:

使用ajax和history.pushState无刷新改变页面URL示例
这篇文章主要介绍了使用ajax和history.pushState无刷新改变页面URL示例,需要的朋友可以参考下
2014-10-10
各种AJAX方法的使用比较详解
AJAX技术经过这么多年的发展，出现了一些框架或类库用于简化开发工作，不同的框架类库的使用方法也各不相同。现在，再回头看看这些技术，看看这些框架类库，我们能感受到技术在不断地发展，AJAX开发越来越容易了。
2015-09-09
Ajax上传图片及上传前先预览功能实例代码
在文件上传的时候用到了Ajax上传文件，以及图片在上传之前的预览效果，下面通过本文给大家分享解决Ajax上传图片及上传前先预览功能，感兴趣的朋友参考下吧
2017-08-08
Ajax实现省市区三级级联(数据来自mysql数据库)
这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
Ajax通讯原理XMLHttpRequest
AJAX = 异步 JavaScript 和 XML。JavaScript不用说脚本语言，XML也不用说可扩展标记语言用于存放数据信息
2011-12-12
Ajax 框架之SSM整合框架实现ajax校验
这篇文章主要介绍了Ajax 框架之SSM整合框架实现ajax校验,需要的朋友可以参考下
2017-04-04
Ajax 跨域如何实现
这篇文章主要介绍了Ajax 跨域如何实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
下拉菜单的级联操作（ajax）
这篇文章主要为大家详细介绍了下拉菜单的级联操作，分享了ajax与后台交互传输数据的工具类，感兴趣的小伙伴们可以参考一下
2016-08-08
防止重复发送Ajax请求的解决方案
这篇文章主要介绍了防止重复发送Ajax请求的解决方案，感兴趣的小伙伴们可以参考一下
2016-01-01
Ajax注册用户时实现表单验证
这篇文章主要为大家详细介绍了Ajax注册用户时实现表单验证，在网站上注册时，通常需要验证用户名和电子邮件地址的可用性，本文将介绍如何实现表单验证功能
2015-12-12