做(zuò)web開(kāi)發的(de)小(xiǎo)夥伴兒(ér)們肯定經常遇到(dào)javascript跨域請(qǐng)求的(de)問(wèn)題，解決該問(wèn)題的(de)方法很(hěn)多(duō)，今天蘇州網站(zhàn)建"設就(jiù)來(lái)介紹一(yī)下(xià)最常用(yòng)的(de)jsonp的(de)方法。

先來(lái)介紹一(yī)下(xià)什(shén)麽是(shì)跨域請(qǐng)求。

說(shuō)到(dào)跨域請(qǐng)求就(jiù)得(de)說(shuō)一(yī)下(xià)浏覽器(qì)的(de)同源策略。如(rú)果web頁面所在的(de)服務器(qì)與web頁面請(qǐng)求的(de)服務器(qì)使用(yòng)相(xiàng)同的(de)協議(yì)、端口和(hé)主機(jī)，那(nà )麽他(tā)們就(jiù)屬于同源，否則就(jiù)屬于不(bù)同源。對(duì)于不(bù)同源的(de)javascript請(qǐng)求就(jiù)屬于跨域請(qǐng)求，浏覽器(qì)會(huì)阻止這(zhè)樣的(de)請(qǐng)求。當然浏覽器(qì)這(zhè)樣做(zuò)ε是(shì)為(wèi)了(le)安全的(de)考慮，但(dàn)是(shì)這(zhè)樣卻讓我們跨域請(qǐng✔)求數(shù)據無法完成。

我們來(lái)看(kàn)一(yī)下(xià)跨域請(qǐng)求的(de)例子(zǐ)。

發起請(qǐng)求的(de)web頁面代碼：

發起請(qǐng)求的(de)web頁面代碼

服務器(qì)端jsonp.php代碼：

服務器(qì)端jsonp.php代碼

打開(kāi)web頁面如(rú)下(xià)：

跨域請(qǐng)求的(de)web頁面

通(tōng)過上(shàng)面的(de)例子(zǐ)可(kě)以看(kàn)到(dào)，跨域請(qǐng)求的(de)時(shí)候被浏覽器(qì)阻止了(le)。下(xià)面我們≤就(jiù)用(yòng)jsonp的(de)方式來(lái)解決javascript的(de)跨域請(qǐng)求問(wèn)題。

jsonp解決跨域請(qǐng)求的(de)過程：

1.   在web頁面定義一(yī)個(gè)回調函數(shù)，然後把回調函數(shù)的(de)名字傳給服務器(qì)端；

2.   服務器(qì)端獲取數(shù)據，組裝json字符串

3.   服務器(qì)端輸出一(yī)段javascript代碼來(lái)執行(xíng)頁面的(de)回調函數(shù)，并将組裝好(hǎo)的(de)json字符串作(zuò)為(wèi)參數(shù)傳遞到(dào)該回調函數(shù)中

4.   web頁面接收到(dào)服務器(qì)端傳回來(lái)的(de)javascript代碼段并執行(xíng)

以上(shàng)就(jiù)是(shì)jsonp跨域請(qǐng)求的(de)一(yī)般過程，下(xià)面來(lái)看(kàn)一(yī)個(gè)例子(‍zǐ)

發起請(qǐng)求的(de)web頁面代碼：

jsonp方式的(de)web頁面代碼

服務器(qì)端jsonp.php代碼：

服務器(qì)端jsonp.php代碼

打開(kāi)web頁面如(rú)下(xià)：

跨域請(qǐng)求成功的(de)web頁面

下(xià)面我們附上(shàng)$.ajax方式的(de)jsonp代碼：

使用(yòng)ajax方式的(de)jsonp代碼

我們可(kě)以看(kàn)到(dào)以上(shàng)例子(zǐ)實現(xiàn)了(le)javascript的(de)跨域請(qǐng)求。蘇州網站(zhàn)建設提醒要(yào)注意jsonp的(de)跨域請(qǐng)求方式需要(yào)客戶端和(hé)服務端兩方面的(de)配合來(lái)完成，服務端需要(yào)根據客戶端的(de)回調函數(shù)名字來(lái)返回數(s€hù)據，所以在使用(yòng)jsonp方式來(lái)跨域請(qǐng)求的(de)時(shí)候要(yào)注意兩端配合才能(néng)成功。另外(wài)，在使用(yòng)jsonp之前需要(yào)對(duì)提供數(shù)據的(de)服務端有(yǒu)足夠的(de)了(le)解，以免遭到(dào)攻擊！