弄一个ajax笔记方便查询-$.ajax()

$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数,传递一个各个功能键值对的对象。

$.ajax()方法对象参数表:

参数               类型                说明
url               String             发送请求的地址
type              String             请求方式:POST或GET,默认GET
timeout           Number             设置请求超时的时间(毫秒)
data              Object或String     发送到服务器的数据,对象或键值对字符串
dataType          String             返回的数据类型,比如html、xml、json等
beforeSend        Function           发送请求前可修改XMLHttpRequest对象的函数
complete          Function           请求完成后调用的回调函数
seccess           Function           请求成功后调用的回调函数
error             Function           请求失败时调用的回调函数
global            Boolean            默认为true,表示是否触发全局Ajax
cache             Boolean            设置浏览器缓存响应,默认为true。如果dataType类型为script或jsonp则为false。
content           DOM                指定某个元素为与这个请求相关的所有回调函数的上下文。
contentType       String             指定请求内容的类型。默认为application/x-www-form-urlencoded。
async             Boolean            是否异步处理。默认为true,false为同步处理
processData       Boolean            默认为true,数据被处理为URL编码格式。如果为false,则阻止将传入的数据处理为URL编码的格式。
dataFilter        Function           用来筛选响应数据的回调函数。
ifModified        Boolean            默认为false,不进行头检测。如果为true,进行头检测,当相应内容与上次请求改变时,请求被认为是成功的。
jsonp             String             指定一个查询参数名称来覆盖默认的jsonp回调参数名callback。
username          String             在HTTP认证请求中使用的用户名
password          String             在HTTP认证请求中使用的密码
scriptCharset     String             当远程和本地内容使用不同的字符集时,用来设置script和jsonp请求所使用的字符集。
xhr               Function           用来提供XHR实例自定义实现的回调函数
traditional       Boolean            默认为false,不使用传统风格的参数序列化。如为true,则使用。
$(‘.ajax_btn‘).on(‘click‘,function(){
    $.ajax({
        type:"GET",
        url:"ajax.php",
        data:{
            url:"snail",
        },
        success:function(response,status,xhr){
            console.log(response);
        }
    })
});

注意:对于data属性,如果是GET模式,可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。

一.加载请求
在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题。而超过一定时间的请求,用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加的好一些。
Query提供了两个全局事件,.ajaxStart()和.ajaxStop()。
这两个全局事件,只要用户触发了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。
$(‘.ajax_load‘).ajaxStart(function(){
    $(this).show();
}).ajaxStop(function(){
    $(this).hide();
});

注意:以上代码在jQuery1.8及以后的版本不在有效,需要使用jquery-migrate向下兼容才能运行。新版本中,必须绑定在document元素上。

$(document).ajaxStart(function(){
    $(‘.ajax_load‘).show();
}).ajaxStop(function(){
    $(‘.ajax_load‘).hide();
});
// 请求时间过长,导致页面呈现假死状态,所以可以设置超时
$.ajax({
    timeout:2000,
});
// 如果某个ajax不想触发全局事件,可以设置取消;比如取消触发.ajaxStart()和.ajaxStop()全局事件:
$.ajax({
    global:false,
});
二.错误处理
Ajax异步提交时,不可能所有情况都是成功完成的,也有因为代码异步文件错误、网络错误导致提交失败的。这时,我们应该把错误报告出来,提醒用户重新提交或提示开发者进行修补。
在之前高层封装中是没有回调错误处理的,比如$.get()、$.post()和.load()。所以,早期的方法通过全局.ajaxError()事件方法来返回错误信息。而在jQuery1.5之后,可以通过连缀处理使用局部.error()方法即可。而对于$.ajax()方法,不但可以用这两种方法,还有自己的属性方法error:function(){}。
$(‘.ajax_btn‘).on(‘click‘,function(){
    $.ajax({
        type:"GET",
        url:"ajax.php",
        data:{
            url:"snail",
        },
        success:function(response,status,xhr){
            console.log(response);
        },
        error:function(xhr,errorText,errorStatus){
            console.log(xhr);
            console.log(errorText);
            console.log(errorStatus);
        }
    })
});
// $.post()使用连缀.error()方法提示错误,连缀方法将被.fail()取代
$.post(‘ajax.php‘).error(function(xhr,status,info){
    console.log(xhr.status+‘:‘+xhr.statusText);
    console.log(status+‘:‘+info);
});
// $.post()使用全局.ajaxError()事件提示错误
$(document).ajaxError(function(event,xhr,settings,infoError){
    alert(xhr.status+‘:‘+xhr.statusText);
    alert(settings+‘:‘+info);
});
三.请求全局事件
jQuery对于Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()等事件方法。他们都属于请求时触发的全局事件,除了这些,还有一些其他全局事件:
.ajaxSend(),没有对应的局部方法,只有属性beforeSend,请求发送之前要绑定的函数。
.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。
.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。
注意:全局事件方法是所有Ajax请求都会触发到,并且只能绑定在document上。而局部方法,则针对某个Ajax。对于一些全局事件方法的参数,大部分为对象,而这些对象有哪些属性或方法能调用,可以通过遍历方法得到。
// 遍历settings对象的属性
$(document).ajaxSuccess(function(event,xhr,settings){
    for(var i in settings){
        console.log(i);
    }
});
// $.post()请求完成的局部方法.complete()
$.post().complete(function(xhr,status){
    console.log("完成!");
})
// $.post()请求完成的全局方法.ajaxComplete()
$(document).ajaxComplete(function(event,xhr,setting){
    console.log("完成!");
})
// $.ajax()方法,可以直接通过属性设置即可。
$.ajax({
    type:"POST",
    url:"ajax.php",
    success:function(data,status,xhr){},
    complete:function(xhr,status){},
    beforeSend:function(xhr,settints){}
})

注意:在jQuery1.5版本以后,使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。

四.JSON和JSONP
如果在同一个域下,$.ajax()方法只要设置dataType属性即可加载JSON文件。而在非同域下,可以使用JSONP,但也是有条件的。
如果想跨域操作文件的话,我们就必须使用JSONP。JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
$.ajax({
    type:"GET",
    dataType:"jsonp",
    success:function(data,status,xhr){}
})
五.jqXHR对象
在之前,我们使用了局部方法:.success()、.complete()和.error()。这三个局部方法并不是XMLHttpRequest对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。这个对象,就是jqXHR对象,它是原生对象XHR的一个超集。
注意:如果使用jqXHR对象的话,那么建议用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以为在未来版本中,很可能将这三种方法废弃取消。
使用jqXHR的连缀方式比$.ajax()的属性方式有三大好处:
1.可连缀操作,可读性大大提高;
2.可以多次执行同一个回调函数;
3.为多个操作指定回调函数;
时间: 09-17

弄一个ajax笔记方便查询-$.ajax()的相关文章

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

ajax学习笔记3-jQuery实现ajax(大拇指向上)

jQuery实现ajax: jQuery本身提供了一个ajax方法,jQuery.ajax([settings]) type:类型,”POST”或”GET”(默认) url:发送请求的地址 data:是一个对象,连同请求发送到服务器的数据 dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,一般采用json格式,可以设置为“json” success:是一个方法,请求成功后的回调函数.传入返回后的数据,以及包含成功代码的字符串. err

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)

一.Ajax跨域概述 同源策略 - 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心.如果少了同源策略,则浏览器的正常功能可能都会收到影响.可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现 - 它是由 Netscape 提出的一个著名的安全策略 - 现在所有支持 JavaScript 的浏览器都会使用这个策略 - 所谓同源策略是指,域名.协议.端口相同 域名概述 - 域名(Domain Name) 是由一串用点分隔的名字组成的In

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

MVC中Ajax post Json和Ajax Get

在MVC中用ajax的方式传送数据 先创建实体 using System.ComponentModel; namespace ViewerWeb.Models { public class UserInfo { [DisplayName("用户名:")] public string UserName { get; set; } [DisplayName("年 龄:")] public int Age { get; set; } [DisplayName("

jQuery Ajax 实例 详细介绍$.ajax、$.post、$.get的使用

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦需要处理浏览器之间的兼容问题,Jquery大大简化了我们的这些操作操作,不用在考虑浏览器这方面的问题,可以直接使用! $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.aj

一个小笔记(10):编译原理

这也是一个大笔记.