先前因为没工作需要,不存在需要跨域访问的应用,一直没接触过JSONP,只是了解个大概意思,即是插入一个SCRIPT标签,设置src,让浏览器加载并自动运行,但具体怎么过程,有什么常见的约定等等不甚了解,今天有机会接触了,具体说一下. 1. 其实JSONP也是一个”hack”应用 由于以前的应用没现在这么复杂,跨域访问浏览器端没提供标准的方法(可能那时还根本没考虑过..),当各种应用不断的丰富之后,需求也随之而来了,既然需求来了,但浏览器没提供直接的实现,此时就只能根据已有功能,玩些雕虫小技,待转几个弯,兜几个圈之后,JSONP就出来了. 2. hack的背后实现 浏览器加载标签的静态资源是可以跨域访问的,如常见的 link:href, script:src,img:src等等,没有安全限制,可直接访问,JSONP正是利用了这个特点,加载不同域上的脚本文件. 待把脚本script标签插入DOM上的head标签内,并设置好src属性时,浏览器就开始加载脚本,脚本下载完后直接运行返回的文本内容. 3. 我们需要的是数据而非源码 hack的过程已经了解,但目前为止作用不大,因为浏览器连接返回后获得资源就是JavaScript源码,并会立即执行这些源码,你无法异想天开的将这文本放到一个可控的eval里运行之后获得结果.假如这源码是任意的,那运行过程根本无法控制,而我们需要的是数据,而非源码! 4. 普遍的相关约定 如,存在一个全局回调函数 function jsonp_callback(data){ alert(data.a); } 发起时 : jsonp.connect(‘http://www.example.com/getdata.php?callback=jsonp_callback’); // jsonp_callback( /**数据*/{a:’b'} ); 浏览器端请求返回后将立即运行 jsonp_callback( /**数据*/{a:’b'} ); |