Ajax基础与jQuery的Ajax实现

HelloSure

浏览: 310867 次
性别:
来自: 武汉

最近访客更多访客>>

fengfantasy

wangpeihu

hellolove

AVI

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web技术

Ajax jQuery Java json jsonp

典型的AJAX流程见附件图
或

细分为以下几个步骤：
– 发生一个客户端事件
– 创建一个XMLHttpRequest对象
– 使用XMLHttpRequest对象发送请求
– 服务器接收请求并进行处理
– 服务器返回结果
– XMLHttpRequest对象调用callback()函数处理结果
– 更新HTML DOM

一个简单的例子
客户端HTML文件代码：

<html>
<body>
<script type="text/javascript">
function ajaxFunction(){
 var xmlHttp;
 try{
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
 }
 catch (e){
  // Internet Explorer
   try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e){
      try{
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e){
         alert("您的浏览器不支持AJAX！");
         return false;
      }
   }
 }
	
  //以上是创建一个XMLHttpRequest对象
  //下面这个function是回调函数
  xmlHttp.onreadystatechange=function(){
     //readyState为4表示服务器处理完成
      if(xmlHttp.readyState==4){
        //通过DOM修改页面的显示
         //返回的数据存在responseText中
         document.myForm.time.value=xmlHttp.responseText;
     }
   }
   //建立请求
   xmlHttp.open("GET","time.asp",true);
   //发送请求
   xmlHttp.send(null);	
 }
</script>
<form name="myForm">                             //触发ajax
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>

服务器端

<%
response.expires=-1
response.write(time)
%>

$.ajax(options)的用法
这个是jQuery 的底层 Ajax 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
注意：如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。

示例代码：

$.ajax({
	type: "GET",
	url: rootURI + "/login",
	data:{'username' : username, 
               'password' : password},
	complete: checkLoginStatus
});

后台处理代码

public void login() {
	if (result.isSuccess()) {
		...
	} else {
		putJSON("user_not_exist_or_incorrect_password");
	}
}

putJSON(String data){
	ServletActionContext.getResponse().setCharacterEncoding("utf-8");
	ServletActionContext.getResponse().setContentType("application/json;charset=UTF-8");
	PrintWriter out = ActionUtil.getResponse().getWriter();
	out.print(data);
}

前台回调函数

function checkLoginStatus(data){
	if (data.status != 200) {
		alert('登陆出错，请稍后再试');
		return;
	}
	if (data.responseText == "incorrect_code") {
		alert('验证码错误');
	} else if (data.responseText == "user_not_exist_or_incorrect_password") {
		alert('无此用户名或密码错误');
	} else {
		location.href = rootURI + '/admin/index.jsp';
	}
}