做web開發的小伙伴兒們肯定經常遇到javascript跨域請求的問題,解決該問題的方法很多,今天蘇州網站建設就來介紹一下最常用的jsonp的方法。
先來介紹一下什么是跨域請求。
說到跨域請求就得說一下瀏覽器的同源策略。如果web頁面所在的服務器與web頁面請求的服務器使用相同的協議、端口和主機,那么他們就屬于同源,否則就屬于不同源。對于不同源的javascript請求就屬于跨域請求,瀏覽器會阻止這樣的請求。當然瀏覽器這樣做是為了安全的考慮,但是這樣卻讓我們跨域請求數據無法完成。
我們來看一下跨域請求的例子。
發起請求的web頁面代碼:
發起請求的web頁面代碼
服務器端jsonp.php代碼:
服務器端jsonp.php代碼
打開web頁面如下:
跨域請求的web頁面
通過上面的例子可以看到,跨域請求的時候被瀏覽器阻止了。下面我們就用jsonp的方式來解決javascript的跨域請求問題。
jsonp解決跨域請求的過程:
1. 在web頁面定義一個回調函數,然后把回調函數的名字傳給服務器端;
2. 服務器端獲取數據,組裝json字符串
3. 服務器端輸出一段javascript代碼來執行頁面的回調函數,并將組裝好的json字符串作為參數傳遞到該回調函數中
4. web頁面接收到服務器端傳回來的javascript代碼段并執行
以上就是jsonp跨域請求的一般過程,下面來看一個例子
發起請求的web頁面代碼:
jsonp方式的web頁面代碼
服務器端jsonp.php代碼:
服務器端jsonp.php代碼
打開web頁面如下:
跨域請求成功的web頁面
下面我們附上$.ajax方式的jsonp代碼:
使用ajax方式的jsonp代碼
我們可以看到以上例子實現了javascript的跨域請求。蘇州網站建設提醒要注意jsonp的跨域請求方式需要客戶端和服務端兩方面的配合來完成,服務端需要根據客戶端的回調函數名字來返回數據,所以在使用jsonp方式來跨域請求的時候要注意兩端配合才能成功。另外,在使用jsonp之前需要對提供數據的服務端有足夠的了解,以免遭到攻擊!