您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

jquery中ajax处理跨域的三大方式_jquery

2024/6/23 0:35:31发布37次查看
由于js同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法:
一、处理跨域的方式:
1.代理
2.xhr2
html5中提供的xmlhttprequest level2(及xhr2)已经实现了跨域访问。但ie10以下不支持
只需要在服务端填上响应头:
header(access-control-allow-origin:*); /*星号表示所有的域都可以接受,*/ header(access-control-allow-methods:get,post);
3.jsonp
原理:
ajax本身是不可以跨域的,
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
其实设置了datatype: 'jsonp'后,$.ajax方法就和ajax xmlhttprequest没什么关系了,取而代之的则是jsonp协议。jsonp是一个非官方的协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。
ajax的跨域写法:
(其余写法和不跨域的一样):
比如
/*当前网址是localhost:3000*/ js代码 $.ajax({ type:get, url:http://localhost:3000/showall,/*url写异域的请求地址*/ datatype:jsonp,/*加上datatype*/ jsonpcallback:cb,/*设置一个回调函数,名字随便取,和下面的函数里的名字相同就行*/ success:function(){ 。。。 } }); /*而在异域服务器上,*/ app.js app.get('/showall',students.showall);/*这和不跨域的写法相同*/ /*在异域服务器的showall函数里,*/ var db = require(./database); exports.showall = function(req,res){ /**设置响应头允许ajax跨域访问**/ res.setheader(access-control-allow-origin,*); /*星号表示所有的异域请求都可以接受,*/ res.setheader(access-control-allow-methods,get,post); var con = db.getcon(); con.query(select * from t_students,function(error,rows){ if(error){ console.log(数据库出错:+error); }else{ /*注意这里,返回的就是jsonp的回调函数名+数据了*/ res.send(cb(+json.stringify(r)+)); } }); }
二、解决ajax跨域访问、 jquery 的跨域方法
js的跨域问题,我想很多程序员的脑海里面还认为js是不能跨域的,其实这是一个错误的观点;有很多人在网上找其解决方法,教其用iframe去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用jquery,一个getjson方法就搞定了,而且是一行代码搞定。
下面开始贴出方法。
//跨域(可跨所有域名)$.getjson(http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?,function(json){ //要求远程请求页面的数据格式为: ?(json_data) //例如: //?([{_name:湖南省,_regionid:134},{_name:北京市,_regionid:143}]) alert(json[0]._name); }); $.getjson(http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?,function(json){ //要求远程请求页面的数据格式为: ?(json_data) //例如: //?([{_name:湖南省,_regionid:134},{_name:北京市,_regionid:143}]) alert(json[0]._name); });
注意,getregion.aspx中,在输出json数据时,一定要用request.querystring[jsoncallback],将获取的内容放到返回json数据的前面,假设实际获取的值为42342348,那么返回的值就是 42342348([{_name:湖南省,_regionid:134},{_name:北京市,_regionid:143}])
因为getjson跨域的原理是把?随机变一个方法名,然后返回执行的,实现跨域响应的目的。
下面一个是跨域执行的真实例子:


jquery跨域原理:
浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是html的 响应值:parseresponse({name: cheeso, rank: 7}) 响应值:parseresponse({name: cheeso, rank: 7})
这种方式被称作jsonp;(如果链接已经失效请点击这里:jsonp);即:json with padding 上面提到的前缀就是所谓的“padding”。那么jquery里面是怎么实现的呢?
貌似并没有
 不仅仅是jquery,很多js框架都是用了同样的跨域方案,这就是getjson跨域的原理。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product