jsonp跨域实现原理详解

时间 2019-12-07

标签 jsonp 实现原理详解栏目 JSON 繁體版

原文原文链接

JSONP是经过在文档中嵌入一个script标签来从另外一个域中返回数据，例如在页面中添加一个以下的script标记：html

<script src="http://blog.ambergarden.com/someData?callback=some_func"/>
复制代码

该script标记会向http://blog.ambergarden.com/someData发送一个GET请求。在数据返回到客户端后，some_func()函数将会被调用。固然，这种方法拥有一个显著的缺点，那就是 只支持GET 操做。json

拿百度搜索举例说明：跨域

<!DOCTYPE html>
<html>
<head>
	<title>json跨域</title>
</head>
<body>
	<div>json跨域</div>
	<script>
	    function show(data) {
	        console.log(data)
	    }
	</script>
	<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aiqiyi&cb=show"></script>
</body>
</html>
复制代码

sp0.baidu.com/5a1Fazu8AA5…bash

该接口返回数据格式以下：app

能够看到， wd 的参数就是咱们搜索的 关键词 ， cb 是 回调函数

下面咱们对上述实现方式进行封装函数

<!DOCTYPE html>
<html>
<head>
	<title>jsonp</title>
</head>
<body>
	<div>jsonp</div>
<script>
    function jsonp(obj) {
    	let {url, params, cb } = obj;
    	return new Promise((resolve, reject) => {
    		let script = document.createElement('script');
    		params = {...params, cb}
    		let arrs = [];
    		for (let key in params) {
    			arrs.push(`${key}=${params[key]}`)
    		}
    		
    		script.src = `${url}?${arrs.join('&')}`;
    		document.body.appendChild(script);
    		window[cb] = function (data) {
    			resolve(data);
    			document.body.removeChild(script);
    		}
    	})
    }
    jsonp({
    	url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    	params: {
    		wd: 'b'
    	},
    	cb: 'show'
    }).then(data =>{
    	console.log(data, '444');
    })
</script>
</body>
</html>
复制代码

持续补充完善中。。。jsonp