做web開發(fā)的小伙伴兒們肯定經(jīng)常遇到javascript跨域請求的問題，解決該問題的方法很多，今天蘇州網(wǎng)站建設(shè)就來介紹一下最常用的jsonp的方法。

先來介紹一下什么是跨域請求。

說到跨域請求就得說一下瀏覽器的同源策略。如果web頁面所在的服務(wù)器與web頁面請求的服務(wù)器使用相同的協(xié)議、端口和主機，那么他們就屬于同源，否則就屬于不同源。對于不同源的javascript請求就屬于跨域請求，瀏覽器會阻止這樣的請求。當然瀏覽器這樣做是為了安全的考慮，但是這樣卻讓我們跨域請求數(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ù)端有足夠的了解，以免遭到攻擊！