JSONP:JSON With Padding

要點(diǎn)：

1.script標(biāo)簽

2.用script標(biāo)簽加載資源是沒有跨域問題的

概要：

在資源加載進(jìn)來之前先定義一個(gè)函數(shù)，這個(gè)函數(shù)接受一個(gè)參數(shù)(數(shù)據(jù))，函數(shù)里面利用這個(gè)參數(shù)做一些事情。

然后在需要的時(shí)候通過script標(biāo)簽加載對應(yīng)遠(yuǎn)程文件資源，當(dāng)遠(yuǎn)程的文件資源被加載進(jìn)來的時(shí)候，就會(huì)執(zhí)行我們前面定義好的函數(shù)，并且把我們想拿到的數(shù)據(jù)當(dāng)做這個(gè)函數(shù)的參數(shù)傳入進(jìn)去。

小例子：

function fn(data){

alert(data);

}

/*

* 1.txt中的內(nèi)容：fn([1,2,3]);

* 也就是執(zhí)行了上面定義的fn函數(shù)

* script的src屬性可以加載任何類型的文件，但文件里存放的必須是js語句

*/

程序運(yùn)行結(jié)果：

當(dāng)然這只是最基本的理解，對于JSONP的運(yùn)用還有很多特定的規(guī)則

下面再通過兩個(gè)例子說明：

首先我在自己的個(gè)人服務(wù)器上放置一個(gè)txt文件，以便跨域讀取用：

注意里面的test函數(shù)，是運(yùn)用JSONP的核心。

function test(data) {

var html = "";

for(var i = 0; i < data.s.length; i++) {

html += '

' + data.s[i] + '';

document.getElementById("god").innerHTML = html;

}

}

function cli() {

var oScript = document.createElement("script");

oScript.src = "ftp://linhuo:*********@hk3035.hndan.com/web/test/1.txt";

document.body.appendChild(oScript);

}

JSONP

我們再來看百度的實(shí)時(shí)推薦效果：

這也是利用了跨域加載技術(shù)，實(shí)現(xiàn)起來也不難：

function test(data) {

var oUl = document.getElementById("list");

var html = "";

if(data.s.length) {

oUl.style.display = "block";

for(var i = 0; i < data.s.length; i++) {

html += '

' + data.s[i] + '';

}

oUl.innerHTML = html;

} else {

oUl.style.display = "none";

}

}

window.onload = function() {

var in_put = document.getElementById("in");

var oUl = document.getElementById("list");

in_put.onkeyup = function() {

if(this.value != "") {

var oScript = document.createElement("script");

oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=test";

document.body.appendChild(oScript);

}else{

oUl.style.display = "none";

}

}

}

總結(jié)

以上是編程之家為你收集整理的用JSONP解決ajax跨域問題全部內(nèi)容，希望文章能夠幫你解決用JSONP解決ajax跨域問題所遇到的程序開發(fā)問題。

如果覺得編程之家網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將編程之家網(wǎng)站推薦給程序員好友。

本圖文內(nèi)容來源于網(wǎng)友網(wǎng)絡(luò)收集整理提供，作為學(xué)習(xí)參考使用，版權(quán)屬于原作者。

總結(jié)

以上是生活随笔為你收集整理的jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。