`

jquery ajax

阅读更多
jQuery.ajax( options ) Returns: XMLHttpRequest
example:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

以上options写了许多属性, 一看也能明白它们的含义。不过显得有些麻烦了,于是就有了简化版本:
jQuery.post( url, [data], [callback] ) Returns: XMLHttpRequest
以上的code就可以写成:
  $post("some.php","name=John&location=Boston",function(msg){
               alert( "Data Saved: " + msg );
        });

除了post,当然还有get:
jQuery.get( url, [data], [callback] ) Returns: XMLHttpRequest

比较特殊的,还有:
jQuery.getJSON( url, [data], [callback] )   Returns: XMLHttpRequest
以get方式,从服务端获取json对象。get和post其实返回对象也可以是json, html,xml,json都行,因此这个方法感觉有些多余了, 实际用处应该不大。

还有一个特殊方式
jQuery.getScript( url, [callback] )    Returns: XMLHttpRequest
url指定了一个javascript脚本, 当脚本加载完毕则执行callback。这个形式不像前面都是异步请求返回业务需要的数据, 这里是动态加载javascript, 比较有意思。
sample:
 $(document).ready(function(){
    $.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });


Ajax Events:
ajax事件分了两种:local和global, local的是对ajax调用本身而言的,而global可以将事件注册到dom组件上。
local event:
$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ...
 });

beforeSend和complete都是ajax调用中内部的事件,因此不可以绑定到其他组件。
global event:
 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
 });

ajaxSend是global的,因此既可以在ajax内部使用,也能绑定在dom元素之上。
global事件是可以禁止的:
 $.ajax({
   url: "test.html",
   global: false,
   // ...
 });


事件类型还有一个规律, 凡是带了ajax开头的都是global的,否则就是local的。
而且几乎总有一个global事件跟local事件对应。
#  beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
# ajaxSend (Global Event)
This global event is also triggered before the request is run.
# success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).
# ajaxSuccess (Global Event)
This event is also only called if the request was successful.
# error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
# ajaxError (Global Event)
This global event behaves the same as the local error event.
# complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
# ajaxComplete (Global Event)


事件响应function基本都是如此:
function (event, XMLHttpRequest, ajaxOptions) {
  this; // dom element listening
}
对于error的,最后还多一个thrownError参数

当需要调整某个ajax请求的参数的时候,ajaxSetup能够派上用场:
$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});








分享到:
评论

相关推荐

    jQuery AJAX应用实例总结

    本文实例总结了jQuery AJAX应用。分享给大家供大家参考,具体如下: AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML(标准通用标记语言的子集)。 AJAX是一种用于创建快速动态网页的...

    Jquery ajax请求导出Excel表格的实现代码

    下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    当jquery ajax遇上401请求的解决方法

    下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    jQuery ajax总结

    jQuery调用ajax总结

    jquery Ajax实现Select动态添加数据

    主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    jQuery AJAX 方法

    jQuery AJAX 方法 jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法: 方法 描述 $.ajax() 执行异步 AJAX ...

    jquery ajax 向后台传递数组参数示例

    在JS中向后台传递数组参数,如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],具体的原因及解决方法如下,有类似问题的朋友可以参考下

    jquery ajax jsp

    ajax jsp jquery json 简单小实例

    jQuery Ajax异步处理Json数据详解

    jquery ajax处理json数据其实与其它ajax处理数据没什么很大的改动,我们只要简单处理一下ajax部份的dataType数据类型等于json即可解决了

    浅析jQuery Ajax请求参数和返回数据的处理

    刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊。然后我可以把取回来的数据渲染到页面上,一颗赛艇。 之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅); ...

    jqueryAjax

    jquery ajax 例子请求,积累了所有ajax的请求方法,包括返回的类型

    Jquery Ajax 前后台数据传输

    实现Jquery Ajax 三种方案进行前后台数据传输,界面内容传值及返回值实例!

    jQuery Ajax使用实例

    主要介绍了jQuery Ajax使用实例,本文讲解了$.ajax的一般格式、$.ajax的参数描述、$.ajax需要注意的一些地方、$.ajax我的实际应用例子,需要的朋友可以参考下

    jQuery-AJAX.zip_jquery ajax

    This is JQuery and Ajax program........

    jQuery ajax应用总结

    一、jQuery中Ajax的调用(需要引用jQuery代码库)。 方法1: 复制代码 代码如下:$.get(url, function(data) {  //deal with the data }); 方法2: 复制代码 代码如下:jQuery.post( url, [ data ], [ success(data, ...

Global site tag (gtag.js) - Google Analytics