日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端百題斬之瀏覽器出讓安全性造就Jsonp

[[432964]]

1 JSONP基礎(chǔ)

眾所周知，JSONP是一種跨域解決方案，下面來一步步剖析一下為什么JSONP能夠解決跨域問題。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)辛集,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

基本思想

JSONP基本思想是在網(wǎng)頁中添加一個< script >元素，向服務(wù)器請求數(shù)據(jù)，服務(wù)器收到請求后，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)中傳回來。這應(yīng)該是經(jīng)常看到的一種解釋JSONP請求的思路，但是同源策略不是不允許向非同源發(fā)送請求的，那怎么又怎么可以通過JSONP解決跨域呢?看起來是一個很矛盾的點。

為什么JSONP能夠?qū)崿F(xiàn)跨域

從同源策略的角度考慮，確實嵌入的< script >發(fā)起的請求(非同源)違背了同源策略，但其實這是由于瀏覽器為了便利性讓出了部分安全性，允許js文件、css文件、圖片等資源來自于非同源服務(wù)器，這也就解釋了為什么script請求的資源分明跨域了但是仍有內(nèi)容返回的原因，也正是由于瀏覽器出讓了部分安全性(允許頁面中可以嵌入第三方資源)，采用了JSONP的誕生。

2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及為什么JSONP能夠?qū)崿F(xiàn)跨域，下面一起來實現(xiàn)JSONP。

  • 全局掛載一個接收數(shù)據(jù)的函數(shù);
  • 創(chuàng)建一個script標(biāo)簽，并在其標(biāo)簽的onload和onerror事件上掛載對應(yīng)處理函數(shù);
  • 將script標(biāo)簽掛載到頁面中，向服務(wù)端發(fā)起請求;
  • 服務(wù)端接收傳遞過來的參數(shù)，然后將回調(diào)函數(shù)和數(shù)據(jù)以調(diào)用的形式輸出;
  • 當(dāng)script元素接收到影響中的腳本代碼后，就會自動執(zhí)行它們。
 
 
 
    
  
  
  
  1. function createScript(url, charset) { 
    2. 
  
  
  
  2.     const script = document.createElement('script'); 
    3. 
  
  
  
  3.     script.setAttribute('type', 'text/javascript'); 
    4. 
  
  
  
  4.     charset && script.setAttribute('charset', charset); 
    5. 
  
  
  
  5.     script.setAttribute('src', url); 
    6. 
  
  
  
  6.     script.async = true; 
    7. 
  
  
  
  7.     return script; 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. function jsonp(url, onsuccess, onerror, charset) { 
    11. 
  
  
  
  11.     const hash = Math.random().toString().slice(2); 
    12. 
  
  
  
  12.     window['jsonp' + hash] = function (data) { 
    13. 
  
  
  
  13.         if (onsuccess && typeof(onsuccess) === 'function') { 
    14. 
  
  
  
  14.             onsuccess(data); 
    15. 
  
  
  
  15.         } 
    16. 
  
  
  
  16.     } 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.     const script = createScript(url + '?callback=jsonp' + hash, charset); 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.     // 監(jiān)聽加載成功的事件，獲取數(shù)據(jù)，這個位置用了兩個事件onload和onreadystatechange是為了兼容IE，因為IE9之前不支持onload事件，只支持onreadystatechange事件 
    21. 
  
  
  
  21.     script.onload = script.onreadystatechange = function() { 
    22. 
  
  
  
  22.         //若不存在readyState事件則證明不是IE瀏覽器，可以直接執(zhí)行，若是的話，必須等到狀態(tài)變?yōu)閘oaded或complete才可以執(zhí)行 
    23. 
  
  
  
  23.         if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 
    24. 
  
  
  
  24.             script.onload = script.onreadystatechange = null; 
    25. 
  
  
  
  25.             // 移除該script的DOM對象 
    26. 
  
  
  
  26.             if (script.parentNode) { 
    27. 
  
  
  
  27.                 script.parentNode.removeChild(script); 
    28. 
  
  
  
  28.             } 
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.             // 刪除函數(shù)或變量 
    31. 
  
  
  
  31.             window['jsonp' + hash] = null; 
    32. 
  
  
  
  32.         } 
    33. 
  
  
  
  33.     }; 
    34. 
  
  
  
  34.  
    35. 
  
  
  
  35.     script.onerror = function() { 
    36. 
  
  
  
  36.         if (onerror && typeof(onerror) === 'function') { 
    37. 
  
  
  
  37.             onerror(); 
    38. 
  
  
  
  38.         } 
    39. 
  
  
  
  39.     } 
    40. 
  
  
  
  40.  
    41. 
  
  
  
  41.     // 添加標(biāo)簽，發(fā)送請求 
    42. 
  
  
  
  42.     document.getElementsByTagName('head')[0].appendChild(script); 
    43. 
  
  
  
  43. } 
    44.

本文轉(zhuǎn)載自微信公眾號「前端點線面」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端點線面公眾號。


文章標(biāo)題：前端百題斬之瀏覽器出讓安全性造就Jsonp
當(dāng)前URL：http://www.5511xx.com/article/cdhicpo.html