手写一个jsonp实现

作者: 前端精髓 | 来源:发表于2017-10-19 22:47 被阅读144次

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行。JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,就像下面这样。

callback({ “name”: “Nicholas” });

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的,就像上面的URL所示,这里指定的回调函数的名字叫handleResponse() 。

JSONP是通过动态 <script> 元素来使用的,使用时可以为 src 属性指定一个跨域URL。这里的 <script> 元素与 <img> 元素类似,都有能力不受限制地从其他域加载资源。因为JSONP是有效的JavaScript代码,所以在请求完成后,即在JSONP响应加载到页面中以后,就会立即执行。来看一个例子。

function handleResponse(response){
    alert(“You’re at IP address ” + response.ip + ”, which is in ” + response.city + ”, ” + response.region_name);
}
var script = document.createElement(“script”);
script.src = “http://freegeoip.net/json/?callback=handleResponse”;
document.body.insertBefore(script, document.body.firstChild);

这个例子通过查询地理定位服务来显示你的IP地址和位置信息。

JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用。与图像Ping相比,它的优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信。不过,JSONP也有不足。

首先,JSONP是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此在使用不是你自己运维的Web服务时,一定得保证它安全可靠。

相关文章

  • 搜狗面试

    原型链上手写事件,手写原生js实现ajax事件,jsonp实现原理,阻止事件IE冒泡代码,事件捕获、处理,冒泡代码...

  • 面试题

    1、手写jsonp的实现http://kb.cnblogs.com/page/139725/ 2、手写链表倒数第K...

  • 手写一个jsonp实现

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法...

  • 手写jsonp实现原理

    一、原理 元素不受同源策略的影响,可以进行AJAX传输。当script元素访问时,返回由回调函数进行包裹的json...

  • 浏览器跨域问题,教你手写实现jsonp跨域

    跨域概述为什么会有跨域跨域解决办法:1、jsonp;2、后台代理手写实现jsonp跨域(包括服务器端代码) 跨域问...

  • 前端面试知识点(7)——前端进阶2

    1、手写jsonp的实现 基础:script标签可以跨域获取脚本 进阶:动态生成script标签,并拼接url填...

  • 手写jsonp

    标签的src属性不受浏览器跨域的限制 要点创建script标签前端一个全局函数服务端返回前端全局函数的调用

  • ES6解决跨域

    实现一个jsonp函数,仅需要支持jsonp(url)一种调用方式即可(仅有url一个传参),例如: jsonp(...

  • 跨域方案

    JSONP JSON with padding 简称JSONP ,实现原理 通过动态 元素,指定src属性为一个跨...

  • 手写Ajax(JSONP)

    参考:原生 JavaScript 实现 AJAX、JSONP XMLHttpRequest的使用 参考:XMLHt...

网友评论

    本文标题:手写一个jsonp实现

    本文链接:https://www.haomeiwen.com/subject/oczpuxtx.html