jsonp的實現原理

jsonp的實現原理

1 因爲瀏覽器的安全性(同源策略)限制，不容許AJAX訪問協議不一樣或域名不一樣或端口號不一樣的數據接口；
2 能夠經過動態建立script標籤的方式，把script標籤的src屬性指向數據接口的地址，由於script標籤不存在跨域限制，這種數據獲取方式稱爲jsonp[由原理可知其只支持get請求]；
3 具體實現過程：
    a、先在客戶端定義一個回調函數，預約義對數據的操做； //客戶端定義回調函數名傳給服務器，這樣服務器端返回數據的方法名不用寫死，客戶端靈活設置而服務端不用變化。
    b、再把這個回調方法的名稱經過URL傳參的形式提交到服務器的數據接口；
    c、服務器數據接口組織好要發送給客戶的數據，再拿着客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發送給客戶端去解析；
    d、客戶端拿到服務器返回的字符串以後，添加到script腳本去解析執行，這樣就可以拿到jsonp的數據了；

例如：//下面結合node搭建個服務器實現jsonp

客戶端：<script> function show(data){ console.log(data)}</script>
<script src="http://127.0.0.1:3000/getscript?callback=show"></script>

服務器端：const http = require('http')  //導入http內置模塊
const urlModule = require('url')  //這個核心模塊能解析URL地址拿到pathname query等
const server = http.createServer()  //建立一個http服務器
server.on('request',function(req,res){  //監聽http服務器的request請求
    const { pathname: url,query} = urlModule.parse(req.url,true) //node的結構賦值
    if (url ==='getscript'){
       var data = {
          id:'1',
          name: '寶馬',
          createtime: new Date()}
       var scriptStr = `${query.callback}(${JSON.stringify(data)})` //拼接一個合法的JS腳本，這裏拼接的是一個方法的調用
       res.end(scriptStr)   //res.end把這個字符串發送給客戶端，客戶端當作JS代碼去解析執行
     }else{
       res.end('404')
     }
})