JSONP的誕生、原理及應(yīng)用實(shí)例

JSONP的誕生、原理及應(yīng)用實(shí)例問(wèn)題：頁(yè)面中有一個(gè)按鈕，點(diǎn)擊之后會(huì)更新網(wǎng)頁(yè)中的一個(gè)盒子的內(nèi)容。Ajax可以很容易的滿足這種無(wú)須刷新整個(gè)頁(yè)面就可以實(shí)現(xiàn)數(shù)據(jù)變換的需求。但是，Ajax有一個(gè)缺點(diǎn)，就是他不允許跨域請(qǐng)求資源。如果我的代碼在codepen上，我不能將我的數(shù)據(jù)放到codepen網(wǎng)站上，那么我只能放到我自己的服務(wù)器中，這樣的話，就無(wú)法通過(guò)Ajax訪問(wèn)到這個(gè)數(shù)據(jù)了。解決：想要實(shí)現(xiàn)這種跨域資源請(qǐng)求，有很多解決辦法，列舉出一部分：讓服務(wù)器來(lái)加載遠(yuǎn)程數(shù)據(jù)，然后在用戶請(qǐng)求時(shí)提供給瀏覽器。用<script>或是<iframe>標(biāo)簽加載外來(lái)文件。（因?yàn)樗麄兊膕rc屬性允許獲得任何地方的資源。）W3C制定的Cross-OriginResourceSharing(CORS，跨域資源共享)。JSONPJSONP的誕生及原理：jsonp的原理其實(shí)和第二種解決方法一模一樣，只不過(guò)他更加方便，然后這種跨域溝通的手段就被賦予了一個(gè)名字“JSONP”。所以首先要弄懂第二種方式是怎么工作的：原理：如果一個(gè)頁(yè)面加載了一個(gè)外來(lái)的JS文件，瀏覽器就會(huì)自動(dòng)執(zhí)行這個(gè)文件中的代碼。所以假如localhost想要使用jsonhost上面的一個(gè)JSON數(shù)據(jù)，localhost就可以讓jsonhost來(lái)幫他完成這件事情，jsonhost提供給他一個(gè)js文件，往要調(diào)用的函數(shù)中傳入需要的數(shù)據(jù)，結(jié)果是和localhost自己調(diào)用函數(shù)的效果一模一樣了。jsonhost:<scripttype="text/javascript">varjson='["customername1","customername2"]';callbackFunction(json);</script>localhost：復(fù)制代碼<scripttype="text/javascript">varjson='["customername1","customername2"]';callbackFunction(json);</script><scripttype="text/javascript">functioncallbackFunction(result){varhtml='<ul>';for(vari=0;i<result.length;i++){html+='<li>'+result[i]+'</li>';}html+='</ul>';document.getElementById('divCustomers').innerHTML=html;}</script>復(fù)制代碼這樣，localhost就已經(jīng)可以使用jsonhost中的數(shù)據(jù)了。然后localhost說(shuō)，我希望可以在我的用戶點(diǎn)擊一次按扭時(shí)，就執(zhí)行一遍callbackFunction(json)，而不是頁(yè)面加載后執(zhí)行一次。于是他就需要?jiǎng)討B(tài)的創(chuàng)建<script>標(biāo)簽：復(fù)制代碼functioncallbackFunction(result){varhtml='<ul>';for(vari=0;i<result.length;i++){html+='<li>'+result[i]+'</li>';}html+='</ul>';document.getElementById('divCustomers').innerHTML=html;}$(".btn").click(function(){varscript=document.createElement('script');script.setAttribute('src',"http://jsonhost/json.js");document.getElementsByTagName('header')[0].appendChild(script);});復(fù)制代碼這樣完成之后，效果就和用Ajax異步請(qǐng)求一樣了。到這里，故事仿佛就要這樣結(jié)束了，但是突然有一天，另一個(gè)otherhost跑來(lái)和jsonhost說(shuō)，他想要通過(guò)jsoncallbackFunction處理json，jsonhost就很為難，于是他們聚在一起，想要找到一個(gè)辦法，可以不需要全部使用同一個(gè)函數(shù)名，也可以獲取同一個(gè)數(shù)據(jù)。最終他們想到了一個(gè)完美的辦法——jsonhost用的函數(shù)名用一個(gè)變量代替，localhost和otherhost請(qǐng)求數(shù)據(jù)的時(shí)候，傳入這個(gè)變量名，這樣就可以各自決定各自使用的函數(shù)名了。jsonhost:復(fù)制代碼<?phpheader('Content-type:application/json');//告訴接收數(shù)據(jù)的對(duì)象此頁(yè)面輸出的是json數(shù)據(jù)$json='["customername1","customername2"]';echo$_GET['callback']."(".$json.")";?>復(fù)制代碼localhost:復(fù)制代碼<scripttype="text/javascript">functiongetJson(url,funName){varscript=document.createElement('script');script.setAttribute('src',url+funName);document.getElementsByTagName('head')[0].appendChild(script);}functioncallbackFunction(result){varhtml='<ul>';for(vari=0;i<result.length;i++){html+='<li>'+result[i]+'</li>';}html+='</ul>';document.getElementById('divCustomers').innerHTML=html;}$(".btn").click(function(){getJson("http://jsonhost/jsonp.php?jsoncallback=","callbackFunction");});</script>復(fù)制代碼otherhost:復(fù)制代碼<scripttype="text/javascript">functiongetJson(url,funName){varscript=document.createElement('script');script.setA('src',url+funName);document.getElementsByTagName('head')[0].appendChild(script);}functionjsoncallbackFunction(result){console.log(result);}$(".btn").click(function(){getJson("http://jsonhost/jsonp.php?jsoncallback=","jsoncallbackFunction");});</script>復(fù)制代碼這樣一來(lái)，使用什么函數(shù)名都是不同host自己的事情，他們互不干擾，jsonhost也不用操心這件事，專心提供數(shù)據(jù)就可以了。其他host也紛紛前來(lái)獲取json。于是這種模式被廣泛使用，然后這種通信方式就被命名為“JSONP”。如果用jQuery的話，就不用自己命名函數(shù)并傳遞給參數(shù)了，因?yàn)檫@個(gè)函數(shù)名一點(diǎn)也不重要，他只是個(gè)代號(hào)而已，jQuery會(huì)幫我們自動(dòng)生成一個(gè)函數(shù)名，然后將得到的數(shù)據(jù)傳給這個(gè)函數(shù)。jQuery還會(huì)幫我們創(chuàng)建script標(biāo)簽，我們只要關(guān)心如何處理這個(gè)數(shù)據(jù)就好了。復(fù)制代碼<scriptsrc="/libs/jquery/1.8.3/jquery.js"></script><script>$.getJSON("http://jsonhost/jsonp.php?jsoncallback=?",function(data){varhtml='<ul>';for(vari=0;i<data.length;i++){html+='<li>'+data[i]+'</li>';}html+='</ul>';$('#divCustomers').html(html);});</script>復(fù)制代碼jQuery把JSONP封裝到Ajax里面，但本質(zhì)上這兩種技術(shù)是完全不同的。JSONP的原理是，當(dāng)前網(wǎng)頁(yè)動(dòng)態(tài)執(zhí)行異域返回的js代碼，這個(gè)代碼是個(gè)執(zhí)行請(qǐng)求數(shù)據(jù)的函數(shù)。瀏覽器執(zhí)行這個(gè)函數(shù)，效果和當(dāng)前域獲得數(shù)據(jù)執(zhí)行函數(shù)是一樣的。應(yīng)用實(shí)例：知道了原理之后，迫不及待的想要用一下JSONP來(lái)獲取數(shù)據(jù)。這里用PHP來(lái)實(shí)現(xiàn)。首先，需要有個(gè)服務(wù)器，如果沒(méi)有服務(wù)器的話，可以使用wampserver軟件模擬一個(gè)，這個(gè)軟件還會(huì)建立一個(gè)集成環(huán)境，可以運(yùn)行PHP文件。點(diǎn)擊查看wampserver教程有了自己的服務(wù)器和PHP運(yùn)行環(huán)境之后，就可以開始了。想要在codepen上獲取本地?cái)?shù)據(jù)。本機(jī)PHP：復(fù)制代碼<?phpheader('Content-type:application/json');//告訴接收數(shù)據(jù)的對(duì)象此頁(yè)面輸出的是json數(shù)據(jù)$quotes='[{"quote":"Ifyoucan\'tgetridoftheskeletoninyourcloset,you\'dbestteachittodance.","author":"GeorgeBernardShaw"},{"quote":"We\'llalwayshaveParis.","author":"Casablanca"},{"quote":"Amathematicianisadeviceforturningcoffeeintotheorems.","author":"PaulErdos"},{"quote":"Do,ordonot.Thereisno\'try\'.","author":"StarWars:EmpireStrikesBack"},{"quote":"Somecausehappinesswherevertheygo;others,whenevertheygo.","author":"OscarWilde"},{"quote":"Problemsworthyofattackprovetheirworthbyfightingback.","author":"PaulErdos"},{"quote":"Maybethisworldisanotherplanet\'sHell.","author":"AldousHuxley"}]';echo$_GET['callback']."(".$quotes.")";?>復(fù)制代碼codepen上的js：復(fù)制代碼functionupdate(){varindex=Math.floor(Math.random()*11);$.getJSON("http://localhost/quotes.php?callback=?",function(data){varnum=Math.floor(Math.random()*6);$(".wrap").fadeOut(600,function(){$(".quo").html(data[num].quote);$(".auth").html(data[num].author);$("body,.quot