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


Posted in Javascript onJanuary 05, 2016

由于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跨域的原理是把?随机变一个方法名,然后返回执行的,实现跨域响应的目的。

下面一个是跨域执行的真实例子:

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域(可跨所有域名) 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });  
 </script>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域(可跨所有域名) 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });  
 </script>

jQuery跨域原理:

浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的<Script>标记;我们经常使用<Script>的src属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个url;这个url响应的结果可以有很多种,比如JSON,返回的Json值成为<Script>标签的src属性值.这种属性值变化并不会引起页面的影响.按照惯例,浏览器在URL的查询字符串中提供一个参数,这个参数将作为结果的前缀一起返回到浏览器;

看下面的例子:

<script type="text/javascript" src="http://domain2.com/getjson?jsonp=parseResponse"> </script> 
响应值:parseResponse({"Name": "Cheeso", "Rank": 7}) 
<script type="text/javascript" src="http://domain2.com/getjson?jsonp=parseResponse"> </script> 
响应值:parseResponse({"Name": "Cheeso", "Rank": 7})

这种方式被称作JsonP;(如果链接已经失效请点击这里:JSONP);即:JSON with padding 上面提到的前缀就是所谓的“padding”。那么jQuery里面是怎么实现的呢?

貌似并没有<Script>标记的出现!?OKay,翻看源码来看:

页面调用的是getJSON:

getJSON: function( url, data, callback ) {
 return jQuery.get(url, data, callback, "json");
 },

 继续跟进

get: function( url, data, callback, type ) {
 // shift arguments if data argument was omited
 if ( jQuery.isFunction( data ) ) {
  type = type || callback;
  callback = data;
  data = null;
 }
 
 return jQuery.ajax({
  type: "GET",
  url: url,
  data: data,
  success: callback,
  dataType: type
 });

跟进jQuery.ajax,下面是ajax方法的代码片段:

// Build temporary JSONP function
 if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) {
 jsonp = s.jsonpCallback || ("jsonp" + jsc++);
 
 // Replace the =? sequence both in the query string and the data
 if ( s.data ) {
 s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
 }
 
 s.url = s.url.replace(jsre, "=" + jsonp + "$1");
 
 // We need to make sure
 // that a JSONP style response is executed properly
 s.dataType = "script";
 
 // Handle JSONP-style loading
 window[ jsonp ] = window[ jsonp ] || function( tmp ) {
 data = tmp;
 success();
 complete();
 // Garbage collect
 window[ jsonp ] = undefined;
 
 try {
  delete window[ jsonp ];
 } catch(e) {}
 
 if ( head ) {
  head.removeChild( script );
 }
 };
 }
 
 if ( s.dataType === "script" && s.cache === null ) {
 s.cache = false;
 }
 
 if ( s.cache === false && type === "GET" ) {
 var ts = now();
 
 // try replacing _= if it is there
 var ret = s.url.replace(rts, "$1_=" + ts + "$2");
 
 // if nothing was replaced, add timestamp to the end
 s.url = ret + ((ret === s.url) ? (rquery.test(s.url) ? "&" : "?") + "_=" + ts : "");
 }

 // If data is available, append data to url for get requests
 if ( s.data && type === "GET" ) {
 s.url += (rquery.test(s.url) ? "&" : "?") + s.data;
 }
 
 // Watch for a new set of requests
 if ( s.global && ! jQuery.active++ ) {
 jQuery.event.trigger( "ajaxStart" );
 }
 
 // Matches an absolute URL, and saves the domain
 var parts = rurl.exec( s.url ),
 remote = parts && (parts[1] && parts[1] !== location.protocol || parts[2] !== location.host);
 
 // If we're requesting a remote document
 // and trying to load JSON or Script with a GET
 if ( s.dataType === "script" && type === "GET" && remote ) {
 var head = document.getElementsByTagName("head")[0] || document.documentElement;
 var script = document.createElement("script");
 script.src = s.url;
 if ( s.scriptCharset ) {
 script.charset = s.scriptCharset;
 }
 
 // Handle Script loading
 if ( !jsonp ) {
 var done = false;
 
 // Attach handlers for all browsers
 script.onload = script.onreadystatechange = function() {
  if ( !done && (!this.readyState ||
  this.readyState === "loaded" || this.readyState === "complete") ) {
  done = true;
  success();
  complete();
 
  // Handle memory leak in IE
  script.onload = script.onreadystatechange = null;
  if ( head && script.parentNode ) {
  head.removeChild( script );
  }
  }
 };
 }
 
 // Use insertBefore instead of appendChild to circumvent an IE6 bug.
 // This arises when a base node is used (#2709 and #4378).
 head.insertBefore( script, head.firstChild );
 
 // We handle everything using the script element injection
 return undefined;
 }

上面的代码第1行到第10行:判断是JSON类型调用,为本次调用创建临时的JsonP方法,并且添加了一个随机数字,这个数字源于用日期值;

 关注第14行,这一行相当关键,注定了我们的结果最终是<Script> ;然后是构造Script片段,第95行在Head中添加该片段,修成正果;

 不仅仅是jQuery,很多js框架都是用了同样的跨域方案,这就是getJSON跨域的原理。

更多精彩内容,请点击《ajax跨域技术汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 #Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 #Javascript
JavaScript原型及原型链终极详解
Jan 04 #Javascript
jQuery实现简单的点赞效果
May 29 #Javascript
You might like
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
vue实现购物车案例
2020/05/30 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python延时操作实现方法示例
2018/08/14 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python反转列表的三种方式解析
2019/11/08 Python
python实现小世界网络生成
2019/11/21 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
yy婚礼司仪主持词
2014/03/14 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP