步骤：
1、前端拼接一个script标签，在请求的url中传入一个需要执行的函数方法名，触发对指定地址的get请求
2、后端对这个请求进行处理，并返回"callbackFn(‘res value’)"的字符串
3、前端script加载完成后就是在script中执行callbackFn(‘res value’)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝联想词-jsonptitle>
head>
<body>
<div class="warpper">
<label for="inp">搜索关键字：label>
<input type="text" class="inp" id="inp">
<ul class="list">ul>
div>
<script>
/**
url: string
params: obj
cb: function
cbN: string
**/
function jsonp(url, params, cb, cbN) {
// 兼容处理
let queryString = url.indexOf('?') === -1 ? '?' : '&';
// 拼接参数
for(let k in params) {
if(params.hasOwnProperty(k)) {
queryString += `${k}=${params[k]}&`;
}
}
// 产生回调函数名字
const cbName = 'jsonp' + Math.random().toString().replace('.', '');
// 生成script标签
const oScript = document.createElement('script');
// 请求资源
oScript.src = `${url}${queryString}${cbN}=${cbName}`;
// 全局注册回调函数
window[cbName] = function() {
// 调用回调
cb(...arguments);
// 从body中删除
document.body.removeChild(oScript)
}
// 插入到body里
document.body.appendChild(oScript);
}
// 测试上述JSONP跨域函数
const inp = document.getElementsByClassName('inp')[0];
function addList(data) {
const list = document.getElementsByClassName('list')[0];
let str = '';
data.result.forEach(ele => {
str += `${ele[0]}`
})
list.innerHTML = str;
}
inp.oninput = function() {
jsonp('https://suggest.taobao.com/sug', {
q: inp.value
}, addList, 'callback')
}
//比如inp.value='男' 会生成一个script标签