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种,一种是同步,一种是异步同步:代码执行完了之后才执行后面的代码 异步:代码刚执行,后面的代码就马上接着执行了,不管前面的代码是否执行完异步的情况下,要获得返回信息,就需要在异步 ...
随机推荐
- Django升级1.6之后出现“Bad Request (400)”错误的解决方案
Django从1.4升级到1.6之后发现之前的网站都无法访问了,会出现“Bad Request (400)”的错误,搜了半天终于找到了解决办法. 解决方法很简单: 在settings.py里面添加: ...
- javascript,jquery(闭包概念)
(function($){ $("div p").click(...);})(jQuery); 就是等于function tempFunction($){ //创建 ...
- msql_DDL_创建table
• 语法: create table 表名(• 列名1 列类型 [<列的完整性约束>],• 列名2 列类型 [<列的完整性约束>],• ... ... ); • PRIMARY ...
- nginx 反向代理设置
假设对本机80端口的访问为一台服务器,对本机8000端口的访问为另一台服务器,下面这样写一个nginx的反向代理配置,就可以实现所有请求都转移 server {listen 0.0.0.0:80;se ...
- ionic项目的一些简单操作
1.首先保证开发环境没问题: 2.下载一个ionic项目:命令ionic start myApp tabs(myApp的项目的名称) 3.在运行项目之前,要先创建平台: ionic platform ...
- Pascal 语言中字符与字符串
[题目]输入一段文章(255个字符以内),求文章中单词的个数,相同单词只记一次,The 和 the 视作相同. [敲代码] //网友代码 var article,w:string; arr:array ...
- ado.net 基础（一）
// C#操作数据库的基础1 引用两个命名空间using data:using date.sqlclient;2 创建与数据库的连接方法一: sqlconnection a = new sqlconn ...
- 【CSS3】---盒模型margin、padding及border
盒模型--边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div ...
- 【AngularJs】---JSONP跨域访问数据传输
大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...
- php学习笔记7--php中的数组
php中的数组 1.数组的定义:显式方式:$arr = array(1,2,3,4,5); $arr1 = array('name'=>'dqrcsc','age'=>'24');隐式方式 ...