js和jquery使用jsonp解决跨域
来源:互联网 发布:唯品会与淘宝的区别 编辑:程序博客网 时间:2024/05/02 05:04
- 跨域
- 使用 jsonp 来解决这个问题
- 跨域
跨域
理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
何谓同源:
URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
由于同源策略,而且随着互联网的发展,“同源策略”越来越严格。目前,如果非同源,共有三种行为收到限制。
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- Ajax 请求不能发送
同源政策规定,AJAX 请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
- JSONP
- WebSocket
- CORS
文本将介绍分别 js 和 jquery 来使用 jsonp。
后面所有的例子都是运行在服务器环境下的。
好的,用一个简单的例子来引入问题,先看下面的demo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script></head><body> <script> $(document).ready(function(){ document.write('加载baidu静态资源公共库'); }); </script></body></html>
这是我们开篇用的那个例子,在服务器环境下,能够正常运行,页面会有显示,也就是说我们成功的加载了来自于百度静态资源公共库中的 jquery
。
对的,我们跨域了吗?我们跨域了吗?
在这个例子中,其实我们已经跨域了,因为 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
这个 jquery
来自于百度静态资源公开库,百度的这个域名肯定与我们本地的不同,但是我们却成功的加载了这段 jquery
代码到我们的页面上。这是为什么呢?
浏览器会进行同源检查(看清楚,这里是浏览器会进行同源检测。),这导致了跨域问题,然而这个跨域检查还有一个例外那就是 HTML 的 <script>
标记;我们经常使用 <script>
的 src 属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个 url;这个 url 响应的结果可以有很多种,比如 JSON,返回的 json 值成为 <Script>
标签的 src 属性值.这种属性值变化并不会引起页面的影响。 按照惯例,浏览器在 url 的查询字符串中提供一个参数,这个参数将作为结果的前缀一起返回到浏览器;
Web页面上调用 js 文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如 <script>
、<img>
、<iframe>
)
在浏览器中,<script
、<img>
、<iframe>
、<link>
等标签都可以加载跨域资源,但浏览器限制了 JavaScript 的权限使其不能读、写加载的内容。
另外同源策略只对网页的 HTML 文档做了限制,对加载的其他静态资源如 javascript 、 css、图片等仍然认为属于同源。
这就是为什么我们可以使用 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
来加载跨域的资源的原因。
OK,下面我们来看一个 没跨域的情况下 使用 jquery 发出请求加载数据的例子:
后台代码(result.php):
<?php if($_GET) { $str = '{"id":"get"}'; echo $str; } if($_POST){ $str = '{"id":"post"}'; echo $str; }?>
我们在 demo.html 中使用 jquery 分别使用 GET 和 POST 方式 向 result.php 发出请求:
demo.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <a href="#" id="jq-get">jq-get</a> <br> <a href="#" id="jq-post">jq-post</a> <br> <p>后台返回的数据如下:</p> <div id="result"></div> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script> <script> $('#jq-get').click(function(){ $.ajax({ type: "GET", url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php", data: { "a": 1 }, dataType: "json", success: function(data){ $('#result').html(data.id); } }); }); $('#jq-post').click(function(){ $.ajax({ type: "POST", url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php", data: { "a": 1 }, dataType: "json", success: function(data){ $('#result').html(data.id); } }); }); </script></body></html>
demo.html 与 result.php 均在 8082 端口下,不存在跨域的情况,
运行效果图如下:
可见,在没有跨域的情况下,是很好用的。
下面,我们将 demo.html 移到本机的另一个端口(port: 3000)下,那么 demo.html 与 result.php 就存在了跨域的情况:
使用 jsonp 来解决这个问题
$('#jq-get').click(function(){ $.ajax({ type: "GET", url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php", data: { "a": 1 }, dataType: "jsonp", success: function(data){ $('#result').html(data.id); } });});
result.php也有一点改动
if($_GET) { $jsonp = $_REQUEST["callback"]; $str = '{"id":"get"}'; $str = $jsonp . "(" .$str.")"; echo $str;}
关于 jsonp 为什么要这么写,结合文章开头说的 <script>
标签拥有跨域的能力以及之前的一篇文章 关于JSON和JSONP的详解
那么,我们 POST 方式 能不能这样用呢?
$('#jq-post').click(function(){ $.ajax({ type: "POST", url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php", data: { "a": 1 }, dataType: "jsonp", success: function(data){ $('#result').html(data.id); } });});
我们测试以后可以发现,虽然我们设置的是 POST 方式,但是调用的还是 GET 方法。那么 POST 方式跨域要如何解决呢?
我们需要在后台代码(result.php)文件头加入请求头和跨域权限:
<?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods:POST'); if($_POST){ $str = '{"id":"post"}'; echo $str; } ?>
- js和jquery使用jsonp解决跨域
- 使用jQuery与JSONP解决跨域问题
- 如何使用jQuery的jsonp解决跨域问题
- jquery使用jsonp解决json跨域访问的问题
- Struts2使用jQuery JSONP解决跨域问题
- 网页跨域之jsonp的使用,包含jquery和js实现
- js跨域交互(jQuery+php)之jsonp使用心得
- js跨域交互(jQuery+php)之jsonp使用心得
- JS跨域交互(jQuery+php)之jsonp使用心得
- 【js】Jsonp解决js跨域问题
- JSONP解决跨域提交数据(jquery jsonp Ajax)
- JSONP解决跨域提交数据(jquery jsonp Ajax)
- JS & jQuery 中的 jsonp (跨域请求)
- 普元EOS中, 子系统和portal不在同一个域中,使用jquery的jsonp来解决portal跨域访问
- jsonp和java联合使用解决跨域问题
- js跨域简单解决(jsonp)
- Jquery使用jsonp跨域访问
- jquery使用jsonp进行跨域调用
- datatables 前端表格插件 初始化表格插件
- 设计模式之工厂方法模式
- liux grep和sed命令的使用
- python 集合
- 用两个栈实现二进制到八进制的转换C语言
- js和jquery使用jsonp解决跨域
- liux 重定向
- 父类指针的步长和子类指针的步长不一样
- Appium自动化测试(一)环境安装+实例登录
- Android 编程下监视应用程序的启动
- mysql定时任务
- 最近一周的日期选择设置
- python自定义函数实现最大值的输出
- 1、在MyEclipse的控制台中输出老师信息(0105)