JSONP 教程

Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網(wǎng)頁從別的域名(網(wǎng)站)那獲取資料,即跨域讀取數(shù)據(jù)。

什么是JSONP?

JSONP表示帶有填充的JSON。

由于跨域策略,從另一個(gè)域請求文件可能會(huì)導(dǎo)致問題。

從另一個(gè)域請求外部腳本不會(huì)出現(xiàn)此問題。

JSONP利用了這一優(yōu)勢,并使用<script>標(biāo)記而不是XMLHttpRequest對象來請求文件。

  <script src="jsonp_demo.php">

服務(wù)器上的文件(jsonp_demo.php)將結(jié)果包裝在函數(shù)調(diào)用中:

  <?php
  $myJSON = '{ "name":"Seagull", "age":32, "city":"New Delhi" }';
  echo "myFunc(".$myJSON.");";
  ?>

名為“ myFunc”的函數(shù)位于客戶端上,可以處理JSON數(shù)據(jù):

function myFunc(myObj) {
  document.getElementById("output").innerHTML = myObj.name;
}
測試看看?/?

JSON和JSONP之間的區(qū)別

JSON: JavaScript使用JSON(JavaScript對象表示法)通過網(wǎng)絡(luò)交換數(shù)據(jù)。它仔細(xì)查看JSON數(shù)據(jù),它只是一個(gè)字符串格式的JavaScript對象。

JSON示例:
  { "name":"Seagull", "age":22, "city":"New Delhi" }

JSONP: JSONP是帶有填充的JSON。在這里,填充意味著將函數(shù)包裝在JSON中,然后再返回到請求中。

JSONP示例:
  myFunc({ "name":"Seagull", "age":22, "city":"New Delhi" })

使用JSONP的方法

  • 在HTML代碼中,包括script標(biāo)簽。該腳本標(biāo)簽的來源將是要從中檢索數(shù)據(jù)的URL。Web服務(wù)允許指定回調(diào)函數(shù)。在URL中,最后包含callback參數(shù)。

  • 當(dāng)瀏覽器遇到script元素時(shí),它將HTTP請求發(fā)送到源URL。

  • 服務(wù)器使用封裝在函數(shù)調(diào)用中的JSON發(fā)送回響應(yīng)。

  • 瀏覽器會(huì)解析字符串形式的JSON響應(yīng)并將其轉(zhuǎn)換為JavaScript對象。調(diào)用回調(diào)函數(shù),并將生成的對象傳遞給它。

創(chuàng)建動(dòng)態(tài)腳本標(biāo)簽

上面的示例將在頁面加載時(shí)根據(jù)放置script標(biāo)記的位置執(zhí)行“ myFunc”功能。

但是,僅應(yīng)在需要時(shí)創(chuàng)建腳本標(biāo)簽。

下面的示例將在單擊按鈕時(shí)創(chuàng)建并插入<script>標(biāo)記:

function createScriptDynamically() {
  var elem = document.createElement("script");
  elem.src = "jsonp_demo.php";
  document.body.appendChild(elem);
}
測試看看?/?
丰满人妻一级特黄a大片,午夜无码免费福利一级,欧美亚洲精品在线,国产婷婷成人久久Av免费高清