说到 JSONP 就要说到同源策略(Same Origin Policy), 同源策略是浏览器最核心的也是最基本的安全功能。

浏览器的同源策略,限制了来自不同源的 “document” 或脚本,对当前 “document” 读写或设置某些属性。

通俗的说法就是外来的脚本无法碰到自家的文档。

影响 “源” 的因素有四个: 主机名 host,子域名、端口、协议。

JSONP(JSON with padding). 这是一种从远端服务器抓取数据的方式。原理是通过创建一个 script 标签,所辖的外部文件包含一段 JSON 数据,数据是由服务器返回的,作为参数包装在一个函数调用中。script 标签获取脚本文件不受跨域的限制(同样具有跨域加载数据能力的标签还有:img、iframe、link等标签,均不受同源策略的限制),所有的浏览器都 支持这种技术。

首先,在 head 里添加 script 标签

<script src="http://example.com/data.json"></script>

预先定义全局函数,等待返回数据中的方法调用

window.jsonCallback = function(result) {
// 处理返回结果的相关逻辑
}

请求的文件里的数据是,一个方法还有作为参数的数据,数据加载到浏览器后,脚本会被执行,随之方法会被调用(方法已经定义好)

jsonCallback({"data":"foo"});

好在,jQ 已经把它包了起来

jQuery.getJSON("http://example.com/data.json", function() {
// 处理返回结果的相关逻辑
})

JSOP的更多相关文章

  1. Jsop的原理

    Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据

  2. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  3. ajax详解,以及异步JSOP的实现

    这里我使用的是jquery的ajax方法   包括三个方法 : get() , post(),   getJson() get() 和post()的格式我就使用一下格式,很方便: $.ajax({ u ...

  4. Jsop入门程序

    package com.baidu; import java.io.IOException; import org.jsoup.Jsoup;import org.jsoup.nodes.Documen ...

  5. ajax跨域--jsop方法

    1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是json ? json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表 ...

  6. jsop解析获得htmldome

    package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods. ...

  7. jQuery的jsop,jsonp跨域请求

    https://www.cnblogs.com/chiangchou/p/jsonp.html

  8. jsop之---实现过程

    JSONP(JSONP - JSON with Padding是JSON的一种“使用模式”),利用script标签的src属性(浏览器允许script标签跨域) 跨域访问,非同源访问 <!DOC ...

  9. 浅谈跨域以及WebService对跨域的支持

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...

随机推荐

  1. UDP编程

    一: socket编程中的几种地址 Socket编程会遇到三种地址, 都是定义的结构体(struct): Struct in_addr     {         Unsigned int s_add ...

  2. 如何学会web前端开发

    如何学会web前端开发 http://jingyan.baidu.com/article/b7001fe17623970e7282dd0c.html http://www.yangqq.com/dow ...

  3. Android 开发之动画详解

    一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...

  4. 如何让Windows程序只运行一个程序实例?

    要实现VC++或者MFC只运行一个程序实例,一般采用互斥量来实现,即首先用互斥量封装一个只运行一个程序实例的函数接口: HANDLE hMutex = NULL; void MainDlg::RunS ...

  5. Android(java)学习笔记196:Android中Menu的使用(静态和动态)

    1.使用xml定义Menu(静态方法) 菜单资源文件必须放在res/menu目录中.菜单资源文件必须使用<menu>标签作为根节点.除了<menu>标签外,还有另外两个标签用于 ...

  6. javascript创建对象的7种方式

    /*1.工厂模式*/ function createPerson(name,age,job) { var o = new object(); o.name = name; o.age = age; o ...

  7. Unity3D 关于声音MissingComponentException报错

    如果你遇到报错如下: MissingComponentException: There is no 'AudioSource' attached to the "Level-2-bg&quo ...

  8. PHP获得header头进行分析

    学web的人都知道,要深刻的理解就一定要对HTTP协议有深刻的理解,这样你才能理解整个运行的流程,有些功能你才能理解应该 如何去实现,比如:仿盗链啊,定义IP后切换页面语种的版本啊,等等, 这里就来对 ...

  9. (转)C# NameValueCollection集合

    1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCollectionBase 不同,该类在一个键下存储多个字符 ...

  10. 清楚form表单数据的便捷jQuery之法

    有时候可能需要实现这样的效果:注册表单或者地址表单等填写多个记录之后,想要清除重新填写,如果一个个删除非常麻烦,因此这时清除按钮非常必须.接下来为您详细介绍两个自己经历的便捷方法,需要了解的朋友参考下 ...