JSONP是一種非常常見的實(shí)現(xiàn)跨域請(qǐng)求的方法。其基本思想是利用瀏覽器中可以跨域請(qǐng)求外鏈的JS文件，利用這一特性實(shí)現(xiàn)數(shù)據(jù)傳輸。

用原生JS實(shí)現(xiàn)JSONP非常簡(jiǎn)單，無(wú)非幾點(diǎn)：

1）定義一個(gè)函數(shù)，用于處理接收到的跨域數(shù)據(jù)。

2）生成一個(gè)dom節(jié)點(diǎn)(script節(jié)點(diǎn))，然后src屬性上面記入發(fā)送的目的URL以及參數(shù)。

3）在跨域服務(wù)器端接收GET請(qǐng)求，返回?cái)?shù)據(jù)（返回之前定義函數(shù)的調(diào)用的字符串）。

4）刪除之前生成的script節(jié)點(diǎn)。

演示如下：

1）首先需要一個(gè)是同源服務(wù)器，一個(gè)跨域訪問(wèn)的服務(wù)器。

最簡(jiǎn)單的方式就是使用apache配置兩個(gè)虛擬主機(jī)。

//瀏覽器器端 <script type="text/javascript">//定義一個(gè)發(fā)送Jsonp請(qǐng)求的函數(shù)function jsonp(obj) {//定義一個(gè)處理Jsonp返回?cái)?shù)據(jù)的回調(diào)函數(shù)window["callback"] = function(object) {obj.success(JSON.parse(object));}var script = document.createElement("script");//組合請(qǐng)求URLscript.src = obj.url "?fn=callback";for(key in obj.data){script.src ="&" key "=" obj.data[key];}//將創(chuàng)建的新節(jié)點(diǎn)添加到BOM樹上document.getElementsByTagName("body")[0].appendChild(script); } </script><script type="text/javascript">//調(diào)用Jsonp函數(shù)發(fā)送jsonp請(qǐng)求jsonp({url:"http://localhost/index.php",data:{name:"小明",},success:function(obj) {alert("性別" obj.sex);}}); </script>

　　

?

//服務(wù)器端 <?php header('Content-Type: application/json; charset=UTF-8');$fn = $_GET["fn"];$name = $_GET["name"]; $result = array(); if($name == "小明"){ $result["sex"] = "男"; } else if($name == "小紅"){ $result["sex"] = "女"; }else { $result["sex"] = "未知"; }echo $fn . "('" . json_encode($result) ."')";

　　

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的原生js实现简单JSONP的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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