摘要:获取用户信息姓名王小二年龄获取用户信息姓名年龄上面代码通过动态添加元素,向服务器发出请求。注意,该请求的查询字符串有一个参数,用来指定回调函数的名字,这对于是必需的。服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
它的基本思想是,网页通过添加一个元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
首先,网页动态插入元素,由它向跨源网址发出请求。
function addScriptTag(src) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag("http://127.0.0.1:3000?callback=foo"); } function foo(data) { // 获取用户信息- 姓名:王小二 年龄:30 console.log("获取用户信息- 姓名:" + data.name + " 年龄:" + data.age); };
上面代码通过动态添加元素,向服务器example.com发出请求。注意,该请求的查询字符串有一个callback参数,用来指定回调函数的名字,这对于JSONP是必需的。
服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。
nodejs 服务端代码为例:
const http = require("http"); const querystring = require("querystring"); http.createServer(function(req,res){ let params = querystring.parse(req.url.replace(//??/, "")); let data = {"name": "王小二", "age": 30}; res.writeHead(200, {"Content-Type":"application/json;charset=utf-8"}); res.end(params.callback + "("+JSON.stringify(data)+")"); }).listen(3000);
由于元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的 JSON 数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99560.html
摘要:同源策略在中有一个很重要的安全性限制,被称为同源策略。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候同源策略就显得过于苛刻。 JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。 ...
摘要:因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用。这个是跨域服务器取数据的接口,参数为回调函数的名字,返回的格式为原理首先在客户端注册一个然后把的名字传给服务器。 一、同源策略 同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略。 为什么需要同源策略,这里举个例子: 假设现在没有同源策略,会发生什么事...
摘要:同源策略限制了我们无法通过原生的对象获取到数据。的原理其实不复杂浏览器的同源策略把跨域请求都禁止了的标签是例外,可以突破同源策略从其他来源获取数据由上可得,我们可以通过标签引入文件,然后通过一系列操作获取数据。上面三点便是实现跨域的原理。 今天做页面时,后台给了个接口:https://a.a.com/a/a.json,我页面的上线地址是:http://b.b.com。显而易见,因为浏览...
摘要:同源策略,它是由提出的一个著名的安全策略,现在所有支持的浏览器都会使用这个策略。客户端在对文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像,但其实并不一样。 参考资料 一、先说说JSON 首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式。 JSON的优点: 基于纯文本,跨平台传递极其简单; Javas...
摘要:概述是一种跨域通信的手段,它的原理其实很简单首先是利用标签的属性来实现跨域。可靠的实现添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例来源个人博客 1. 概述 jsonp是一种跨域通信的手段,它的原理其实很简单: 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回,实现服...
阅读 1359·2021-11-22 15:25
阅读 3352·2021-10-21 09:38
阅读 1569·2021-10-19 13:21
阅读 995·2021-09-06 15:00
阅读 1676·2019-08-30 15:44
阅读 2581·2019-08-29 15:40
阅读 3439·2019-08-29 13:44
阅读 2034·2019-08-26 16:56