全局Ajax事件是一系列伴随Ajax请求发生的事件.
主要有如下事件:
ajaxComplete( callback ) AJAX 请求完成时执行函数
ajaxError( callback ) AJAX 请求发生错误时执行函数
ajaxSend( callback ) AJAX 请求发送前执行函数
ajaxStart( callback ) AJAX 请求开始时执行函数
ajaxStop( callback ) AJAX 请求结束时执行函数
ajaxSuccess( callback ) AJAX 请求成功时执行函数
在学习$.ajaxSetup时,我们知道默认options的global属性为true,代表发送ajax请求时,将触发这些全局事件。
我们可以通过$.ajaxSetup将默认options的global属性设置为false来取消全局Ajax事件的触发.
这些事件(除去ajaxStart和ajaxStop)的回调函数都包含3个参数
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
我们通过一个实例来说明这些事件在什么时候发生。这样大家理解起来更直观一些。
实例——客户端
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxGlobalEvent.aspx.cs" Inherits="JqueryAjaxTest.JqueryAjaxGlobalEvent" %>
<!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">
<head runat="server">
<title>jquery ajax test</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//绑定按钮事件
$("#TestAjaxEvent").click(function (event) { $.get("Data/GetServiceInfo.aspx"); });
$("#result").ajaxSend(function (event, xhr, options) { $(this).append('<p>ajaxSend</p>'); });
$("#result").ajaxStart(function () { $(this).append('<p>ajaxStart</p>'); });
$("#result").ajaxStop(function () { $(this).append('<p>ajaxStop</p>'); });
$("#result").ajaxComplete(function (event, xhr, options) { $(this).append('<p>ajaxComplete</p>'); });
$("#result").ajaxSuccess(function (event, xhr, options) { $(this).append('<p>ajaxSuccess</p>'); });
$("#result").ajaxError(function (event, xhr, options) { $(this).append('<p>ajaxError</p>'); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="TestAjaxEvent" type="button" value="测试ajax全局事件发生顺序" />
<div id="result">从上到下依次发生:</div>
</div>
</form>
</body>
</html>
服务端——
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace JqueryAjaxTest.Data
{
public partial class GetMethodInfo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string param = "";
//获取参数
if (!String.IsNullOrEmpty(HttpContext.Current.Request["param"]))
{
param = HttpContext.Current.Request["param"];
}
//清空缓冲区
Response.Clear();
//将字符串写入响应输出流
Response.Write("Http请求的方式为:"+Request.HttpMethod.ToUpper()+"; 传递过来的参数为:"+param);
//将当前所有缓冲的输出发送的客户端,并停止该页执行
Response.End();
}
}
}
注意ajaxSuccess和ajaxComplete的区别:
ajaxSuccess: 当请求成功时触发该事件,回调函数会得到参数,一个参数的属性status==200。
ajaxComplete:当请求完成时触发该事件,回调函数会得的这个属性status==404、403、302...。与 ajaxSuccess() 不同,通过 ajaxComplete() 方法规定的函数会在请求完成时运行,即使请求并未成功。
我们再原生的AJax中常常这么写,
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
当 readyState 等于 4 且状态为 200 时,表示响应已就绪。当status等于200时,也就是我们的ajaxsuccess事件触发的时刻。