一分钟了解 JSONP

栏目: Json · 发布时间: 7年前

内容简介:为什么要写这个短文?我在复习 JSONP 知识的时候,随便搜了几篇文章看,额......后来就有了写它的想法。首先,页面中的于是,不法分子们就抓住这个漏洞,开始了与浏览器的同源策略做斗争,打了场胜仗。

为什么要写这个短文?我在复习 JSONP 知识的时候,随便搜了几篇文章看,额......后来就有了写它的想法。

首先,页面中的 <script> 标签里面放的是 js 代码,而加上 src 属性后 <script> 标签就有了加载和运行外部 js 代码的能力。

于是,不法分子们就抓住这个漏洞,开始了与浏览器的同源策略做斗争,打了场胜仗。

加上 src 属性的 script 标签,是利用 HTTP 的 GET 方法去访问你指定的 url 的,

它预期会 GET 到一个 js 文件或者是一段 js 代码,然后浏览器会去执行它。

于是呢,所谓的 JSONP 就相当于是利用 GET 到的这一段 js 代码的方式。

使用方法就是:

1、前后端相互沟通好,前端定义好一个函数,用来解析异步请求的数据。

例子:

function ajax(result) {
  // 处理 result
}

2、后端写一个接口,告诉前端你请求我接口的时候要加上 function 这个参数,然后返回这个函数的执行方式。

例子:

// 接口:http://www.abc.com/api?function=ajax
// 后端得到 function 参数的这个前端定义的函数名,示例是 ajax,然后像下面这样组合好后返回:
// return 'ajax(1)';

3、前端在 script 标签里的 src 属性设置为这个接口。

例子:

<script src="http://www.abc.com/api?function=ajax">

这个时候,浏览器就会去 GET 请求接口,然后 script 标签得到 ajax(1) 这个 js 代码,然后浏览器开始执行它,因为你事先已经定义过 ajax 函数了,所以 ajax(1) 会正常运行。

但是,第三步需要是异步请求,那么就在需要做请求操作的地方,利用 js 生成这段 script 标签放到 <head> 里面就行了(或者是把 src 用js动态改一下,这个我倒是没有试过)。

这就是 JSONP 啦。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

艾伦•图灵传

艾伦•图灵传

(英)安德鲁·霍奇斯 / 孙天齐 / 湖南科学技术出版社 / 2012-8-1 / 68.00元

《艾伦·图灵传:如谜的解谜者》是图灵诞辰100周年纪念版,印制工艺更为精美。本书是世界共认的最权威的图灵传记。艾伦?图灵是现代人工智能的鼻祖,在24岁时奠定了计算机的理论基础。二战期间,他为盟军破译密码,为结束战争做出巨大贡献。战后,他开创性地提出人工智能的概念,并做了大量的前期工作。因同性恋问题事发,被迫注射激素,后来吃毒苹果而死。作者是一名数学家,也是一名同性恋者。他对图灵的生平有切身的体会,......一起来看看 《艾伦•图灵传》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具