20.jQuery高级-jQuery中的Ajax应用高级.ppt

1、Ajax事件 2、jQuery与.net后台交互（VS2008对JSON的支持） 3、综合案例 一、Ajax事件 ajaxComplete(callback) ajaxError(callback) ajaxSend(callback) ajaxStart(callback) ajaxStop(callback) ajaxSuccess(callback) 2.1、ajaxComplete(callback) AJAX 请求完成时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求完成时执行函数。 jQuery 代码: ?$(#msg).ajaxComplete(function(event,request, settings){?? $(this).append(li请求完成./li);?}); 2.2、ajaxError(callback) AJAX 请求发生错误时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。 返回值 jQuery 参数 callback (Function) : 待执行函数 function (event, XMLHttpRequest, ajaxOptions, thrownError) {?? ?? // thrownError 只有当异常发生时才会被传递?? ?? this; // 监听的 dom 元素} 示例 AJAX 请求失败时显示信息。 jQuery 代码: $(#msg).ajaxError(function(event,request, settings){???? $(this).append(li出错页面: + settings.url + /li);}); 2.4、ajaxSend(callback) AJAX 请求发送前执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求发送前显示信息。 jQuery 代码: ?$(#msg).ajaxSend(function(evt, request, settings){?? $(this).append(li开始请求: + settings.url + /li);?}); 2.5、ajaxStart(callback) AJAX 请求开始时执行函数。Ajax 事件。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求开始时显示信息。 jQuery 代码: ?$(#loading).ajaxStart(function(){?? $(this).show();?}); 2.6、ajaxStop(callback) AJAX 请求结束时执行函数。Ajax 事件。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 AJAX 请求结束后隐藏信息。 jQuery 代码: ?$(#loading).ajaxStop(function(){?? $(this).hide();?}); 2.7、ajaxSuccess(callback) AJAX 请求成功时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 当 AJAX 请求成功后显示消息。 jQuery 代码: ?$(#msg).ajaxSuccess(function(evt, request, settings){?? $(this).append(li请求成功!/li);?}); Ajax全局事件 全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义： $(#loading).bind(ajaxSend, function(){ $(this).show(); }).bind(ajaxComplete, function(){ $(this).hide(); }); 或者： $(#loading).ajaxStart(function(){ $(this).show(); }); 我们可以在特定的请求将全局事件禁用，只要设置下