2018-03-05 關(guān)鍵詞:蘇州網(wǎng)站建設(shè) 蘇州做網(wǎng)站 蘇州網(wǎng)站制作 蘇州網(wǎng)站設(shè)計 3216
做web開發(fā)的小伙伴兒們肯定經(jīng)常遇到javascript跨域請求的問題,解決該問題的方法很多,今天蘇州網(wǎng)站建設(shè)就來介紹一下最常用的jsonp的方法。
先來介紹一下什么是跨域請求。
說到跨域請求就得說一下瀏覽器的同源策略。如果web頁面所在的服務(wù)器與web頁面請求的服務(wù)器使用相同的協(xié)議、端口和主機,那么他們就屬于同源,否則就屬于不同源。對于不同源的javascript請求就屬于跨域請求,瀏覽器會阻止這樣的請求。當(dāng)然瀏覽器這樣做是為了安全的考慮,但是這樣卻讓我們跨域請求數(shù)據(jù)無法完成。
我們來看一下跨域請求的例子。
發(fā)起請求的web頁面代碼:
發(fā)起請求的web頁面代碼
服務(wù)器端jsonp.php代碼:
服務(wù)器端jsonp.php代碼
打開web頁面如下:
跨域請求的web頁面
通過上面的例子可以看到,跨域請求的時候被瀏覽器阻止了。下面我們就用jsonp的方式來解決javascript的跨域請求問題。
jsonp解決跨域請求的過程:
1. 在web頁面定義一個回調(diào)函數(shù),然后把回調(diào)函數(shù)的名字傳給服務(wù)器端;
2. 服務(wù)器端獲取數(shù)據(jù),組裝json字符串
3. 服務(wù)器端輸出一段javascript代碼來執(zhí)行頁面的回調(diào)函數(shù),并將組裝好的json字符串作為參數(shù)傳遞到該回調(diào)函數(shù)中
4. web頁面接收到服務(wù)器端傳回來的javascript代碼段并執(zhí)行
以上就是jsonp跨域請求的一般過程,下面來看一個例子
發(fā)起請求的web頁面代碼:
jsonp方式的web頁面代碼
服務(wù)器端jsonp.php代碼:
服務(wù)器端jsonp.php代碼
打開web頁面如下:
跨域請求成功的web頁面
下面我們附上$.ajax方式的jsonp代碼:
使用ajax方式的jsonp代碼
我們可以看到以上例子實現(xiàn)了javascript的跨域請求。蘇州網(wǎng)站建設(shè)提醒要注意jsonp的跨域請求方式需要客戶端和服務(wù)端兩方面的配合來完成,服務(wù)端需要根據(jù)客戶端的回調(diào)函數(shù)名字來返回數(shù)據(jù),所以在使用jsonp方式來跨域請求的時候要注意兩端配合才能成功。另外,在使用jsonp之前需要對提供數(shù)據(jù)的服務(wù)端有足夠的了解,以免遭到攻擊!
180 1557 7818
基礎(chǔ)型網(wǎng)站建設(shè)營銷型網(wǎng)站設(shè)計品牌型網(wǎng)站建設(shè)高端定制網(wǎng)站設(shè)計定制系統(tǒng)開發(fā)
細(xì)致入微的前期服務(wù)
精準(zhǔn)的策劃服務(wù)
精湛的網(wǎng)頁設(shè)計
穩(wěn)定 可靠 極速的域名和服務(wù)器
任何問題,24小時回復(fù)并處理
版權(quán)所有:蘇州謝謝網(wǎng)絡(luò)傳媒有限公司 蘇ICP備11087090號