Jsonp的學習筆記

時間 2019-12-07

標籤 jsonp 學習筆記欄目 JSON 简体版

原文原文鏈接

最近學習了jsonp，在這裏總結一下javascript

一、什麼是同源策略？跨域？php

　　首先，jsonp是爲了解決跨域而產生的一種手段。跨域是由於瀏覽器都知足與一種同源策略。html

　　何謂同源:
        URL由協議、域名、端口和路徑組成，若是兩個URL的協議、域名和端口相同，則表示他們同源。
  同源策略:
        瀏覽器的同源策略，限制了來自不一樣源的"document"或腳本，對當前"document"讀取或設置某些屬性
        從一個域上加載的腳本不容許訪問另一個域的文檔屬性。java

二、解決跨域問題的方法　jquery

　　(1)、Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一概不許；不過咱們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不只如此，咱們還發現凡是擁有」src」這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）；web

　　(2)、因而能夠判斷，當前階段若是想經過純web端（ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；ajax

　　(3)、恰巧咱們已經知道有一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據，更妙的是JSON還被js原生支持，因此在客戶端幾乎能夠爲所欲爲的處理這種格式的數據；apache

　　(4)、這樣子解決方案就呼之欲出了，web客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。json

　　(5)、客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。跨域

　　(6)、爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。

三、跨域服務器

　　jsonp是利用<script>的跨域能力來實現，src的值爲另外一個域下的文件目錄，便可實現跨域訪問.

　　首先我在一個服務器上apache開啓了兩個端口80與800，apache的默認端口爲80，只需打開800端口便可，進入/etc/httpd/conf/httpd.conf配置文件，把最後的一段註釋改寫成如下：

1 <VirtualHost *:800>
2     ServerAdmin webmaster@dummy-host.example.com
3     DocumentRoot /var/www/web1
4     ServerName 101.200.175.86:800
5 #    ErrorLog logs/dummy-host.example.com-error_log
6 #    CustomLog logs/dummy-host.example.com-access_log common
7 </VirtualHost>

　　重啓便可，打開網頁，url:800便可進入新的域，網頁的根目錄爲www/web1/.

四、jsonp的實例

　　如今咱們有兩個域，在800端口下新建一個jsonp.html文件，在80端口下新建一個re.php文件，這裏html文件將調用在其餘域下的php文件，實現一個查詢取數據功能

jsonp.html

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <script>
 7                 var localHandler = function(data){
 8                         alert(data.a);　　　　　　　　　　//返回後臺數組中a的數值  9                 }
10          var url = "http://101.200.175.86/re.php?callback=localHandler";
11     // 建立script標籤，設置其屬性
12     var script = document.createElement('script');
13     script.setAttribute('src', url);
14     // 把script標籤加入head，此時調用開始
15     document.getElementsByTagName('head')[0].appendChild(script);
16         </script>
17 </head>
18 <body>
19         <button id="getOtherDomainThings">1111111</button>
20 
21 </body>
22 </html>

url中能夠添加參數

http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler

傳入php文件，實現檢索的做用

re.php

 1 <?php
 2 
 3 $callback = $_REQUEST['callback'];              //request同時接受get與post
 4 
 5 $output = array('a' => 'Apple', 'b' => 'Banana');
 6 
 7 if ($callback) {
 8     header('Content-Type: text/javascript');
 9     echo $callback . '(' . json_encode($output) . ');';         //json_encode方法，對象轉換爲json
10 } else {
11     header('Content-Type: application/x-json');
12     echo json_encode($output);
13 }
14 
15 ?>
16 ~

結果：

五、jquery的實現方法

　　jquery中把jsonp方法整合進了ajax中，可是ajax與jsonp徹底不相同，ajax是經過xmlhttprequest對象來傳遞，jsonp是利用<script>在不一樣域的傳遞。

例子：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script typpe="text/javascript" src="jquery-2.1.1.js"></script>
 7 </head>
 8 <body>
 9     <script>
10         $(function(){
11             $.ajax({
12                 type:"get",
13                 url:"http://101.200.175.86/re.php",
14                 dataType:"jsonp",                    //設置爲jsonp格式，會實現自動的格式自動替換函數名等功能
15                 jsonp:"callback",                    //傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名，等於callback=？
16                 //jsonpCallback:"localHandler",        //callback=？函數的中？的值，能夠不寫，jqeury會自動處理
17                 success:function(data){
18                     alert(data.a);
19                 }
20             })
21         })
22     </script>
23 </body>
24 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。