也来小谈jsonP
首先,网上的文章千篇一律,不是模棱两可,就是含糊不清(这俩词是一个意思,我是强调这个问题),是的,我们在谈XXX的时候首先第一点是要介绍这玩意是啥玩意的分类,这玩意是嘎哈的,这玩意杂用,这样有啥好处等等.
按照这个顺序.
jsonp===>是在软件开发过程中应用json格式数据来进行服务器端动态调用客户端本地js脚本的一种ajax使用方式（个人理解）。
这看上去好像很抽象，让我分开说。
【首先】jsonp可以说是一种ajax使用方式，但是使用的确实很巧妙。
【其次】jsonp大多数时候只有在html中使用<script>的时候更体现他的NB!
【最后】jsonp据说能克服浏览器不允许跨域的问题,但实际上这根本不是个问题. 分开详解:(下面的东西不要觉得无关紧要,这很重要) 我们大多数时候认为使用xmlHttpRequest发送请求才是在用ajax,但是想想,ajax的意义就是异步请求 ,我们实现页面不刷新,但是跟后台交互就是ajax,这当然包括我们熟悉的html各种标签,比如<img><iframe><scrpt>为啥?因为你发现没有,这些标签都带有src,都请求了服务器,但是都没有刷新页面.此时我们不知不觉使用了ajax.
我要说的是:xmlHttpRequest不允许跨域请求
[啥是跨域?你的地址是192.168.1.107(也许你的外网地址用了域名www.xxx.com)但是你要调用的是176.14.5.9(也许你的外网域名就是www.yyyy.com),这个时候xmlHttpRequest死活都不会允许你去访问的.没为啥,人家考虑安全就这么规定的]
这个时候如果你的程序是分布式的,有几十个服务器,url都不在一个域上,咋办?神人马上想到<img><iframe><scrpt>这些标签的src属性可以啊.
这个时候再仔细看看 <scrpt>是干啥的?就是请求js文件的,js文件加载进来之后第一件事是干啥----执行!
没错,js一直扮演着脚本语言的身份,由浏览器的js引擎来解释执行,js一旦被加载进来就会逐行读取执行.
看到这里,我们猛然想到,如果让<script>远程读取一个地址,地址返回js格式的文本,那么当成js来解释执行,是不是就能很容易别的服务器请求数据了?
如果你迷糊了,再看下下面的文字,你一定清楚.
[<script>标签不在乎你请求的地址是不是当前url上面那个地址,就算你在www.baidu.com这个url上调用www.hao123.com这个url] [<script>标签读取进来的文本浏览器认为是js脚本,会直接执行.] [<script>标签可以随时创建,不是我们家在页面的时候写死的!]
//url不难理解吧?到我的另外一个服务器上请求一下美国今天的价格.- -
var url = "http://my/Othner/remote/server/get/american/tody/price";
//js脚本能看懂吧?创建一个<script>标签
var script = document.createElement('script');
//下面两行如果还需要我解释的话,请关掉页面,去找js基础教程看看
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
//猜猜程序走到这一行会发生啥?
很简单那,会请求http://my/Othner/remote/server/get/american/tody/price这个地址,尽管这个地址是不是我们当前域名的域.
请求完成之后会干啥?我们设想一下这个地址返回如下数据 alert("你好,美国今天的价格是8.5$");
如果如果浏览器发现了<script>标签请求到了这段文本,毫无疑问他会执行这段代码.此时我们就实现了跨域请求数据的方法当然,聪明的你肯定想问:"这样不就不能控制页面模态等待请求,而且显示方式也很不友好了嘛?"
如果你真的想问,我只好解释一下.
服务器可以返回alert.难道就不能返回 myLocalMehod("这是美国数据","这是采集时间",这是执行完这个函数的回调函数)
myLocalMehod是啥?猜猜我们如果在本地预先写好一个函数myLocalMehod,然后函数体如下
function myLocalMehod(americanPrice,genTime,callBack) {
$("#american_price_tip").val(americanPrice);
callBack();
Ext.Msg.alert("更新时间:",genTime);
}
//看完这个函数如果你还不明白这样有啥好处,可以先去百度一下这几个字"ajax调用服务器方法"
最后,最重要的一点,我们都知道socket 吧?不想说太多了.简单点说,不管java .net C C++ 都允许我们在后台做不管你跨域不跨域操作. 所以ajax只要请求后台,我们始终有办法调用跨域的数据,也许我们有的时候就是为了几年前流行的"逆向ajax",就是服务器返回客户端js函数名动态调用而已(你有不懂得地方?比如callBack?) [ (function(){ return function(){alert("这是为啥?")} })()(); ]
先查查这个,你会明白这一切.
到此,终止.
