`
残血舞
  • 浏览: 31746 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery中ajax事件

阅读更多
Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的,例如:

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ...
});全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:

$("#loading").bind("ajaxSend", function(){
   $(this).show();
}).bind("ajaxComplete", function(){
   $(this).hide();
});或者:

$("#loading").ajaxStart(function(){
   $(this).show();
}); 我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:

$.ajax({
   url: "test.html",
   global: false,// 禁用全局Ajax事件.
   // ...
});jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。 参数url (String) : 待载入 JS 文件地址。 callback (Function) : (可选) 成功载入后回调函数。jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。 这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:加载并执行 test.js。 jQuery 代码: $.getScript("test.js");  加载并执行 AjaxEvent.js ,成功后显示信息。 jQuery 代码: $.getScript("AjaxEvent.js", function(){
alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");
}); jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:Ajax.aspx:Response.ContentType = "application/json";
Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");jQuery 代码: $.post("Ajax.aspx", { Action: "post", Name: "lulu" },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
}, "json");点击提交: 这里设置了请求的格式为"json": jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 参数: url (String) :  发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
//alert(textStatus);//请求状态:success,error等等。                                  当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
});点击发送请求: jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息: load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件,例如表单。示例代码:$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态:success,error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
分享到:
评论

相关推荐

    浅谈jQuery中Ajax事件beforesend及各参数含义

    本文将详细探讨jQuery中Ajax事件beforesend的作用及其参数含义。 首先,beforesend是jQuery Ajax方法中的一个回调函数,它在发送Ajax请求之前触发,允许开发者在数据被发送到服务器之前执行一些操作。这个事件是...

    jquery,ajax的几个小例子

    jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous JavaScript and XML)则是一种在无需...

    基于jQuery的Ajax聊天室程序

    在这个聊天室程序中,jQuery库被用来简化Ajax的使用,使得开发者能更轻松地实现这一功能。 1. **jQuery**:jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本聊天室...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    Asp.Net MVC之jQuery与AJAX操作实例

    jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。在Asp.Net MVC项目中,jQuery可以帮助开发者更高效地处理用户交互和页面动态更新。 二、AJAX基础 AJAX(Asynchronous ...

    Jquery Ajax分页(有实例)

    **jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...

    jquery-ajax实例

    在JavaScript的世界里,jQuery是一个非常流行的库,它极大地简化了DOM操作、事件处理以及Ajax交互。本实例聚焦于"jQuery-AJAX",这是一项核心功能,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...

    jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ ...

    jQuery+ajax实现三级级联

    在IT行业中,jQuery和ajax是两个非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的...

    jquery,jquery是Ajax的一个框架

    5. **AJAX 事件**:jQuery 提供了 `$.ajaxStart()` 和 `$.ajaxStop()` 等事件,可以监听 AJAX 请求的开始和结束,方便进行全局状态的管理。 6. **Promise 对象**:jQuery 的 AJAX 方法返回 Promise 对象,因此可以...

    基于jquery的ajax对话框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和Ajax交互等方面。"基于jQuery的ajax对话框"是一个利用jQuery实现的功能,它可以在不刷新整个...

    jQuery的Ajax实现异步传输List、Map

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器进行数据交换,极大地提升...

    jquery+ajax分页

    jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理以及AJAX交互等任务。结合AJAX技术,我们可以实现动态、无刷新的分页效果,提高用户体验。 **一、jQuery和AJAX基础** 1. **jQuery简介**:jQuery是由...

    Struts2+Jquery+Ajax

    Jquery是一个高效的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。它使得开发者能更便捷地操作DOM元素,创建动态网页效果。在Struts2中,Jquery可以与Ajax结合使用,实现页面的无刷新更新。 Ajax...

    php+jquery+ajax最简单例子

    在IT行业中,PHP、jQuery和Ajax是Web开发中的三大核心技术,它们共同构建了现代动态网页交互的基础。这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先,让我们...

    jquery、ajax学习电子书.zip

    《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书,旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库,它极大地简化了DOM...

    Jquery和ajax结合使用的小例子

    **jQuery和Ajax结合使用是Web开发中的常见技术组合,它能帮助开发者实现页面无刷新的数据交互,提升用户体验。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术...

    jquery+AJAX小小项目

    在Web开发中,jQuery和AJAX是两种非常重要的技术,它们使得前端与后端的数据交互变得更加便捷和高效。本项目主要展示了如何利用jQuery库来实现AJAX的增删改查功能,帮助开发者更好地理解和运用这两种技术。 **一、...

    jquery+ajax的视频讲解

    在“第八章后jQueryAjax的使用”中,我们将深入探讨如何利用jQuery进行AJAX操作。 **AJAX基础** AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器...

Global site tag (gtag.js) - Google Analytics