標籤：style blog http io ar color os 使用 sp
假設我們已經瞭解什麼是同源策略，以及什麼是瀏覽器的同源策略的限制。
現在我們需要在a.demo.com下的某個頁面one.html 裡載入不同域b.demo.com下的json資料。
我們都知道用<script>或者<img>標籤的src屬性是可以跨域從某個網站載入資料的，jsonp就是根據這個原理來實現。
我們同樣也知道，當瀏覽器載入完<script>標籤的內容之後，它會立即執行。所以為了不讓瀏覽器報錯，這些內容應該是一些變數的定義或者是函數的調用之類的東西。
但是，我們要使用這些資料，所以如果這些內容是變數的定義的話，那麼我們將使用不了（你可以試下）。所以，我們要將這些資料封裝在一個函數調用裡面，讓它作為這個函數調用的參數。
比如像下面這個樣子：
jsonCallBack({"email":"[email protected]"})
那麼我們要在one.html裡面怎麼應用這個來自b.demo.com的資料呢？
講完了理論，來實戰。
首先，我們建立一個頁面叫做jsonp-one.html，
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <button id="getData"> click me to get data</button> <script> window.onload = function(){ var btn = document.getElementById(‘getData‘); var handle = function(){ var scriptEle = document.createElement(‘script‘); scriptEle.src = ‘http://localhost:8080/jsonData.json?callback=jsonCallBack‘; document.getElementsByTagName(‘body‘)[0].appendChild(scriptEle); }; btn.addEventListener(‘click‘,handle,false); } var jsonCallBack = function(data){ console.dir(data); } </script></body></html>
我使用webstorm內建的瀏覽器查看功能，所以當我開啟時，他的地址欄是這樣的：http://localhost:63342/javascript/test/jsonp-one.html
主機地址是localhost，連接埠號碼63342。
可以看到，代碼裡當點擊按鈕的時候，會建立一個script標籤，然後設定它的src為我們所需要的資料來源的地址，最後加上?callback=jsonCallBack 。這樣子資料檔案就可以被載入到。最後我們將這個script插入到body裡面。
圖為還未點擊按鈕之前的頁面以及控制台。
然後我們建立一個檔案，叫做jsonData.json，名字不重要，只要和jsonp-one.html裡面的一致即可，重要的是裡面的內容：
jsonCallBack({"email":"[email protected]"})
這裡的資料其實是調用一個函數，函數名jsonCallBack，參數是我們真正要傳給jsonp-one.html頁面的資料。
現在我們另起一個服務，正如上面的代碼所示，
http://localhost:8080/jsonData.json?callback=jsonCallBack
通過這個地址可以訪問到剛才jsonData.json的內容。圖為jsonData.json的內容：
然後我們可以看到，在jsonp-one.html裡面，我們定義一個函數jsonCallBack，這樣的話，當我們載入完來自8080連接埠的資料時，便能夠立即調用這個函數，因為這個函數我們在這裡已經定義過了，所以不會報錯，能夠正常執行。至於我們要用這些資料來幹什麼，那就是你自己在jsonCallBack這個函數裡面要做的事情了。
當我們點擊按鈕時，我們可以看到瀏覽器的network以及控制台的輸出：
控制台：
可以看到，資料正確載入了。
就這樣，實現了使用jsonp技術，將資料從連接埠8080的這個域，傳到連接埠63342的這個域。
jsonp的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
