做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之前需要對提供數據的服務端有足夠的了解，以免遭到攻擊！