JSONP

我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>。那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

function dll(response){
alert(response.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=dll";
document.body.insertBefore(script,document.body.firstChild);

三步走:创建script、指定src,插入到文档。

jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称,就可以用下面的形式来就加载JSON数据。
url?callback=?
jQuery.getJSON(url + "&callback=?", function(data)  {  
  alert(data.a + data.b);  
});
服务端当然也要提供JSONP的支持,其实只要提供读写callback这个params就可以了。
跨域资源共享(CORS)
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。

CORS与JSONP相比,更为先进、方便和可靠。

1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin * 
为了防止XSS攻击我们的服务器, 我们可以限制域,比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。

跨域技术(JSONP与CROS)的更多相关文章

  1. js-其他跨域技术(JSONP`Comet)

    ###1.  JSONP JSONP由两部分组成:回调函数和数据 JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL eg: function ha ...

  2. 跨域技术-jsonp

    JSONP是JSON with padding 的简写,其有两个部分组成,一个是回调函数,一个是数据,其基本格式如下 function handleResult(result){ alert(resu ...

  3. 循序渐进Python3(十一) --6--  Ajax 实现跨域请求 jsonp 和 cors

    Ajax操作如何实现跨域请求?       Ajax (XMLHttpRequest)请求受到同源策略的限制.       Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...

  4. 跨域利器JSONP(转)

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  5. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  6. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  7. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  8. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  9. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...

  10. jquery跨域解决方案JSONP

    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...

随机推荐

  1. Yii2控制台程序最佳实践

    模板工程标准的控制台程序要素: (1)完整明确文字提示用户(并且使用红,绿,黄三种颜色标识提示文字:红色为错误相关,绿色为成功相关,黄色为进行中提示) (2)告知用户运行进度(完成任务的一部分即显示进 ...

  2. Javassist之常用API的应用 02

    测试模型代码: package org.study2.JavaSenior.annotation.javassistDemo; /** * @Auther:GongXingRui * @Date:20 ...

  3. js模拟ctrl+c的问题

    1.这种方式只可以对显示的textbox和textarea使用,对于display:none和visibility hidden 以及其他标签无效 var message = document.get ...

  4. DotNetty 实现 Modbus TCP 系列 (四) Client & Server

    本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 Client public class ModbusClient { public string Ip { get; } ...

  5. 安装.Net Standard 2.0, Impressive

    此版本的.NET Standard现在支持大约33K的API,与.NET Standard 1.x支持的14K API相比.好的是大部分API来自.NET Framework.这使得生活更容易将代码移 ...

  6. Jquery中val方法使用的坑

    Jquery中val方法使用 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox.多选selec ...

  7. BZOJ1319Sgu261Discrete Roots——BSGS+exgcd+原根与指标+欧拉定理

    题目描述 给出三个整数p,k,a,其中p为质数,求出所有满足x^k=a (mod p),0<=x<=p-1的x. 输入 三个整数p,k,a. 输出 第一行一个整数,表示符合条件的x的个数. ...

  8. Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round)

    A. Technogoblet of Fire 题意:n个人分别属于m个不同的学校 每个学校的最强者能够选中 黑客要使 k个他选中的可以稳被选 所以就为这k个人伪造学校 问最小需要伪造多少个 思路:记 ...

  9. P1064 金明的预算方案

    思路:就是一个背包问题  因为数据范围小,所以不把 1个带附着物的东西 拆成 带1个带2个或不带 #include<bits/stdc++.h> using namespace std; ...

  10. P1495 曹冲养猪

    原题链接 https://www.luogu.org/problemnew/show/P1495 这个题明显的中国剩余定理(孙子定理),如果有不懂孙子定理的点这个链接https://baike.bai ...