快捷導(dǎo)航

JSONP之我見(jiàn)

更新時(shí)間：2015年03月24日 08:55:54 投稿：hebedich

本文主要向大家介紹了個(gè)人對(duì)于jsonp的理解，jsonp的概念，跨域問(wèn)題，以及jsonp與XMLHttpRequest的區(qū)別，由于本人也是javascript的初學(xué)者，難免會(huì)有些不當(dāng)之處，還請(qǐng)指正，謝謝。

JavaScript初學(xué)，一點(diǎn)自己的理解，有不當(dāng)之處請(qǐng)大家指正~

JSONP：

本地html文件要獲取xxx網(wǎng)站（跨域）數(shù)據(jù)時(shí)使用的方法。

跨域問(wèn)題：

外部服務(wù)器的數(shù)據(jù)只能用外部服務(wù)器中的js訪問(wèn)，本地js無(wú)法用XMLHttpRequest()訪問(wèn)。

外部服務(wù)器中的Web服務(wù)提供JSON數(shù)據(jù)，比如在http://gumball.wickedlysmart.com/中，數(shù)據(jù)包含在函數(shù)updateSales中作為參數(shù)，現(xiàn)在要在本地html中訪問(wèn)外部服務(wù)器中的JSON數(shù)據(jù)該怎么辦呢？

1，查看Web服務(wù)文檔，明確服務(wù)實(shí)際使用的參數(shù)名（本例只有一個(gè)參數(shù)即一個(gè)對(duì)象數(shù)組）；
2，在url中指定一個(gè)回調(diào)函數(shù)，http://gumball.wickedlysmart.com/?callback=updateSales，用來(lái)指定Web服務(wù)中訪問(wèn)JSON數(shù)據(jù)的函數(shù)名；
3，在本地js文件中使用剛才定義的函數(shù)名創(chuàng)建函數(shù)updateSales(對(duì)象),編寫(xiě)處理得到外部JSON數(shù)據(jù)的方法；
4，在html文件中的<body>標(biāo)簽下使用<script>標(biāo)簽鏈接到外部Web服務(wù)，url為2中的那個(gè)路徑。

總結(jié)：

JSONP目的在于提供給本地html一個(gè)函數(shù)接口（本地html可通過(guò)在url后方加入？callback=functionName的方法指定函數(shù)名），為了確保數(shù)據(jù)訪問(wèn)的安全，服務(wù)器將安全的數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)中，函數(shù)內(nèi)部的參數(shù)就是服務(wù)器提供給本地的數(shù)據(jù)，至于怎么使用這些數(shù)據(jù)就要在本地的js中定義這個(gè)callback函數(shù)了。

注意：本地使用JSONP請(qǐng)求訪問(wèn)Web服務(wù)，可能會(huì)獲取不安全的Js代碼，所以要確保信任這個(gè)Web服務(wù)。

JSONP與XMLHttpRequest：

XMLHttpRequest用于開(kāi)發(fā)內(nèi)部Web服務(wù)，內(nèi)部訪問(wèn)內(nèi)部，同域訪問(wèn)會(huì)更加簡(jiǎn)便。

訪問(wèn)外部數(shù)據(jù)時(shí)（跨域訪問(wèn)）就要使用JSONP。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡，能夠?qū)Υ蠹覍W(xué)習(xí)jsonp有所幫助。

您可能感興趣的文章: