话说上个世纪60年代初,在美国加州的森尼维尔市,伴着他的第一声哭声,Brendan Eich开始了他的一生。和普通的孩子一样,他度过了快乐的童年,懵懂的青年时代,也顺利的读完了学士和硕士学位,开始了他程序员的生活。
毕业以后他在Silicon Graphics玩了7年的操作系统和网络编程(难道一个人公司的感情也会有7年之痒)。
离开了他的老东家之后,他来到了MicroUnity Systems Engineering,玩起了microkernel和DSP编程,也是在这时他第一次接触了MIPS架构的gcc R4000端口。
他在Netscape和Mozilla的时候达到了事业上巅峰。1995年4月,他开始玩起了Mocha,经过他一段时间的努力Mocha变得很强大了,于是在同年的9月,一个华丽的变身,更名为livescript并且第一次被装在Netscape Navigator 2.0里。在同年的12月4日,在与Sun公司的的联合声明中,livescript变身到最终形态,JavaScript神兵横空出世。
由于JavaScript神兵太过强大,人们给他加了封印。可是人总是有私心的,于是又留下了一些打开封印的办法。
淡扯完了,下面介绍下封印和如何解开封印。
Same origin policy
先说下封印跨域访问,javascript同源策略的限制,即a.com域名下的js无法操作b.com域名下的对象(跨域)。下面举了几个例子,看起来更形象一些。
URL 1 | URL 2 | 是否允许通信 | 备注 |
http://www.a.com/a.js | http://www.a.com/b.js | 是 | 同域名 |
http://www.a.com/a.js | http://www.a.com:8080/b.js | 否 | 同域名不同端口 |
http://www.a.com/a.js | https://www.a.com/b.js | 否 | 同域名不同协议 |
http://www.a.com/a.js | http://127.0.0.1/b.js | 否 | 域名与其IP |
http://www.a.com/a.js | http://www.b.com/b.js | 否 | 主域名子域名 |
http://www.a.com/a.js | http://www.b.com/b.js | 否 | 不同域名 |
如果对Same origin policy还有什么不了解的可以到http://en.wikipedia.org/wiki/Same_origin_policy看下。
下面说下解开跨域访问这个封印的几个主要手印。
手印一JSONP,即JSON with Padding。由于封印同源策略的限制,跨域访问被封印了起来。如果需要解开封印进行跨域请求,得使用html的script标记,进行跨域请求,在response中,返回要执行的javascript代码、JSON对象等。这种解开封印进行跨域请求的方式称为JSONP。
如在www.a.com域名下有如下的html文件:
<html>
<head>
</head>
<body>
<script type="text/javascript" id="script1"></script>
<input type="text" id="a" name="a">
<input type="button" value="click" onclick="document.getElementById('script1').src='http://www.b.com/response.js'">
</body>
</html>
在www.b.com下的响应的response.js代码
var a=1;//设置变量
alert("Hello World");//调用函数
document.getElementById("a").value="Hello World";//设置表单
大多数时候,为了动态,我们是这么玩的。把www.a.com下的htm改成
<html>
<head>
</head>
<body>
<script type="text/javascript" id="script1"></script>
<input type="text" id="a" name="a">
<input type="button" value="click" onclick="document.getElementById('script1').src='http://www.b.com/response.jsp'">
</body>
</html>
把www.b.com/response.js改成response.jsp
<%out.print("var a=1;alert(\"Hello World\");document.getElementById(\"a\").value=\"Hello World\"");%>
虽然URL上看只多了一个p,但是手印JSONP却在解开封印的同时变得更具破坏力。
在手印JSONP的基础上,仙人YUI、Jquery、Dojo、Ext等纷纷研究出了自己的手印。
首先我们看看仙人YUI做了哪些工作。
YUI3.2的jsonp的使用方法如下(下面都是围绕YUI3.2分析的):
var url = "http://yuilibrary.com/gallery/api/random?callback={callback}";
function handleJSONP(response){//...};
//...
Y.jsonp(url,handleJSONP);
//...
ps:源码中examples/jsonp/jsonp_gallery.html有详细内容。
结印很快,调用很方便,下面看看是怎么实现的。
下载http://developer.yahoo.com/yui/3/,选择Full Developer Kit版,将yui_3.2.0.zip解压后,在yui/buil/jsonp目录下会看到6个文件:
jsonp.js | jsonp-debug.js | jsonp-min.js |
jsonp-url.js | jsonp-url-debug.js | jsonp-url-min.js |
主要看下jonp.js这个文件,在第8行
YUI.add('jsonp', function(Y) {
//...
为YUI这个function动态添加了一个叫jsonp的function。后面的代码中用到了大家耳熟能详的prototype,apply和unshift等JavaScript神兵的秘法,就不一一分析了,直接看第133行到137行之间的代码。
//...
Y.Get.script(url, {
onFailure: wrap(config.on.failure),
onTimeout: wrap(config.on.timeout),
timeout : config.timeout
});
//...
这里有个Y.Get.script(...)的调用,有url,onFailure,onTimeout和timeout参数,这个到底是做什么的呢?
看下yui/build/yui/get.js这个文件。
第30行到726行在做了一次漂亮的闭包的同时,给Y.Get赋了值。看下505行到725行,就会发现Y.Get大概长成这个样子
{
PURGE_THRESH:20,
_finalize:function(id){ ... },
abort: function(o) { ... },
script: function(url, opts) { return _queue("script", url, opts); },
css: function(url, opts) { ... }
}
终于找到了上面提到的Y.Get.script这个function,可却发现里面另有洞天,还有个_queur(...)的调用,不入虎穴不得虎子,看看这个叫_queue的funciton里面到底有神马浮云。
跳到362行,找到了_queue的实现。不过别急,先看看上边353到361的注释
/**
* Saves the state for the request and begins loading
* the requested urls
* @method queue
* @param type {string} the type of node to insert
* @param url {string} the url to load
* @param opts the hash of options for this request
* @private
*/
说_queue对request的状态做了保存,而且开始load。好看代码吧。372行到378行和第389行的代码:
//...
queues[id] = Y.merge(opts, {//这个merge的实现也很精彩的,在yui/build/yui/yui.js中。
tId: id,
type: type,
url: url,
finished: false,
nodes: []
});
//...
_next(id);
//...
发现实现了保存request的状态,也同时看出这里没有实现load的而是在第389行多了个_next(id)的调用。这个_next(...)到底是干什么的呢?(这个_next才是主角,要详细的分析分析)
//...
d = w.document;
h = d.getElementsByTagName("head")[0];
//...
if (q.timeout) {
// q.timer = L.later(q.timeout, q, _timeout, id);
q.timer = setTimeout(function() {
_timeout(id);
}, q.timeout);
}
//...
n = _scriptNode(url, w, q.attributes);
//...
if (insertBefore) {
//...
} else {
h.appendChild(n);
}
//...
首先取document,然后领h只想head标签,n是通过_scriptNode再到_node,返回一个document.createElement("script"),在_node中通过一个漂亮的for(i in attr){ ... }循环完成了属性绑定。最后,如果没有指定insertBefore元素,那么就在head标签里,把上边创建的script标签append进去。
至此,仙人YUI的JSONP实现分析完毕。下面将要分析的是仙人Jqurey是怎么实现JSONP的。
登录http://jquery.com/,选择DEVELOPMENT (179KB, Uncompressed Code)下载源码,这个看着比PRODUCTION (26KB, Minified and Gzipped)的要舒服些。
先看看在Jquery下JSONP怎么使用。往上的例子大多是用$.getJSON,而且介绍的很好。JE上有好多牛人写了具体的分析和实现过程。再写一个有人会审美疲劳,所以下面的例子用的是更为强悍的$.ajax({dataType:'script'...})。因为它加载的是一段script代码,而不仅仅是一个json。下面看看是怎么用的。
$.ajax({
url: "http://2520011.appspot.com/js/cross_domain_demo.js",//为了这个例子在GAE放了个测试的js
dataType: 'script',
success: function(data ){
alert(data);
}
});
接口的api设计的也很方便,下面看看他是怎么实现的。
在源码5762行,我们找到了ajax的实现。跳过中间层层叠叠的无关代码,来到5859行,在这里柳暗花明了,我们终于找到了渴求已久的源码。
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
//...
script.src = s.url;
//...
head.insertBefore( script, head.firstChild );
算上插入就4行。。。Jquery真的够精简。牛人一般都这样吧,O(∩_∩)O哈哈~
到这里我们分析玩了仙人Jquery的实现,真的是一个比一个牛,下一段,我们一起分析下Dojo的实现。
to be continued......
ps:周一到周五每天至少一更,周末休息。
分享到:
相关推荐
javascript跨域请求包装函数与用法示例.docx
XDomain 是 JavaScript CORS 跨域请求的一个替代产品,无需任何服务器端的配置。只需要在同域下放置一个 proxy.html 文件即可。该库利用 XHook 来获取所有 XHR,可以无缝的和其他库协同工作。 Features Simple ...
本文实例讲述了javascript跨域请求包装函数与用法。分享给大家供大家参考,具体如下: 一、源码 // 定义AJAX跨域请求的JSON (function(){ if(typeof window.$JSON== 'undefined'){ window.$JSON= {}; }; $JSON....
cors-proxy 基于Java Jersey的CORS代理绕过javascript跨域请求限制关于由于浏览器实施的CORS限制,来自浏览器的Javascript无法访问来自其他域的资源。 该Web代理将绕过这些限制。环境Java 1.7以上Tomcat 7以上用法在...
假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的。 解决方式: 一、window.name 1、 服务器返回 代码...
JavaScript安全性不允许POST的跨域请求(GET可以与服务器配合使用JSONP,有些勉强)。SOAP只能使用POST请求,所以无法直接跨域。一般的解决方案是使用服务器代理(由同域服务器跨域请求后返回),但导致过于复杂...
什么是跨域请求? 简单的理解就是向不在同一个域名的服务器文件发出请求。这个还是用实际的例子来说明一下吧,比如baidu.com向cxyblog.com发送请求,这两个域名是不同的,那么这就是跨域了,出于安全性的考虑,这样...
主要介绍了javascript跨域原因以及解决方案分享,十分的细致全面,有需要的小伙伴可以参考下。
由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求。 那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理: 1.JavaScript 在原生js(没有jQuery...
由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器...接下来通过本文给大家介绍Springboot如何优雅的解决ajax+自定义headers的跨域请求 ,需要的朋友可以参考下
Javascript跨域访问是web开发者经常遇到的问题,什么是跨域,就是一个域上加载的脚本获取或操作另一个域上的文档属性。下面这篇文章主要介绍了JavaScript用JSONP跨域请求数据的方法,需要的朋友可以参考借鉴,下面来...
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、...
一、什么是跨域请求 跨域: 简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。这显然是不安全的。为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源...
它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用XMLHttpRequest对象在后台与服务器交换数据,XMLHttpRequest 是 AJAX 的基础,它允许客户端 JavaScript 通过 HTTP请求连接到远程服务器...
解决vue $http的get和post请求跨域问题 vue $http的get和post请求跨域问题 首先在config/index.js中配置proxyTable proxyTable: { '/api':{ // target:'http://jsonplaceholder.typicode.com', target:'...
启用对任何JSON API的跨域请求的HTTP代理。 有关文档,请参见 。 请参阅页面以获取更改日志。 发展 代码是结合JavaScript和TypeScript编写的。 该应用程序被编写为使用部署到 ,但可以通过执行以下操作在本地运行:...
javascript 跨域问题以及解决办法 什么是跨域问题? 跨域这个问题是由于浏览器的同源策略引起的,请求的URL地址,必须与浏览器的URL是相同协议、相同域名、相同端口的,否则是不允许访问的 浏览器URL 要访问的...