Jquery关于ajax有一系列的方法函数,单单知道$.ajax()显然是不够的,接下来我们对该系列的方法函数逐一研究下。

ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)

把这一套方法归到一起说,因为他们实现的功能相近,方法本身也并不复杂。

他们的作用是,为 ajax 指定全局事件的回调函数,回调函数的参数与对应事件相关。

下面是对应关系

方法 执行时段 回调函数的参数 执行顺序
ajaxComplete(callback) 请求完成后 event, xhr, settings 4
ajaxError(callback) 请求失败时 event, xhr, settings, statusText 3
ajaxSend(callback) 请求发送前 event, xhr, settings 2
ajaxStart(callback) 请求开始时 event 1
ajaxStop(callback) 请求结束时 event 5
ajaxSuccess(callback) 请求成功时 event, xhr, settings, data 3

如果不是特殊需求,我们都应该将这一系列全局事件处理函数绑定到document对象上:(Jquery1.8版本以上,必须绑定到document对象上才能生效)

$(document).ajaxStart(function(){
...
});

$.ajax() 方法的 global 设置可以控制是否触发这些全局事件回调,默认是true。如果不想触发全局事件回调,请将 global 设置成 false。

$.get(url, [data], [callback], [type])、$.post(url, [data], [callback], [type])

这两个方法其实是对 $.ajax() 方法的再封装,将 method 默认设成 get/post。然后4个参数分别对应 $.ajax() 设置中的 url,data,success,dataType。返回值和 $.ajax() 方法一模一样。

$.getJSON(url, [data], [callback])、$.getScript(url, [data], [callback])

这两个方法其实是对 $.get() 方法的再封装,也就是对 $.ajax() 的二次再封装,将 method  默认设成 get, dataType 默认设成 json/script。然后4个参数分别对应 $.ajax() 设置中的 url,data,success。返回值和 $.ajax() 方法一模一样。

这里补充说明一下的就是,虽然 $.getJSON() 方法通过在url拼加参数的方式,也可以实现 jsonp 请求,但这种做法不推荐就是了。

load(url, [data], [callback])

载入远程 HTML 文件代码并插入至 DOM 中。三个参数分别对应:待装入 HTML 内容网址,发送至服务器的数据,载入成功时回调函数

//加载 feeds.html 文件内容到 id 为 feeds 的容器中。
$("#feeds").load("feeds.html");

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

//功能同上面的例子,但由于传递了附加参数,改用 post 形式发送请求
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

Jquery1.2以上版本,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

//下面的代码会根据选择器,对加载到的内容进行筛选后再插入到 DOM 中
$("#links").load("/Main_Page #p-Getting-Started li");

$.ajaxSetup(settings)

设置全局 AJAX 默认选项。具体参数可参照 $.ajax()。设置全局默认选项后,所有 ajax 系列方法发出的请求在没有重新对 settings 设置的情况下,都会使用 $.ajaxSetup() 方法设定的默认值。

当然,就算未经过 $.ajaxSetup() 方法的设置,本身 settings 对象各个属性也是有默认值的, $.ajaxSetup()方法的作用仅仅是重新设定这些默认值而已。

$.ajaxPrefilter([dataTypes], handler(settings, originalSettings, jqXHR))

这个方法用于定义 ajax 请求预处理器,指定特性类型的请求,在请求发出前的处理函数。

dataTypes 参数为可选参数,类型为 string,可以指定对应 datatype 的请求才执行预处理函数。支持指定多种类型,不同的 datatype 以空格符隔开。

handler 参数为必选参数,类型为 function,它就是在请求发出前的处理函数。它包含3个参数:

settings —— ajax 请求的设置选项对象,除了既包含了调用 $.ajax() 方法传入的 settings,也包含其他默认设置属性

originalSettings —— 调用 $.ajax() 方法传入的 settings 参数对象

jqXHR —— 请求的jqXHR对象

//下面的代码定义了一个AJAX预处理器
//作用是,根据用户的自定义属性 abortOnRetry 来对请求进行检测,检测当前正在等待响应的请求中,是否有与本次相同的请求,如果有,则把尚未响应的请求给取消掉 var currentRequests = {}; $.ajaxPrefilter(function (settings, originalSettings, jqXHR) {
if (settings.abortOnRetry) {
if (currentRequests[settings.url]) {
currentRequests[settings.url].abort();
}
currentRequests[settings.url] = jqXHR;
}
});

我们也可以用 $.ajaxPrefilter() 方法来修改 settings 选项

$.ajaxPrefilter(function(settings, originalSettings, jqXHR) {
settings.method = 'post';
});

通过 dataTypes 参数指定某些类型的 ajax 请求才执行预处理函数

//下面的预处理器仅对 dataType 为 json 和 script 的请求适用
$.ajaxPrefilter("json script", function(settings, originalSettings, jqXHR) {
...
});

$.ajaxPrefilter() 方法也可以将请求重定向到另一个数据类型,并且返回该数据类型。例如,如果 URL 中含有在 isActuallyScript() 函数中设定的指定属性,那么设置成一个“script”的请求:

$.ajaxPrefilter(function (settings) {
if (isActuallyScript(settings.url)) {
return "script";
}
});

这将确保请求被认为是“script”类型的,而且也保证了所有对 script 数据类型有效的预前过滤器,也将被应用到它。

Jquery中和ajax有关的方法的更多相关文章

  1. jquery中ajax中post方法(多学习:洞悉原理,触类旁通)(函数封装思想)

    jquery中ajax中post方法(多学习:洞悉原理,触类旁通)(函数封装思想) 一.总结 1.多看学习视频:洞悉原理,触类旁通, 2.函数封装:$.post(URL,data,callback); ...

  2. jquery之ajax之$.get方法的使用

    jquery对ajax进行了封装,非常方便. 自己用$.get()方法写了个小demo,包括客户端和服务端. 客户端: <!DOCTYPE html> <html> <h ...

  3. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

  4. jQuery的ajax()、post()方法提交数组,参数[] 问题

    当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List,或Integer[] 等数组对象进行接收. 比如: $.ajax({   type: "POST", ...

  5. JQuery的Ajax使用Get,Post方法调用C#WebService并返回数据

    本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,另外还要介绍一下用jQuery调用WebService的参数设置及设置不当所出现的问题,还有出 ...

  6. JQuery 的Ajax的使用

    JSON:一种轻量级的数据表示方法,优点:传输方便,占用字节少 XML:一种偏重量级的数据表示方法,优点:格式清晰,占用字节多,大量的字节都浪费在了标签上: 网络传输我们常使用json,因为浏览器解析 ...

  7. 从零开始学习jQuery (六) AJAX快餐

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  8. 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  9. jquery的ajax全局事件详解

        jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板: $.ajax({ type: "get", url: "" ...

随机推荐

  1. 从源码角度看Transaction以及如何手工接管Transaction实现高度的自定义化

    一:transaction CUD: 在一个transaction中... transaction: start add.... delete... update... transaction: co ...

  2. Java之enum

    枚举是 JDK 1.5  中引入的新特性,存放在 java.lang 包中.在没有枚举之前都是直接定义一个final string这种,有了枚举之后可以直接定义啦,不过在java中需要自定义转换,自己 ...

  3. Replication--发布属性immediate_sync

    在创建发布时,如果选择立即初始化,会将immediate_sync属性设置为true.如果immediate_sync属性为true时,snapshot文件和发布事务及发布命令将一直保留到指定的事务保 ...

  4. CLR via C# 读书笔记-21.托管堆和垃圾回收

    前言 近段时间工作需要用到了这块知识,遂加急补了一下基础,CLR中这一章节反复看了好多遍,得知一二,便记录下来,给自己做一个学习记录,也希望不对地方能够得到补充指点. 1,.托管代码和非托管代码的区别 ...

  5. Centos部署Abp zero常见问题及处理

    多租户切换,多语言切换异常 解决: 修改nginx配置,在nginx.conf中 增加 #多租户问题 ignore_invalid_headers off; 修改应用程序Logo异常处理 异常: Sy ...

  6. ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie

    BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJ ...

  7. 关于C# 向TIM或者QQ自动发送中文消息【微信也是可用的】 附测试GIF中微信可用的 全新修订

    在上一篇文章的代码 对于微信已失效 重新更新一边 效果图: 源代码 using System; using System.Runtime.InteropServices; using System.T ...

  8. vue和jQuery的区别

    从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去 vue和jquey对比 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取 ...

  9. 2018OCP最新题库052新加考题及答案整理-27

    27.Examine these facts about a database: 1. USERS is the database default tablespace. 2. USER1, USER ...

  10. ACM-ICPC 2018徐州网络赛-H题 Ryuji doesn't want to study

    死于update的一个long long写成int了 真的不想写过程了 ******** 树状数组,一个平的一个斜着的,怎么斜都行 题库链接:https://nanti.jisuanke.com/t/ ...