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种,一种是同步,一种是异步同步:代码执行完了之后才执行后面的代码 异步:代码刚执行,后面的代码就马上接着执行了,不管前面的代码是否执行完异步的情况下,要获得返回信息,就需要在异步 ...
随机推荐
- oralce之存储过程
一:--循环向表emp中插入数据 declare maxnumber ; v_count number; begin v_count :; ..maxnumber LOOP v_count :; in ...
- 给定数组a[N]构造数组b[N]
转自:http://blog.csdn.net/wumuzi520/article/details/7841280 给定一个数组a[N],我们希望构造数组b [N], 其中b[j]=a[0]*a[1] ...
- css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
- IntelliJ IDEA 中集成使用git（2015年06月10日）
前提:需要有一个git账号,https://github.com/ 1.首先需要下载一个Github,https://windows.github.com 安装之后的界面是酱紫的,非常简洁美观 2.在 ...
- IE10 下兼容性问题
昨天在IE10下遇到这样一个问题 用jquery 获取textarea里的值 其中内容这里包含HTML 用$("#Id").val().$("#Id").ht ...
- 一个基于MBProgressHUD的自定义视图hud例子
项目中用到的一个hud,基于MBProgressHUD,使用自定义视图实现的,动画效果是从网上参考的,并不是很理想.有需要的可以看看,这里是源码(源码用了cocoapods,运行前需要pod inst ...
- Ueditor 1.4.3 单独调用上传图片,或文件功能
第一步, 引入文件 <script src="ueditor/ueditor.config.js" type="text/javascript" char ...
- hdu 3665 Seaside floyd+超级汇点
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3665 题意分析:以0为起点,求到Sea的最短路径. 所以可以N为超级汇点,使用floyd求0到N的最短 ...
- struts2<s:property />标签
struts2的<property />标签是输出标签 其value属性是指定输出的内容,如果value属性没有写出来,则默认输出对象栈栈顶的元素. 例如,我们在对象栈中添加一个Perso ...
- centos下redis和nginx软件的安装
我们这章以redis和nginx软件为例,介绍一下centos下软件的安装. 需要软件包(可以先下载好复制到centos指定目录下,也可直接用wget命令获取): nginx-1.7.9.tar re ...