说到 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. 关于ABAP事件的一张图

    事件: 这里有几组事件关键字 ,这些事件关键字在特定环境下控制ABAP/4 程序流. 逻辑数据库 是典型报表程序的外部流控制的中心点.如果将逻辑数据库链接到报表 程序,将导致显示选择 屏幕,并决定系统 ...

  2. 对tomcat来说,每一个进来的请求(request)都需要一个线程,直到该请求结束。

    这段时间折腾了哈java web应用的压力测试,部署容器是tomcat 7.期间学到了蛮多散碎的知识点,及时梳理总结,构建良好且易理解的知识架构把它们组织起来,以备忘.对web应用开发者来说,我们很关 ...

  3. jquerymobile知识点:动态Grid的绑定以及刷新

    下面jquerymobile是ajax动态绑定和刷新的例子.直接上图以及代码. 下面是实例代码: //初始绑定 function GetInitBind(PageIndex, PageSize, sq ...

  4. 第二次装OA系统

    第二次安装:1.解压之后再MYOA目录下 找到一键安装.bat2.安装之后,一闪而过.(电脑上不需要apache,也不需要 mysql)3.192.168.1.111(自己电脑IP)看是否可以,若不可 ...

  5. iOS UIKit:TableView之表格创建(1)

    Table View是UITableView类的实例对象,其是使用节(section)来描述信息的一种滚动列表.但与普通的表格不同,tableView只有一行,且只能在垂直方向进行滚动.tableVi ...

  6. Android with Eclipse - Waiting for HOME ('android.process.acore') to be launched?

    mac机中使用命令行方式启动android sdk manager,有需要的朋友可以参考下. 相信使用mac机的用户做android开发都会有一个困惑,就是如何更新android sdk,或者说直接使 ...

  7. RedHat7安装Tomcat

    编译安装Tomcat 下载jdk (http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  8. 码表 Unicode GBK UTF8 示例

    Unicode的编码形式与对应的字符串相互转换 /**  * Unicode的编码形式与对应的字符串相互转换  * @author 白乾涛  */ public class UnicodeUtils  ...

  9. MyTask4

    最近稍微做了点修改,把几处bug修复了下,另外新增了授权码功能和数据缓冲功能 先看看效果图 1. 如果要把软件做的高大上一些,你可以加一个授权验证,授权码以字符串形式存放在程序里面,当然你也可以另外开 ...

  10. Bootstrap--全局css样式之表单

    单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置 ...