AJAX异步同步
为了更好的用户体验，AJAX的异步同步技术给了我们一个很好的用户体验下面是我做的一个例子。
1、客户端处理
UserId.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="client_validate.js"></script>
<script type="text/javascript">
function validate(field){
//创建XML
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
//设置请求方式为GET，设置请求URL，设置为异步提交
xmlHttp.open("GET", url, true);
//将方法地址复制给onreadystatechange属性
xmlHttp.onreadystatechange=function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(trim(xmlHttp.responseText)!=""){
document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("请求失败，错误码="+xmlHttp.status);
}
}
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<table>
<tr>
<td>
<div align="left">
<font color="#FF0000">*</font>用户代码:
</div>
</td>
<td>
<input name="userId" type="text" class="text1" id="userId"size="10" maxlength="10" onblur="validate(this);" />
<span id="spanUserId"></span>
</td>
</tr>
</table>
</body>
</html>
2.提交给服务器。
user_validate.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@ page import="com.bjpowernode.drp.sysmgr.manager.UserManager"%> <%
Thread.currentThread().sleep(5000);
String userId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId)!=null){
out.println("用户代码已经存在！");
}
%>
3.后台处理
3.1 连接数据库查询用户信息
UserManager.java
public class UserManager {
private static UserManager instance=new UserManager();
private UserManager(){
}
public static UserManager getInstance(){
return instance;
}
/**
* 根据用户代码查询
* @param userId
* @return 如果存在返回User 如果不存在则返回Null
*/
public User findUserById(String userId){
/*System.out.println("UserManger.findUserById--userId="+userId);*/
String sql="select user_id,user_name,password,contact_tel,email,create_date from t_user where user_id=?";
Connection conn=null;
PreparedStatement pstmt=null;
ResultSet rs=null;
User user=null;
try{
conn=DbUtil.getConnection();
pstmt=conn.prepareStatement(sql);
pstmt.setString(1, userId);
rs=pstmt.executeQuery();
if(rs.next()){
user=new User();
user.setUserId(rs.getString("user_id"));
user.setUserName(rs.getString("user_name"));
user.setPassword(rs.getString("password"));
user.setContactTel(rs.getString("contact_tel"));
user.setEmail(rs.getString("email"));
user.setCreateDate(rs.getTimestamp("create_date"));
}
}catch(SQLException e){
e.printStackTrace();
}finally{
DbUtil.close(rs);
DbUtil.close(pstmt);
DbUtil.close(conn);
}
return user;
}
}3.2数据库连接类
DbUtil.java
public class DbUtil {
public static Connection getConnection(){
Connection conn=null;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
String url="jdbc:oracle:thin:@localhost:1521:ORCL";
String username="drp1";
String password="drp1";
conn=DriverManager.getConnection(url,username,password); } catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} return conn;
}
//关闭Connection
public static void close(Connection conn){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//关闭PreparedStatement
public static void close(PreparedStatement pstmt){
if(pstmt!=null){
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
//关闭ResultSet
public static void close(ResultSet rs){
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
} ｝
3.3实体类。
User.java
/**
* 用户实体
* @author IT
*
*/
public class User {
//用户代码
private String userId;
//用户名称
private String userName;
//密码
private String password;
//联系电话
private String contactTel;
//电子邮件
private String email;
//创建日期
private Date createDate; public String getUserId() {
return userId;
}
public void setUserId(String userId) {
this.userId = userId;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getContactTel() {
return contactTel;
}
public void setContactTel(String contactTel) {
this.contactTel = contactTel;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Date getCreateDate() {
return createDate;
}
public void setCreateDate(Date createDate) {
this.createDate = createDate;
}
}
4.效果图：
AJAX异步同步的更多相关文章
- (转)函数中使用 ajax 异步 同步 返回值错误 主函数显示返回值总是undefined -- ajax使用总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAloAAAE0CAIAAAB7LwoKAAAgAElEQVR4nO2dy6sc152A6+/R2mXwSn ...
- JS中Ajax的同步和异步
ajax同步 : 意味着此时请求Server后,JS代码不再继续执行,等待Server返回后才继续往下执行. ajax异步 : 意味着此时请求Server后,JS代码继续执行,不管Server什么时候 ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）
1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
- 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法（转载）
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- Ext.Ajax.request同步请求
导读: ajax分为2种,一种是同步,一种是异步同步:代码执行完了之后才执行后面的代码 异步:代码刚执行,后面的代码就马上接着执行了,不管前面的代码是否执行完异步的情况下,要获得返回信息,就需要在异步 ...
随机推荐
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- Sql Server触发器案例（初学者学习案例）
万事都是从最简单的一句“hello world”开始,所以我接下里介绍的sql触发器学习案例也从最简单的案例来说明分析: 1.首先创建表,这几张表你们也许很熟,在百度搜触发器案例都是使用这2张表 Cr ...
- [转]在PHP语言中使用JSON
本文转自:http://www.ruanyifeng.com/blog/2011/01/json_in_php.html 作者: 阮一峰 日期: 2011年1月14日 目前,JSON已经成为最流行的数 ...
- Redis中的批量删除数据库中的Key
本文参考:http://blog.csdn.net/spring21st/article/details/15771861 http://stackoverflow.com/questions/575 ...
- 隐藏自定义的tabbar之后，push到B视图，B视图的键盘工具条无法响应点击事件
我的情况如下: 在TabbarViewController中隐藏了系统的tabbar,然后自定义tabbar,A B C D 4个视图都有UINavigationController,A视图 使用的是 ...
- self.view添加UIView时添加动画
CATransition *animation = [CATransition animation]; animation.delegate = self; animation.duration = ...
- UIScrollView的相关属性说明
_scrollView = [[UIScrollView alloc] init]; //height = 0:禁止垂直方向滚动 _scrollView.contentSize = CGSizeMak ...
- spring三大核心学习（一）---控制反转
记得当年大学时候,java的企业级框架还是ssh的天下(spring,struts和hibernate),但是现在,感觉spring已经完全把那两个框架甩在后边了.用spring的人越来越多,用str ...
- 二十一、Android上常见度量单位【xdpi、hdpi、mdpi、ldpi】解读
术语和概念 屏幕尺寸 屏幕的物理尺寸,以屏幕的对角线长度作为依据(比如 2.8寸, 3.5寸). 简而言之, Android把所有的屏幕尺寸简化为三大类:大,正常,和小. 程序可以针对这三种尺寸的屏幕 ...
- 常用的CSS缩写语法一些方法小结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...