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种,一种是同步,一种是异步同步:代码执行完了之后才执行后面的代码 异步:代码刚执行,后面的代码就马上接着执行了,不管前面的代码是否执行完异步的情况下,要获得返回信息,就需要在异步 ...
随机推荐
- Oracle 常用的SQL语法和数据对象
一.数据控制语句 (DML) 部分 1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2, ……); INSE ...
- Input框去掉蓝色边框
Input框去掉蓝色边框: <input type="text" name="" value="" class="Inpt& ...
- [转]Displaying standard DataTables in MVC
本文转自:http://stackoverflow.com/questions/2243898/displaying-standard-datatables-in-mvc Controller act ...
- POJ 1287 Networking (最小生成树)
Networking Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit S ...
- 证明Dijkstra中加入S的点已经最优
语言抽象,仅供自用. 证明一个即将加入S集合的点u必然D[u]=最小值min: 假设D[u] != 最小值,那么即说明存在一条最短路径,该路径可以描述为:S集合中的一个点(至少为起始点) + 一个 ...
- 快速调试chromium
上一篇我们简单的将了在Ubuntu上编译chromium,android content_shell_apk的编译,一切顺利的就能生成apk.但是我们仅仅只是照搬了人家google开源的东西,作为一个 ...
- 苹果系统开发中的混合编程(2):Swift和C的相互调用
在进行Swift和C之间的相互调用时,有必要先了解一下两种语言之间的类型转换关系: C 类型 Swift 类型 bool CBool char, signed char CChar unsig ...
- Java longTime 和C#日期转换（结构+运算符重载）
前几天,因为工作原因,连到了公司的一个java系统.查看数据的时候,突然整个人都不好了,数据库中日期字段时间为毛都是整型?之前从来没有接触过java,所心就趁机了解了一下.原来,在数据库中,保存的是j ...
- jquery的延迟加载插件Lazy Load Plugin for jQuery
下载:https://github.com/tuupola/jquery_lazyload 使用:http://www.appelsiini.net/projects/lazyload 翻译:http ...
- 10款免费CSS编辑器应对于Linux和Ubuntu
您是否在使用Linux和Ubuntu的,不知道在哪里可以找到一些优秀且免费的CSS编辑器用于Linux和Ubuntu的?如果你的答案是肯定的,然后停止幻想,开始浏览这个帖子里,我们展示了前10名,并免 ...