jquery Ajax跨域请求
这是jquery api文档对跨域请求的解析:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用JSONP类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。
我们通过demo来参悟上面的解析:
$.ajax({
type: "get",
url: "http://www.yourdomain.com/site/test",//实际上访问时产生的地址为: http://www.yourdomain.com/site/test?callback=jsonpCallback&id=1
data: { id: },
dataType: "jsonp",
success: function (data) {
alert(data.statu);
},
error: function (XMLHttpRequest,textStatus,errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
上面就是一个最简单的跨域访问请求了。好了,来说说跟普通ajax的区别。首先实际上访问时的地址为:
http://www.yourdomain.com/site/test?callback=随机数&id=10。参照api定义:
使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。
这个随机数是jQuery自动生成的。采用jsonp类型情况下,最终生成的url就是如此的。
接下来,看看后台:
服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。
这是服务器(C# MVC)的代码:
[HttpGet]
public string test(string callback, string id)
{
return callback + "(" + "{\"statu\":" + id + "});";
}
一个有效的JSONP请求,需要在JSON数据前加上回调函数名。回调函数名是上面url中callback传递过来的值。此时服务器传递过来的值为:
jQuery18308788135794457048_1419557549884({"statu":""});
alert(data.statu);也能正确的输出“1”。有人会说json数据前还有回调函数名么,不用处理也能正常输出data.statu??是的,这就是JSONP。
至此,API的前3句已经解析清楚了。就剩后半句了。上面的callback是jQuery随机生成的,回调函数名也是固定为callback,倘若用户要自己定义呢?这就需要用到最后一句话了。
如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。
ajax代码如下:
$.ajax({
type: "get",
url: "http://www.yourdomain.com/site/test",//实际上访问时产生的地址为: http://www.yourdomain.com/site/test?mycallback=jsonpCallback&id=1
data: { id: },
dataType: "jsonp",
jsonp: "mycallback",
jsonCallback: "jsonpCallback",
success: function (data) {
alert(data.statu);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
} });
看到代码应该懂了吧。jsonp属性是设置传递过去的请求参数名的。jsonCallback属性则是自定义传递过去的参数。此时实际访问的url为:
http://www.yourdomain.com/site/test?mycallback=jsonpCallback&id=1 接下来就不细说了。后台接收代码:
[HttpGet]
public string test(string mycallback, string id)
{
return mycallback + "(" + "{\"statu\":" + id + "});";
}
接收过来的数据:
jsonpCallback({"statu":""});
强调一下的就是。JSONP类型 ajax只支持get请求,post请求的情况已经测试过,是不行的。
至此,api的解析全部解析透了。
接下来,就是曲折版了。
function test() {
alert("I am back~~");
}
$.ajax({
type: "get",
//async: false,
url: "http://www.yourdomain.com/site/test", //实际上访问时产生的地址为: test?callback=jsonpCallback&id=10
data: { id: },
cache: false, //默认值true
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"test",
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
//如果这里自定了jsonp的回调函数,则回调函数先起作用,后是success函数
success: function (data) {
alert(data.statu);
//alert(json.message);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
假如你传递过去的jsonpCallback参数为一js函数的话,也是可以的。成功回调之后,会首先调用jsonpCallback函数,然后是success函数。也就是会先alert("I am back~"),后alert(10)。
注意:jsonpCallback属性不能为匿名函数。即不能如下:
$.ajax({
type: "get",
//async: false,
url: "http://www.yourdomain.com/site/test4", //实际上访问时产生的地址为: test4?callback=undefinedk&id=10
data: { id: },
cache: false, //默认值true
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: function () { },
//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
//如果这里自定了jsonp的回调函数,则回调函数先起作用,后是success函数
success: function (data) {
alert(data.statu);
//alert(json.message);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
});
这样的话,能正常返回。但是会先跑匿名函数,然后跑error函数。
jquery Ajax跨域请求的更多相关文章
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
- jquery+ajax跨域请求webservice
最近几天在学习webservice...在学习的时候便想到用ajax的方式去请求webservice.. 一直在测试..如果这个被请求的webservice和自己使用的是同一个端口号.则不用考虑那aj ...
- jQuery AJAX 跨域请求
跨域请求 只要 dataType : 'jsonp', jsonp:"jsoncallback", 然后返回一个json格式的就可以了 <!doctype html> ...
- jquery.ajax 跨域请求webapi,设置headers
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...
- 关于jquery ajax跨域请求获取response headers问题
背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
- jquery ajax跨域请求webservice webconfig配置
<configuration> <system.web> <compilation debug="true" targetFramework=&quo ...
随机推荐
- windows zabbix_agent 客户端安装部署
1.下载客户端:zabbix_agentd.zip 2.在c盘创建文件夹zabbix,解压conf和bin目录 3.将conf下的zabbix_agentd.win.conf 修改为zabbix_ag ...
- C++实现进制转换
知识内容: 1.string类基本使用 2.10进制转2进制 3.10进制转8进制和10进制转16进制 4.上述3种转换的递归实现 注:进制的表示: 二进制:开头是0b,eg: 0b1011(注:c/ ...
- 完美解决 开机无法启动 提示0xc000000e
注:昨天装系统碰到这个问题,这个方法说的较详细,我的是WIN7系统,开机提示引导文件错误,代码为0xc000000e 无法进入系统,使用PE进入后,在运行里输入CMD,然后按下文红字开始操作 完美解决 ...
- 利用SQLServer查询分析器获取存储过程的返回值,检查测试存储过程
1.存储过程没有返回值的情况(即存储过程语句中没有return之类的语句)用方法 int count = ExecuteNonQuery(..)执行存储过程其返回值只有两种情况(1)如果通过查询分析器 ...
- Linux 环境下wordpress后台安装主题及插件需要FTP帐号怎么办?
vi httpd.conf 查看user是哪个用户 我的是daemon 然后执行 chown daemon:daemon -R /data/wordpress /data/wordpress 是我的 ...
- 将网页的部分位置嵌入Html网页
<div align="center" style="margin:0 auto;"> <div style="width:500p ...
- Etcd的基本使用
etcd 是 CoreOS 团队于 2013 年 6 月发起的开源项目,它的目标是构建一个高可用的分布式键值(key-value)数据库,基于 Go 语言实现,内部采用 raft 协议作为一致性算法. ...
- java 整数存储为2进制补码形式
今天早上看java的源代码,发现: 用计算器转成十进制后是下面这个值: 然后我就纳闷了,Integer的最小值,不可能怎么大吧? 于是果断写代码验证: 谜底揭开: 0x80000000 是Intege ...
- MySQL数据库篇之索引原理与慢查询优化之一
主要内容: 一.索引的介绍 二.索引的原理 三.索引的数据结构 四.聚集索引与辅助索引 五.MySQL索引管理 六.测试索引 七.正确使用索引 八.联合索引与覆盖索引 九.查询优化神器--explai ...
- Perl 变量:数组变量
Perl 数组Perl 数组一个是存储标量值的列表变量,变量可以是不同类型.数组变量以 @ 开头.访问数组元素使用 $ + 变量名称 + [索引值] 格式来读取. 1.创建列表.数组1.数组变量以 @ ...