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

用原生JS實現(xiàn)JSONP非常簡單，無非幾點：

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

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

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

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

演示如下：

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

最簡單的方式就是使用apache配置兩個虛擬主機。

//瀏覽器器端 <script type="text/javascript">//定義一個發(fā)送Jsonp請求的函數(shù)function jsonp(obj) {//定義一個處理Jsonp返回數(shù)據(jù)的回調(diào)函數(shù)window["callback"] = function(object) {obj.success(JSON.parse(object));}var script = document.createElement("script");//組合請求URLscript.src = obj.url "?fn=callback";for(key in obj.data){script.src ="&" key "=" obj.data[key];}//將創(chuàng)建的新節(jié)點添加到BOM樹上document.getElementsByTagName("body")[0].appendChild(script); } </script><script type="text/javascript">//調(diào)用Jsonp函數(shù)發(fā)送jsonp請求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è)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

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

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