原生實現 跨域資源共享JSONP
阿新 • • 發佈:2018-12-05
JSONP的原理是<script src=''></script>
script標籤內的src可以解析任何符合js語法標準的檔案(字尾名不重要,內容重要)
實現原理的程式碼(方便後面封裝的理解)
- 在請求頁面中
<head>
<script src="http://127.0.0.1:8081/js"></script>
</head>
<script>
console.log(data);
</script>
開始封裝
- 在請求頁面中
var getJSON =function(url,callback){
var fnname='fn_'+Math.floor(100*Math.random()+1);
//隨機生成1-100的整數,避免函式名重複
url=url.replace('*',fnname);
//將地址中的'*'號替換成隨機生成的函式名
window[fnname]=function(ret){//全域性呼叫函式
callback(ret);
}
window.onload=function(){
var sp=document.createElement ('script');
//建立一個script標籤
sp.src=url;
//設定script的src屬性
document.head.insertAdjacentElement('beforeend',sp);
//插入head中
}
}
getJSON('http://127.0.0.1:8081/js?fnname=*',function(data){
//?後的fnname=*是傳給後端的引數,後端可以通過req.query.引數名,獲取到
//呼叫封裝的getJSON函式
console.log (data);
})
被請求頁面的路由設定
app.get('/js',function(req,res){
var data=JSON.stringify({a:1,b:2});
//傳的資料必須是字串形式
var fn=req.query.fnname;
//獲取到前端傳的引數
res.send(fn+'('+data+')');
//send的內容必須是字串(因為src解析的是字串)
})