Zlog
首页时间轴关于
Zlog

一个探索技术、编程和构建 Web 的个人空间。

© 2026 Zlog

导航

首页时间轴关于

链接

首页/Jsonp封装

Jsonp封装

Jsonp封装

Z

Zephyr110

2020年3月1日·1 分钟
|
frontendfrontend-javascript

1. 封装

js
function jsonp(options) {
	//动态创建 Script 标签
	var script = document.createElement('script');
 
	var params = '';
	for (var attr in options.data) {
		params += '&' + attr + '=' + options.data[attr];
	}
 
	var fnName =
		'jsonp' +
		Math.random()
			.toString()
			.replace('.', '');
 
	//用 window 把 success 函数挂载到全局
	window[fnName] = options.success;
 
	//为 scriptb 标签添加 src 属性
	script.src = options.url + '?callback=' + fnName + params;
 
	//将 script 标签添加到 body
	document.body.appendChild(script);
 
	//script 标签加载完成时,服务器返回的函数已执行,所以在此之后移除 script 标签
	script.onload = function() {
		document.body.removeChild(script);
	};
}

2. 请求举例

js
jsonp({
	type: 'get',
	url: 'http://www.xxx.com/get', //非同源地址
	data: {
		name: 'ABC',
		age: 20,
	},
	success: function(data) {},
	error: function(data) {},
});
 
//服务器端用(express 框架)用 res.jsonp({name: 'ABC', age: 20})返回需要调用的函数名和数据给客户端

标签

frontendfrontend-javascript

评论

相关文章

Facade

外观模式:就是提供一个统一的接口去访问多个子系统的多个不同的接口,为子系统中的一组接口提供统一的高层接口。使得子系统更容易使用,不仅简化类中的接口,而且实现调用者和接口的解耦。

2021年12月26日·2 分钟

Singleton

单例模式:就是在整个运行时域,一个类只有一个实例对象。

2021年12月26日·2 分钟

Function Overloading

函数名相同,函数的参数列表不同(参数个数、参数类型),根据参数的不同之行不同的操作。

2021年12月19日·2 分钟

← 返回文章列表