JavaScript中的JSONP

原创于 2019-11-25 08:04:53 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JSONP的出现背景，详细解释了同源策略导致的跨域问题，并探讨了JSONP的工作原理，即通过script标签实现跨域请求，通过函数回调处理响应数据。此外，还讨论了JSONP的封装技术，帮助开发者更好地应用JSONP解决实际问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.JSONP的出现

1.JSONP是为了解决浏览器阻止跨域的问题提出的；
2.为什么会有跨域？
同源策略：基于浏览器的安全考虑，浏览器各个厂商之间出现了一个约定，这个约定叫做同源策略。这个约定的主要内容就是，域和域之间数据不共通。
所谓同源是指：协议、域名、端口相同；

二.JSONP的原理

利用script引入外部跨域的资源；JSONP就是在URL中调用function；

三.JSONP的封装

document.onclick = function(){
			var url = "http://127.0.0.1/1911/jsonp/data/jsonp.php"
			jsonp(url,function(res){
				console.log(res)
			},{
				zxc:"kjagaudgakjdg21312312",
				colName:"zxc",
				user:"admin",
				pass:123
			})
		}
		function jsonp(url,cb,data){
			var str = "";
			for(var i in data){
				str += `${i}=${data[i]}&`;
			}
			url = url + "?" + str;
			var script = document.createElement("script");
			script.src = url;
			document.body.appendChild(script);
			window[data[data.colName]] = function(res){
				cb(res);
			}
		}