jsonp
2015-06-17 12:39
633 查看
jsonp
我们知道,普通的ajax请求存在跨域无权限访问的问题,这是浏览器的安全策略在起作用
index.php:
test.html中的js代码:
举个例子,首先test.html与index.php不在同一域中,test.html当访问index.php时:,通常会出现如下图所示的情况:
怎样解决这个问题呢?
这里有两种思路:
第一种是修改服务端代码,为index.php加上header(Access-Control-Allow_Origin:*);允许所有来源的请求访问该资源。
第二种思路就是通过jsonp的方式
下面先介绍第一种方法:
将index.php修改成如下形式:
第二种方法:
首先将服务端代码改成如下形式:
这是用的jquery帮我们封装好的方法,虽然使用起来方便,但是却不利于大家理解jsonp的原理,下面就是原生的js模拟一下jsonp的访问过程
说白了,就是利用src属性能够跨域访问的特性
然而这样使用起来相当不方便,在不使用其他js库的情况下,对这个过程进行封装:
总结:
jsonp就是利用<script>标签中src属性能够跨域访问的特性,先定义了一个回调方法,然后将其当作url参数的一部分发送到服务端,服务端通过字符串拼接的方式将数据包裹在回调方法中,再返回回来
ajax和jsonp其实本质上是不同的东西,虽然jquery将其整合在了一块儿,ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本
jsonp是一种非强制性协议,或者说它更像是一种方法,如同ajax一样,它也不一定非要用json格式来传递数据,只要返回是内容是可执行的js脚本就行了
我们知道,普通的ajax请求存在跨域无权限访问的问题,这是浏览器的安全策略在起作用
index.php:
<?php $info = '{ "code" : 10, "title" : "jsonp", "name" : "rgy" }'; echo $info; ?>
test.html中的js代码:
$.ajax({ type: "post", url: "http://localhost/jsonptest/index.php", dataType: "json", success: function(data) { console.log(data); }, error: function(data) { console.log("fail"); } });
举个例子,首先test.html与index.php不在同一域中,test.html当访问index.php时:,通常会出现如下图所示的情况:
怎样解决这个问题呢?
这里有两种思路:
第一种是修改服务端代码,为index.php加上header(Access-Control-Allow_Origin:*);允许所有来源的请求访问该资源。
第二种思路就是通过jsonp的方式
下面先介绍第一种方法:
将index.php修改成如下形式:
<?php header('Access-Control-Allow-Origin:*'); ?>再通过test.html进行跨域访问就没有问题了,结果如下:
<?php $info = '{ "code" : 10, "title" : "jsonp", "name" : "rgy" }'; echo $info; ?>
第二种方法:
首先将服务端代码改成如下形式:
<?php $callback = $_GET['callback']; $info = '{"code":10,"title":"jsonp","name":"rgy"}'; echo $callback."(".$info.")"; ?>test.html可以通过如下方式进行访问:
$.ajax({ type: "get", url: "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php", dataType: "jsonp", jsonp: "callback", success: function(data) { console.log(data); }, error: function() { console.log("fail"); } <span style="white-space:pre"> </span>});
$.getJSON("http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=?",function(data){ console.log(data); });结果如下:
这是用的jquery帮我们封装好的方法,虽然使用起来方便,但是却不利于大家理解jsonp的原理,下面就是原生的js模拟一下jsonp的访问过程
说白了,就是利用src属性能够跨域访问的特性
var showInfo = function(data){ console.log(data); } var url = "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=showInfo"; var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script);先定义了一个回调方法showInfo,然后将其当作url参数的一部分发送到服务端,服务端通过字符串拼接的方式将数据包裹在回调方法中,再返回回来
然而这样使用起来相当不方便,在不使用其他js库的情况下,对这个过程进行封装:
function loadScript(xyUrl, callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; script.onload = script.onreadystatechange = function(){ if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null;//人工回收内存 if ( head && script.parentNode ) { head.removeChild( script ); } } }; head.insertBefore( script, head.firstChild ); } // var url = "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=showInfo"; loadScript(url, showInfo); var showInfo = function(data){ console.log(data.name); }
总结:
jsonp就是利用<script>标签中src属性能够跨域访问的特性,先定义了一个回调方法,然后将其当作url参数的一部分发送到服务端,服务端通过字符串拼接的方式将数据包裹在回调方法中,再返回回来
ajax和jsonp其实本质上是不同的东西,虽然jquery将其整合在了一块儿,ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本
jsonp是一种非强制性协议,或者说它更像是一种方法,如同ajax一样,它也不一定非要用json格式来传递数据,只要返回是内容是可执行的js脚本就行了
相关文章推荐
- JS设置 按钮为可用和不可用两种状态
- JS获取字符串长度,一个中文算两个字符。
- javascript eval和JSON之间的联系
- Jersey框架put请求发送JSON数据
- 用js判断当前是什么浏览器
- JBoss Netty&WebSocket JS实现与部署方案
- jsp页面静态化例子
- ElasticSearch中json字符串的拼接
- javascript中top、clientTop、scrollTop、offsetTop的讲解
- extjs4.2.1 点滴
- js cookie 的创建读取删除
- JavaScript 闭包学习
- js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
- Django中模型Model添加JSON类型字段的方法
- JavaScript表单验证
- jsoup:解析HTML用法小结
- cjhupload一个简单异步文件上传插件(html5+js)
- Json入门
- JSON入门之二:org.json的基本用法
- JSON之三:获取JSON文本并解释(以google的天气API为例)