兩種簡(jiǎn)單的跨域方法(jsonp、php)
Ajax不能跨域,比如您是www.baidu.com,您就不能請(qǐng)求www.163.com的文件。但您可以請(qǐng)求www.baidu.com/1.json、ent.baidu.com/1.json。這是因?yàn)榘踩?,?duì)于任何后臺(tái)語(yǔ)言來(lái)說(shuō)、服務(wù)器程序來(lái)說(shuō),所有的XHR類型的請(qǐng)求,如果來(lái)自其他的服務(wù)器,將不予應(yīng)答。
一、使用jsonp
JSONP是JSON with Padding的略稱。它是一個(gè)非官方的協(xié)議,出處不可考,它允許在服務(wù)器端集成Script tags返回至客戶端,通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)(這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式)。--來(lái)源百度
JSONP就像是JSON+Padding一樣(Padding這里我們理解為調(diào)用函數(shù)時(shí)的填充)。

綠色部分是JSON,外面的fun();是函數(shù)的調(diào)用,是padding補(bǔ)充部分。
jsonp的原理很簡(jiǎn)單,就是把定義寫在了HTML源文件里面,而將調(diào)用放在script標(biāo)簽引用的文件里面,由于script標(biāo)簽可以跨文件使用,這樣就實(shí)現(xiàn)了跨域,引用的文件可以有各種格式php 、js、txt等。
下面舉個(gè)例子:

jsonp.txt里面的內(nèi)容如下:
//調(diào)用函數(shù)
fun({
"result" : [
{
"name" : "小明",
"age" : 12,
"sex" : "男"
},
{
"name" : "小紅",
"age" : 13,
"sex" : "女"
},
{
"name" : "小綠",
"age" : 16,
"sex" : "女"
}
]
});
運(yùn)行結(jié)果:

由于這樣使用起來(lái)不方便,我們可以將它封裝成一個(gè)實(shí)用輪子:

jQuery已經(jīng)有封裝好的API可以直接使用:名稱是ajax()
可以查看jQuery手冊(cè),參考如下

二、使用PHP偷數(shù)據(jù)
幾乎每種后臺(tái)語(yǔ)言都可以實(shí)現(xiàn)該功能,以下是PHP的示例:
<?php
header("Content-Type:text/html;charset=utf-8");
$a = file_get_contents("網(wǎng)址");
print_r($a);
?>
其中,header是設(shè)置返回到瀏覽器中的頭文件的字符集和文件類型

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02
JavaScript中Cookie的使用之如何設(shè)置失效時(shí)間
這篇文章主要介紹了JavaScript中Cookie的使用之如何設(shè)置失效時(shí)間問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2022-12-12
詳解將微信小程序接口Promise化并使用async函數(shù)
這篇文章主要介紹了詳解將微信小程序接口Promise化并使用async函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript實(shí)現(xiàn)自動(dòng)生成帶水印的圖片
這篇文章主要來(lái)和大家一起討論如何利用JavaScript實(shí)現(xiàn)一個(gè)復(fù)雜功能,該功能可以自動(dòng)為圖片添加水印,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01

