當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JSONP简单入门介绍
生活随笔
收集整理的這篇文章主要介紹了
JSONP简单入门介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、什么是JSONP？
JSON with padding 是一種數據交換的技巧，用于解決主流瀏覽器的跨域數據訪問的問題！二、生產的背景
由于同源策略，一般來說位于A服務器的網頁是無法與其他服務器上的資源溝通的 而html中的`<script>`是一個特例，JSONP就是利用`<script>`這個標簽實例動態地 從其他服務器獲取資源（一般來說是一些文本內容）。三、使用
客戶端JS代碼首先定義一個回調函數，該回調函數接收將要被處理的數據參數，參數個數不定。
客戶端HTML代碼嵌入一段<script>引用，src指向服務器程序的URL，并在URL在給定一個參數，它的值就是上面1定義的function名
服務器端代碼（如PHP）接收到請求，解析參數取得客戶端中定義的回調函數名，并將取得的回調函數名當作函數名稱與數據合并輸出一段 JS調用函數的代碼
四、Talk is cheap, Show me the code!
服務器端程序代碼 jsonp.php （在B機器）
<?php $func = $_GET['callback']; //這里獲取客戶JS定義的回調函數名稱 $data = 'This is the jsonp data on crossdomain request'; echo "$func('{$data}')"; //這是一段JS代碼客戶端HTML代碼：jsonptest.html（在A機器上）
<!DOCTYPE html> <html> <head><title>Json test</title> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> function callbackfunc(data){$("#padding-content").text("callback:"+data); } </script> <script type="text/javascript" src="http://www.B.com/jsonp.php?callback=callbackfunc"></script> </html>打開瀏覽器A服務器上的jsonptest.html 可能看到結果
callback:This is the jsonp data on crossdomain requestAjax跨域請求：
還是用剛才的服務器端程序，我們修改一下客戶HTML中的JS代碼，發起一個請求
<!DOCTYPE html> <html> <head><title>Json test</title><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> $(".button").click(function(){$.ajax({url:"http://www.B.com/jsonp.php",dataType:"jsonp",type:"get",jsonpCallback:"testJsonpCallBackFunc",error:function(err, errstr){$("#padding-content").text(errstr);},success:function(resp){$("#padding-content").text(resp);}});}); </script> </html>點擊頁面的json data，成功在頁面打印以下內容，表示跨域調用成功
callback:This is the jsonp data on crossdomain request
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的JSONP简单入门介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS MMDrawerControll
- 下一篇： JavaScript中Ajax源码