Asp.Net+Jquery.Ajax详解7-全局Ajax事件

最新推荐文章于 2017-08-24 09:44:46 发布

shan9liang

最新推荐文章于 2017-08-24 09:44:46 发布

阅读量3.5k

点赞数 8

分类专栏： Web开发 Javascript Jquery 文章标签： ajax asp.net callback function xmlhttprequest xhtml

本文链接：https://blog.csdn.net/shan9liang/article/details/7845830

版权

Web开发同时被 3 个专栏收录

119 篇文章 2 订阅

订阅专栏

Javascript

31 篇文章 0 订阅

订阅专栏

Jquery

16 篇文章 0 订阅

订阅专栏

目录（已经更新的文章会有连接，从7月25日开始，每2到3天更新一篇）：

Asp.Net+Jquery.Ajax详解1-开篇（2012.07.25发）

Asp.Net+Jquery.Ajax详解2-$.Load（2012.07.26发）

Asp.Net+Jquery.Ajax详解3-$.get和$.post（2012.07.30发）

Asp.Net+Jquery.Ajax详解4-$.getJSON（2012.07.31发）

Asp.Net+Jquery.Ajax详解5-$.getScript（2012.08.04发）

Asp.Net+Jquery.Ajax详解6-$.ajaxSetup（2012.08.06发）

Asp.Net+Jquery.Ajax详解7-全局Ajax事件（2012.08.09发）

Asp.Net+Jquery.Ajax详解8-核心$.ajax（2012.08.12发）

Asp.Net+Jquery.Ajax详解9-serialize和serializeArray（2012.08.15发）

Asp.Net+Jquery.Ajax详解10-JSON和XML+写在最后（2012.08.20发，结束啦！）

全局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事件触发的时刻。

啊，这个系列文章写到7啦，还有3篇，继续加油！

shan9liang

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
9
评论
Asp.Net+Jquery.Ajax详解7-全局Ajax事件

目录（已经更新的文章会有连接，从7月25日开始，每2到3天更新一篇）：Asp.Net+Jquery.Ajax详解1-开篇（2012.07.25发）Asp.Net+Jquery.Ajax详解2-$.Load（2012.07.26发）Asp.Net+Jquery.Ajax详解3-$.get和$.post（2012.07.30发）Asp.Net+Jquery.Ajax详解4-$.ge
复制链接

扫一扫