1、關(guān)于跨域和jsonp的一些理解(新手向)作者：未知 原文鏈接：/a/1190000009577990 收集整理：/test/index.php本文由 干貨1注冊登錄 2_ Kw a n115關(guān)于跨域和js o n p的一些理解( 3新手向)非常慚愧 ， 還記得 2016年那人生中第一次面試 ， 被問 到 4有沒用過 aj a x？ 你怎么解決跨域問題時 ， 我回答沒用過 。 。不知道的 動 5時候 ， 面試官那一臉茫然 ， 對于當(dāng)時以為 js只是做個輪播圖 ， 做點小 6畫的我來說 ， a j a x、跨域什么的

2、就如同一道難以逾越的高墻一般 。 。 7在后來的實習(xí)中終于接觸到并且運用起了 a j a x， 跨域也解決過 ， 不 8過是后端同事解決的 （ 現(xiàn)在才知道那應(yīng)該就是 C O R S了吧 ） ， 所以 j 9on p到底是啥 ， 每次搜索完看了一下就放棄了 。 本文內(nèi)容淺顯 ， 適合 10人群 ： 1.不懂什么是跨域 2.不想自己弄兩個不同域名進行跨域測試的 同 11童鞋 什么是跨域 我的理解是 ， 當(dāng)用戶對不同協(xié)議或不同端口或不 12域名的資源進行訪問時 ， 就是跨域 。 為什么會造成跨域 罪魁禍?zhǔn)?13： 同源策略 同源定義 ： 即同一域 ， 即相同協(xié)議 &相同端口 &相同域名 & 14相同

3、子域名 同源策略規(guī)定 ： X H R對象只能訪問與包含它的頁面位于同 15一域中的資源 ， 有利于預(yù)防一些惡意行為 。 怎么解決跨域 解決辦 16法有很多 ， C O R S、 i f r a m e、 h 5新特性 po s t Me s s a g 17e等 ， 而比較簡單的方法就是今天著重介紹的 j s o n p。 解決依據(jù) ： 18盡管不能訪問非本域的動態(tài)資源 ， 但是類似 js文件 、樣式 、圖片等靜態(tài) 19資源是可以訪問的 ！ 就是通過這個 “漏洞 ”來解決跨域問題 。用 標(biāo)簽中的 sr c來寫入跨域數(shù)據(jù)的 u r l， 這樣就能繞過同源策 21略了 。 。 “老師 ， 他作弊

4、！ ”簡單介紹 js o n pJ S O N P， 22JS O Nw i t h Pa d d i n g的簡寫 ， 這個全稱對 j s o n p的理解 23還是有一定的幫助的 。填充式 JS O N或者說是參數(shù)式 J S O N。 J S O 24NP的語法和 JS O N很像 ， 簡單來說就是在 JS O N外部用一個函數(shù)包 25裹著 。 J S O N P基本語法如下 ： c a l l b a c k (n a m e 26:k w a n ,m s g :獲取成功 );J S O N P兩部分 27組成 ： 回調(diào)函數(shù)和里面的數(shù)據(jù) ?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時 ， 應(yīng)該在頁面中 28

5、調(diào)用的函數(shù) ， 一般是在發(fā)送過去的請求中指定 。 J S O N P原理 ： 剛才 29的解決依據(jù)可知 ， J S O N P原理就是動態(tài)插入帶有跨域 u r l的 標(biāo)簽 ， 然后調(diào)用回調(diào)函數(shù) ， 把我們需要的 js o n數(shù)據(jù)作為參 31數(shù)傳入 ， 通過一些邏輯把數(shù)據(jù)顯示在頁面上 。 原理看千遍 ， 一寫 32又不會 我想說這個 JS O N P我看了很多次 ， 參考過不同的文章 ， 原 33理都會背了 ， 結(jié)果自己寫一個出來 ， 傻眼 。 。 網(wǎng)上有很多文章 ， 良心一 34點的會配有些代碼解釋 ， 然而對小白來說 ， 要自己 do w n個 W A M P什 35么的服務(wù)器集成軟件或者自

6、己搭個服務(wù)器 ， 再弄兩個不同源的 h t m l才 36能進行模擬跨域 ， 這真的 。 。 。 。好麻煩 。 。 終于 ， 看到了一篇文章 ， 37一個通過調(diào)用 ap i接口來模擬跨域請求數(shù)據(jù)的 DE M O， 實在感謝啊 ！ 38這才是我所要的好嗎 ！ （ 鏈接在本文最后 ） J S O N P跨域小實 39踐 你再怎么懂原理 ， 再怎么會 J S O N P基本語法 ， 不真正執(zhí)行一下 你 40其實還是懵逼 。當(dāng)然 ， 我認為我還是需要模擬不同源的跨域請求才對真 41弄懂跨域有一定好處 。 下面展示的代碼源于那篇文章 ， 需求是輸入歌名 42， 點擊搜索后 ， 跨域請求 A P I接口

7、， 返回數(shù)據(jù)后 ， 顯示專輯名在頁面 。 43下面是我對以上代碼的一 44些文字解釋 ： 1） 點擊按鈕后動態(tài)插入跨域數(shù)據(jù) ， 然后由于此接口用 s 45ea r c h Js o n Ca l l b a c k ()來封裝 js o n格式數(shù)據(jù) 46， 因此可看作是調(diào)用一個函數(shù) ， 同時把 js o n數(shù)據(jù)作為參數(shù)傳入 2） 47所以當(dāng)動態(tài)插入 sc r i p t標(biāo)簽后 ， 寫好了的 se a r c h Js o n C 48al l b a c k ()函數(shù)將被調(diào)用 ， 參數(shù) da t a就是 js o n數(shù)據(jù) ， 然 49后通過遍歷渲染到 DO M上 ， 完成整個跨域獲取數(shù)據(jù)流程

8、總結(jié)步驟 ： 觸 50發(fā) c l i c k -動態(tài)插入帶有 A P I接口的 sc r i p t標(biāo)簽 -根據(jù) 51回調(diào)函數(shù)名調(diào)用函數(shù) -遍歷數(shù)據(jù) -渲染到頁面 當(dāng) J S O N P遇上 52j Qu e r y a j a x注意了 ， 千萬不要認為用了 jQu e r y a 53ja x， 就是通過它來實現(xiàn)跨域請求 ， 其實只是因為它很好地封裝了 JS 54ON P而已 用 j Qu e r y a j a x原理和上面的是一樣的 ， 只不過我 55們不需要手動的插入 sc r i p t標(biāo)簽以及定義回調(diào)函數(shù) 。 j q u e r y 56會自動生成一個全局函數(shù)來替換 ca l l

9、 b a c k=?中的問號 ， 之后獲 57取到數(shù)據(jù)后又會自動銷毀 ， 實際上就是起一個臨時函數(shù)的作用 。 于 58是對上面的代碼進行修改 ， 并且把請求數(shù)據(jù)改為每次顯示 5條 ： 59關(guān)于 js o n p、 j s o 60np Ca l l b a c k兩個屬性 ， 部分解釋一直沒看懂 ， 如下 ： j s o 61np:c a l l b a c k ,/傳遞給請求處理程序或頁面的 ， 用以 62獲得 js o n p回調(diào)函數(shù)名的參數(shù)名 (一般默認為 :c a l l b a c k) 63js o n p Ca l l b a c k:h a n d l e r ,/自定義的 (

10、? 64)j s o n p回調(diào)函數(shù)名稱 ， 默認為 jQu e r y自動生成的隨機函數(shù)名 65， 也可以寫 ?， j Qu e r y會自動為你處理數(shù)據(jù) 直到有次看了下 66Ne t w o r k， 懂了 。其實就是拼接到 u r l時想要顯示的內(nèi)容 。 如 67上面情況 ， u r l則會變成 h t t p:/.& p e r p a g e= 685& i e=u t f- 8& c a l l b a c k=s e a r c h Js o n Ca 69ll b a c k &.所以簡單來說 ， j s o n p就是相當(dāng)于一個名 70字 ， 一個參數(shù)名 js o n p C

11、a l l b a c k就是回調(diào)函數(shù)名 ， 用來包裹 71JS O N數(shù)據(jù)的然后將 j s o n p Ca l l b a c k定義的函數(shù)賦值給 j 72so n p定義的參數(shù)上 ， 最后拼接在 u r l末尾完成參數(shù)傳遞 。 注意 ： 73js o n p可以隨便寫 ， 不寫也行 ， 反正默認是 c a l l b a c k但 j 74so n p Ca l l b a c k必須是對應(yīng)其返回數(shù)據(jù)的函數(shù)名 ， 此 AP I接 75口返回的數(shù)據(jù)外圍用 se a r c h Js o n Ca l l b a c k ()包裹數(shù) 76據(jù) ， 因此只能是這個 （ 有些文章說這個也是可以自定

12、義的 ， 但我測試時 77便寫就報錯了 。 ?？赡芤驗檫@個 AP I接口固定了函數(shù)名吧 ） 其實上面 78這些例子更方便將理論用于實踐 ， 畢竟數(shù)據(jù)等都是現(xiàn)成的 ， 跨域問題也是 79常見的開發(fā)問題 ， 感覺就沒必要大費周章才能進行模擬跨域 （ 所以我上 80說自己弄服務(wù)器那種方法略麻煩 ） 參考資料 ： 上面提到的原文鏈接 ： （ 81可惜沒有 CO R S舉例 ） h t t p:/ w w w.c n b l o g s.c o 82m/ s t-l e s.另一篇幫助理解的文章 ： h t t p:/ b l 83og.c s d n.n e t/ u 0139455.還有很多良心文章

13、 84就不一一列舉了 ， 這次是首次將跨域理論落實到實踐 ， 覺得很過癮所以就 85寫下來了 。排版不太好勿見怪 。大神路過如有些其他看法可以在下面留言 86。 閱讀 12. 4k更新于 2017- 09- 17本作品系原創(chuàng) ， 采用 署名 -非商業(yè)性 87使用 -禁止演繹 4. 0國際 許可協(xié)議 _ Kw a n115關(guān)注作者 推薦 產(chǎn)品熱門問答熱門專欄熱門課程最新活動技術(shù)圈酷工作 移動客戶端課程Java 開發(fā)課程 PHP 開發(fā)課程Python 開發(fā)課程前端開發(fā)課程 移動開發(fā)課程 資源每周精選88閱讀前端學(xué)習(xí)之路用戶專欄本人才疏學(xué)淺，首次開通專欄，記錄學(xué)習(xí)點滴，成長之路3 人關(guān)注 8 篇文章 關(guān)注專欄專欄主頁 用戶排行榜徽章 幫助中心 聲望與權(quán)限 社