手写jsonp实现原理
2018-05-09 本文已影响0人
芒果加奶
一、原理
<script>元素不受同源策略的影响，可以进行AJAX传输。当script元素访问时，返回由回调函数进行包裹的json数据。在回调函数中获取数据进行处理。
二、实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/**
* 手写jsonp并返回Promise对象
* 参数url，data:json对象，callback函数
*/
function jsonp(url, data = {}, callback = 'callback') {
// 处理json对象，拼接url
data.callback = callback
let params = []
for (let key in data) {
params.push(key + '=' + data[key])
}
console.log(params.join('&'))
// 创建script元素
let script = document.createElement('script')
script.src = url + '?' + params.join('&')
document.body.appendChild(script)
// 返回promise
return new Promise((resolve, reject) => {
window[callback] = (data) => {
try {
resolve(data)
} catch (e) {
reject(e)
} finally {
// 移除script元素
script.parentNode.removeChild(script)
console.log(script)
}
}
})
}
jsonp('http://photo.sina.cn/aj/index', {
page: 1,
cate: 'recommend'
}, 'jsoncallback').then(data => {
console.log(data)
})
</script>
</body>
</html>
三、注意事项
1、创建script元素，设置src属性，并插入文档中，同时触发AJAX请求。
2、返回Promise对象，then函数才行继续，回调函数中进行数据处理
3、script元素删除清理
