说到 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. jdk1.5多线程Lock接口及Condition接口

    jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...

  2. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  3. a标签中的href="#"与href="javascript:void(0)"区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  4. ashx+html+ajax

    HTML: $(function() { ajax("NewsList.ashx", function(resText) { document.getElementById(&qu ...

  5. Default Custom Action Locations and IDs

    Default Custom Action Locations and IDs SharePoint 2013                             The following ta ...

  6. (转)Spring读书笔记-----Spring核心机制:依赖注入

    Java应用(从applets的小范围到全套n层服务端企业应用)是一种典型的依赖型应用,它就是由一些互相适当地协作的对象构成的.因此,我们说这些对象间存在依赖关系.加入A组件调用了B组件的方法,我们就 ...

  7. android中ListView控件

    今天学习了ListView控件和页面跳转,下面大致介绍下: 第一步:创建显示内容的文件vlist.xml: <?xml version="1.0" encoding=&quo ...

  8. Winform获取应用程序的当前路径

    //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Location; result: X:\xxx\xxx\xxx.exe ...

  9. 获取SqlServer当前链接数

    1.提供有关 Microsoft SQL Server 数据库引擎实例中的当前用户.会话和进程的信息,显示所有session sp_who 2.针对 SQL Server 上的每个经过身份验证的会话返 ...

  10. C#字符串颠倒输出

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...