jQuery Ajax异步请求详解
jQuery的Ajax API是对XMLHttpRequest对象的抽象,解决了浏览器之间的兼容性问题,同时提供了一些方便的方法。这篇博客的撰写参考了jQuery官网,jQuery Ajax API
关于XMLHttpRequest对象请参照我的另一篇博客:XMLHttpRequest进行异步请求(包括文件上传)详解
核心概念
GET or POST
- GET用于从服务器获取数据
- POST用于向服务器提交数据
数据类型
jQuery需要一些指令作为你的Ajax请求期望返回的数据类型,可以通过方法来指定,例如$.getJSON(),还可以通过选项对象来指定。
下面是数据类型:
类型 | 描述 |
---|---|
text | 字符串 |
html | 传输被替换到页面中的一块HTML代码 |
script | 新增一个script到页面中 |
json | 串json编码的数据,可以是数组,字符串,对象 |
jsonp | 跨域请求json数据 |
xml | xml格式的数据 |
请求是异步的
因为jQuery的Ajax请求默认是异步的(可以通过配置选项属性async:false来变成同步的),所以响应只能在回调函数中被处理。
同源策略和JSONP
通常Ajax请求只能限制请求相同协议、相同端口、以及相同的域名下的资源。但是这个限制在使用jQuery加载script标签时不会起作用。
JSONP使用一个script标签来执行跨域请求,因为script标签的请求不受同源策略的限制。script中会携带我请求的数据,并将其包裹在我指定的回调函数中。
jQuery的Ajax相关的方法
最核心的方法是$.ajax()。
$.ajax()
$.ajax()方法是一个有力并且直接的创建Ajax请求的方法。使用一个选项对象作为参数传给它,这个选项对象的属性配置了完成请求所需要的所有指令。
$.ajax()提供了成功以及失败的回调函数。
实例代码如下:
$.ajax({url: "post.php",type: "post",data: { // 传输的数据,如果是get请求将会被转为URL中的请求参数id:1},dataType: json // 我们期待返回的数据类型
})
.done(function(json){}) // 请求成功的回调
.fail(function(xhr,status,errorThrown){}) // 请求失败的回调
.always(function(xhr,status){}) // 不论成功或者失败都会被调用
注意: 尽 管 d a t a T y p e 被 设 置 了 , 但 是 如 果 服 务 器 返 回 的 类 型 不 是 我 们 期 待 的 类 型 的 时 候 , 这 时 可 能 不 会 正 常 工 作 , 所 以 一 定 要 保 证 后 端 返 回 的 C o n t e n t − T y p e 是 我 们 所 需 要 的 类 型 。 尽管dataType被设置了,但是如果服务器返回的类型不是我们期待的类型的时候,这时可能不会正常工作,所以一定要保证后端返回的Content-Type是我们所需要的类型。 尽管dataType被设置了,但是如果服务器返回的类型不是我们期待的类型的时候,这时可能不会正常工作,所以一定要保证后端返回的Content−Type是我们所需要的类型。
$.ajax()常用选项一览表
属性名 | 属性值 |
---|---|
async | false:同步HTTP请求,true:异步HTTP请求 |
cache | 除了dataType设置为script或者jsonp其他都默认为true,如果设置为false,则在GET请求的URL末尾会自动加上一个防重的参数 |
done | 请求成功自动触发的回调,这个函数会收到自动转换过格式的数据,例如返回的是json格式的数据,则会自动转成JavaScript对象。以及原始的请求对象和返回状态码 |
fail | 请求失败时触发 |
always | 完成时触发的回调无论成功或者失败 |
context | 指定回调函数的this |
data | 发送的数据 |
dataType | 期望接收的数据类型 |
jsonp | 回调函数的名字当进行jsonp请求的时候,默认是”callback“ |
timeout | 请求时长 |
type | GET、POST、PUT、DELETE后两者不一定被所有的浏览器支持 |
url | 请求的url |
便捷方法
方法 | 描述 |
---|---|
$.get(url,data,callback,datatype) | get请求,指定url和回调函数(参数是返回的内容) |
$.post(url,data,callback,datatype) | post请求 |
$.getScript(url,callback) | 添加一个脚本到页面中 |
$.getJSON(url,callback) | 获取json数据 |
使用JSONP
使用$.ajax()请求时可以将dataType设置为jsonp,这样这可以发起一个JSONP跨域请求,可以和另一个选项jsonp配合使用。jsonp选项用于指定前端传过去的回调函数,如果没有指定,jQuery会自动指定一个callback参数。我们可以通过jsonp选项来指定需要调用的回调函数。
当既指定了jsonp、又指定了success回调函数的时候,先调用jsonp指定的回调函数,再调用success回调函数。
jsonp需要服务器端和前端配置来实现跨域请求。关于jsonp请看这篇博客
jQuery Ajax异步请求详解相关推荐
- javaWeb基础六:JQuery—Ajax异步请求
JQuery 之 Ajax 异步请求 1.1 Ajax简介 1.1.1 不使用Ajax存在的问题 在发送请求得到响应时,我们常常只需要刷新网页局部的数据,而不是整个网页的资源(在网页资源过大时,效率会 ...
- 如何用ajax做登录页面,ajax如何制作登录页面?登录页面ajax的请求详解(附完整实例)...
本篇文章主要的讲述了关于ajax登录页面时ajax请求的内容,现在我们一起来看看这篇文章吧 登录页面ajax请求 一.登录验证提示信息//提交登录信息sub.on('click',function(e ...
- ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
- 利用jquery操作ajax,利用jquery对ajax操作,详解原理(附代码)
1.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector ...
- $.ajax的async参数,jquery的$.ajax async使用详解
async在jquery ajax中是一个同步参数了,我们下面来给大家介绍在jquery ajax中使用async时碰到的一些问题与方法介绍,希望例子能给各位同学带来一些帮助哦. async默认是tr ...
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
- jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
- jQuery实现Ajax异步请求的三种方式
jQuery实现Ajax jQuery框架对js原生的ajax进行了封装,封装后的ajax相比原生就变的更加简洁方便,而且功能更加丰富 常用的三种ajax实现的方法: get:$.get(url,[d ...
最新文章
- PHP获取当前时间差8小时的问题
- 将字符串分解成一个表(多行、多列)表值函数[ StrSplit_Tab]
- Darknet_Yolov4实战(二)_安装OpenCV
- java default修饰符_Java基础语法二
- Arm Linux交叉编译和连接过程分析(1)
- using(){},Close(),Dispose()的区别
- SQL Server 2016的新功能–临时数据表
- 天线下倾角示意图_天线下倾角地计算方法
- bootstrap 树
- CnOpenData中国海关统计数据
- 不限网站的视频字幕实时翻译工具(视频只要有声音就可以翻译)
- 游戏夜读 | 游戏关卡设计师
- 静态IP设置(超详细)
- yyds,Python爬虫从小白到Bigboss全套学习路线+视频+资料
- Fluent残差图中continuity不收敛如何处理
- (JZ1162)2018.07.07【2018提高组】模拟B组 1.【NOI2002】贪吃的九头龙
- 虎年开工第一天,你实现下班自由了吗?
- sap pi的操作1
- Qt编写可视化大屏电子看板系统4-布局另存
- 成都拓嘉启远电商:拼多多账号异常怎么回事
热门文章
- html5 appendto,JQuery中html、append、appendTo、after、insertAfter 等使用
- [转]Python中找出dataframe中的重复的行 DataFrame.duplicated()方法
- Linux tar(打包,解打包)命令
- 人脸识别技术有哪些方案
- scp 远程拷贝文件
- BZOJ4833: [Lydsy1704月赛]最小公倍佩尔数-数论
- 已解决(Python语法报错)SyntaxError: invalid syntax
- 门户通专访月光博客:第一博客是如何打造成的
- HBase批量写入数据
- Vue中 v-vif 与v-for 的问题