JSONP 原理和使用

news/2025/2/12 17:47:52

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

首先,网页动态插入<script>元素,由它向跨源网址发出请求。

 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) {// 获取用户信息- 姓名:王小二 年龄:30console.log("获取用户信息- 姓名:" + data.name + " 年龄:" + data.age);
};

上面代码通过动态添加<script>元素,向服务器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);

由于<script>元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的 JSON 数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。


https://dhexx.cn/news/show-4242641.html

相关文章

day06-(mysql)

建表&#xff1a; CREATE DATABASE mysqltest2; USE mysqltest2;-- 部门表CREATE TABLE DEPT(DEPTNO INT PRIMARY KEY, -- 部门编号DNAME VARCHAR(14) , -- 部门名称LOC VARCHAR(13) ) ; -- 部门地址INSERT INTO DEPT VALUES (10,ACCOUNTING,NEW YORK); INSERT INTO DEPT VAL…

赛门铁克windows server备份软件(Symantec Backup Exec 11d for Windows Servers)11d 多国语言版...

Symantec Backup Exec 11d for Windows Servers 是 Windows 数据恢复领域的金牌标准&#xff0c;能够提供经济有效、高性能且经过认证的磁盘到磁盘到磁带备份与恢复&#xff0c;包括为 Microsoft Exchange、SQL、文件服务器和工作站提供持续的数据保护。高性能的代理和选件为本…

设计模式学习(二)-简单工厂模式

简单工厂设计模式 简单工厂模式定义&#xff1a; 简单工厂设计模式又称为静态工厂方法(Static Factory Method)模式&#xff0c;它属于类创建型模式。在简单工厂模式中&#xff0c;可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例&…

day07-(JDBC)

回顾: sqlsql分类:DDL:对象:数据库和表关键词:create alter drop truncate创建数据库:create database day06;删除数据库: drop database day06;创建表:create table user(id int primark key auto_increment,username varchar(20));修改表:alter table user rename to user10…

arcIMS环境搭建全纪录

我把arcims9.0的环境搭建写一下&#xff0c;供有需要的人参考。 所需软件&#xff1a; • 装有IIS 4 或者 5的windows操作系统 • Java 2 SDK Standard Edition Version 1.4.2 • ServletExec 5.0, 在 ArcIMS 9.0 的安装 CD可以找到. • ArcIMS 9.0 安装 CD 准备工作&#xff1…

day13-(事务mvc反射补充)

回顾: jsp:java服务器页面jsp的脚本jsp的注释html注释java注释jsp注释<%-- --%>jsp的指令page:声明页面一些属性重要的属性:importpageEncodingcontentType了解属性isErrorPage:一旦他的值为true jsp页面就是可以使用exception内置对象include:静态包含,(内容)taglib:导入…

github团队开发 创建组织并邀请小伙伴

1. 开始创建 2. 名字不可以重复 3. 开始邀请小伙伴 也可以不邀请直接继续 4. 这下面的东西填或者直接跳过 5. 创建完成

《终于有人说出来了——Java不适合于作为主要编程教学语言》我的看法

原文&#xff1a;http://blog.csdn.net/myan/archive/2008/01/10/2033386.aspx http://news.csdn.net/n/20080109/112571.html 我就一些评论说说我的观点&#xff1a; 对文章&#xff0c;我觉得比较合理的&#xff0c;一开始上手java并不是很好的方法&#xff0c;对于文章中的…

【In PHP】析构、作用域与引用

在编写一段析构方法的研究代码中&#xff0c;我遇到了交叉知识点导致的错误——在不同作用域&#xff0c;析构方法与引用次数导致了不一样的结果。前提 本文假装你已经明白什么是析构方法、作用域及引用次数。关于后者&#xff0c;引用次数是 PHP 垃圾收集中的重要机制&#xf…

day-17(基础加强)

回顾: listener(了解)监听器,监听javaweb中三个域对象监听对象的创建和销毁ServletContextListener在项目启动的时候加载配置文件ServletRequestListenerHttpSessionListener监听对象的属性的变化ServletContextAttributeListenerServletRequestAttributeListenerHttpSessionAt…