需求
在調(diào)用QQ音樂搜索歌曲api的時(shí)候發(fā)現(xiàn)返回是一個(gè)jsonp
請(qǐng)求url：
https://c.y.qq.com/splcloud/fcgi-bin/smartbox_new.fcg?format=jsonp&key=周杰倫&jsonpCallback=call&format=jsonp
返回：call({xxx})
call是根據(jù)我們傳遞的jsonpCallback的值決定的
實(shí)現(xiàn)
我希望有一個(gè)jsonp對(duì)象,可以這樣使用
new Jsonp({
url: 'http://xxxx',
callBackname: 'call',
success: function(result){
//處理數(shù)據(jù)
}
});
完整代碼
//基本結(jié)構(gòu)
!(function(window){
function Json(param){
//初始化參數(shù)
let ele = document,
script = ele.createElement('script'),
result = null,
_url = param.url || '',
_success = param.success || function () { },
_error = param.error || function () { };
if( !param.callbackName ){ throw new Error('callbackName is required!');}
window[param.callbackName] = function(){ result = arguments[0]; };
ele.getElementsByTagName('head')[0].appendChild(script);
script.onload = script.readystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
_success(result);
script.onload = script.readystatechange = null;
}else{
_error();
}
}
script.src = _url;
}
window.Jsonp = Jsonp;
})(window);
測(cè)試(調(diào)用QQ音樂搜索API)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin: 0;padding: 0}
table{
width: 100%;
text-align: center;
border-spacing: none;
border-collapse: collapse;
border: 1px solid #eee;
line-height: 45px;
}
.container{
width: 500px;
margin: 100px auto;
}
td,th{
border: 1px solid #eee;
}
input{
margin-top: 10px;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #eee;
outline: none;
text-indent: 5px;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<caption>QQ音樂搜索API調(diào)用</caption>
<tr>
<th>id</th>
<th>name</th>
<th>singer</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
<div>
<input id="key" type="text" placeholder="歌曲或者歌手...">
</div>
</div>
<script>
!(function (window) {
function Jsonp(param) {
let ele = document,
script = ele.createElement('script'),
result = null,
_url = param.url || '',
_success = param.success || function () { },
_error = param.error || function () { };
if( !param.callbackName ){ throw new Error('callbackName is required!'); }
window[param.callbackName] = function(){ result = arguments[0]; };
ele.getElementsByTagName('head')[0].appendChild(script);
script.onload = script.readystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
_success(result);
script.onload = script.readystatechange = null;
}else{
_error();
}
}
script.src = _url;
}
window.Jsonp = Jsonp;
})(window);
document.getElementById('key').addEventListener('keyup',function(){
let key = document.getElementById('key').value;
new Jsonp({
url: `https://c.y.qq.com/splcloud/fcgi-bin/smartbox_new.fcg?format=jsonp&key=${key}&jsonpCallback=call&format=jsonp`,
callbackName: 'call',
success: function (result) {
if (result) {
render(result);
}
},
error: function(){
console.log('error');
}
});
},false);
function render(result){
console.log(result);
let dom = document.getElementById('result');
let tmp = '';
result.data.song.itemlist.forEach(ele => {
tmp += `<tr><td>${ele.id}</td><td>${ele.name}</td><td>${ele.singer}</td></tr>`;
});
dom.innerHTML = tmp;
}
</script>
</body>
</html>
思路
1.初始化參數(shù)
2.綁定call事件(服務(wù)器返回的函數(shù)調(diào)用)來獲取返回值
3.動(dòng)態(tài)創(chuàng)建script標(biāo)簽
4.script加載完成后進(jìn)行回調(diào)success并把返回值傳遞出去
5.加載失敗則回到error
本人小白一枚，代碼很爛，沒有處理請(qǐng)求參數(shù)，/捂臉 打包了在github
https://github.com/TankCJZ/JsonpDemo
