JQuery中$.ajax()分享

HTTP 请求加载远程数据。通过jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。注意：如果dataType设置为"script"，那么在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp"时，jQuery 将自动调用回调函数。

ajax工作原理

XMLHttpRequest对象方法详解

1、具体运用如下，比如要严重用户名是否重复用户名输入框加onblur="validate(this) this是为了获取光标离开后的数据 <div name="userIdSpan"></div>是为了有没有重复代码写文字提醒

 <input name="userId" type="text" data-rules="{required:true}" class="input-normal control-text"  onblur="validate(this)"><div name="userIdSpan"></div>

2、JavaScript添加

 

<SCRIPT language=JavaScript>
		//创建浏览器对象	
	var xmlHttp;	 
	function createXMLHttpRequest() {
		//表示当前浏览器不是ie,如ns,firefox
		if(window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
		
		function validate(field) {
		
		
			if ($.trim(field.value).length != 0) {
			//创建XMLHttpRequest
			
			createXMLHttpRequest();
			
			var url = "user_validate.jsp?userId=" + $.trim(field.value) + "&timestamp=" + new Date().getTime();
			
			xmlHttp.open("GET", url, true);
			
			//方法地址，处理完成后自动调用，回调
			xmlHttp.onreadystatechange=function() { //匿名函数
				if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
				
					if (xmlHttp.status == 200) { //http协议成功
					
					
						document.getElementsByName("userIdSpan")[0].innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
						
						
					}else {
						alert("请求失败，错误码=" + xmlHttp.status);
					}
				}
			};
			//将参数发送到Ajax引擎
			xmlHttp.send(null);
		}else {
			document.getElementsByName("userIdSpan")[0].innerHTML = "";		
		}
		}
		
		
		function addUser() {
			with(document.getElementById("J_Form")) {
			method="post";
			action="Add_user.jsp?command=add";
			submit();
		}	
		}
</SCRIPT>

3、添加user_validate.jsp页面如下：

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.marcellotest.sysmgr.dormain.*" %>    
<%	

	//可以采用清除缓存的方法，如下
	//response.setContentType("text/xml");
	//response.setHeader("Cache-Control", "no-store"); //HTTP1.1	
	//response.setHeader("Pragma", "no-cache"); //HTTP1.0
	//response.setDateHeader("Expires", 0); 

	//out.println("Hello");
	//Thread.currentThread().sleep(3000);
	String userId = request.getParameter("userId");
	if (UserManager.getInstance().findUserById(userId) != null) {
		out.println("用户代码已经存在");
	}
%>

 

UserManager.getInstance().findUserById(userId)

这个代码是验证是否有这个用户名的，那么就要在后台xie这个函数

4、后台代码如下

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.List;

 
/**
 * 用户管理类
 * @author Administrator
 *
 */
public class UserManager {
	

	private static UserManager instance = null;
	
	private UserManager() {}
	
	public static synchronized UserManager getInstance() {
		if (instance == null) {
			instance = new UserManager();
		}
		return instance;
	}
	
	/**
	 * 根据用户id查询
	 * @param userId
	 * @return 如果存在返回User对象，否则返回null
	 */
	public User findUserById(String userId) {
		System.out.println("UserManager.findUserById() -->> userId=" + userId);
		String sql = "select * 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;
	}	
	
}

 

 

当然 用户资料和数据库得调用自己写的；

今天太困了，我就先睡觉了；各位再见！