JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输。
用原生JS实现JSONP非常简单,无非几点:
1)定义一个函数,用于处理接收到的跨域数据。
2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数。
3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串)。
4)删除之前生成的script节点。
演示如下:
1)首先需要一个是同源服务器,一个跨域访问的服务器。
最简单的方式就是使用apache配置两个虚拟主机。
//浏览器器端
<script type="text/javascript">//定义一个发送Jsonp请求的函数function jsonp(obj) {//定义一个处理Jsonp返回数据的回调函数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];}//将创建的新节点添加到BOM树上document.getElementsByTagName("body")[0].appendChild(script); }
</script><script type="text/javascript">//调用Jsonp函数发送jsonp请求jsonp({url:"http://localhost/index.php",data:{name:"小明",},success:function(obj) {alert("性别" obj.sex);}});
</script>
//服务器端
<?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) ."')";
更多专业前端知识,请上 【猿2048】www.mk2048.com