JSONP跨域技术
JSONP其实跟ajax都可以跨域进行数据请求,它们之间却没什么联系,ajax的核心是通过XmlHttpRequest获取非本页内容,而JSONP的核心则是动态添加 script 标签来调用服务器提供的js脚本。 下面一个简单的跨域,先在页面中写一个函数 <script> function handler(data){ alert("本地函数,跨域的remote.js在调用我,并提供给我data数据:" + data.message); } </script>
然后加载远程的js文件,这个文件只做了调用handle的动作,并传入了参数: <script src="http://lefeier.net/ext/js_test/remote.js"></script>
//romote.js的内容:
//handler({"message" : "我是远程js带来的消息"});
这就跨域成功了,但是这样做会有一个明显的问题,远程的js调用本地的函数,它不可能只服务于一个页面的函数,它会服务很多的对象,这些对象的函数都不相同,问题是怎样让远程的JS知道本地的函数是什么? JSONP的核心手段 <script> function handlerResponse(data) { alert("我的IP是:" + data.ip); } var script = document.createElement("script"); // url地址返回的是一段javascript代码 script.src = "http://freegeoip.net/json/?callback=handlerResponse"; document.body.insertBefore(script,document.body.firstChild); </script>
执行成功 然而JQuery把JSONP封装在ajax中了,这里需要明白的是JSONP和ajax的XmlHttpRequest有本质上的区别,实际上利用了拥有跨域获取资源的能力的标签script,比如img,iframe,script 这些带有src属性的标签天生就有获取跨域资源的能力; 通过在请求中定义回调函数的名字,和传入回调函数的json数据,实现跨域获取信息。
HTML5给script元素增加了onerror属性并不是所有浏览器都支持(IE6~8与opera11都不支持,safari,chrome,firefox,ie9支持),开发人员被迫使用倒计时的手段来检测是否得到了响应,但这样不尽人意。
当然还有一些其他的手段来检测: JSONP的回调函数总是在script的onload事件(IE的onreadystatechange)之前就被调用,因此在回调执行之时,为script标签增加一个属性,然后等到onload发生的时候,检查有没有这个属性,来以此判定是否请求成功,具体请参见:http://www.cnblogs.com/rubylouvre/archive/2011/02/13/1953087.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |