<a href="#001">1.JSONP</a>
<a href="#001">2.JQuery发送AJAX、JSONP请求</a>
</br>
<h3 id="001">1.JSONP</h3>
JSONP利用JavaScript的动态性做到不考虑同源策略发送请求。
JSONP一般使用动态创建script标签将其src指向到要发请求的资源地址并附带参数为回调函数的名称的方式,在请求完成后服务端返回以函数名(数据)
;的方式进行回调函数达到请求成功的目的。
data.php:
<?php
$cbName = $_GET['cb'];//获得回调函数名称
//拼接回调函数
echo $cbName.'({"p1":"对象参数"},"参数2")';
?>
JSONP方式请求data.php
<script type="text/javascript">
//定义回调函数 标识符为 callbackFun
function callbackFun(p1,p2){
console.log(p1,p2);
}
//创建script
var script = document.createElement('script');
//src指向要请求的资源地址,一定要附带事先定义好的回调函数的标识符
script.src = 'http://127.0.0.1:53880/cross/data.php?cb=callbackFun';
//将标签添加进DOM文档,此时才会正式发送请求
document.head.appendChild(script);
</script>
当请求成功时,返回的数据等同于
<script type="text/javascript">
callbackFun({"p1":"对象参数"},"参数2"); //回调了该函数
</script>
</br>
</br>
<h3 id="002">2.JQuery发送AJAX、JSONP请求</h3>
JQuery把发送异步请求封装的很好,很方便使用。
其中有
$.ajax(url,[settings])
load(url,[data],[callback])
$.get(url,[data],[fn],[type])
$.getJSON(url,[data],[fn])
$.getScript(url,[callback])
$.post(url,[data],[fn],[type])```
只需```$.ajax(url,[settings])```函数就可以发送异步AJAX或者JSONP。
发送AJAX请求:
```html
$.ajax({
type:'get', //请求方式
url:'http://127.0.0.1/configs/ajaxs', //请求资源
data:"name=林&age=119", //参数
dataType:'json', //请求类型 xml json text html script jsonp
success:function(data){ //请求成功回调
console.log(data);
},
error:function(data){ //请求失败回调
console.dir(data);
}
});
发送JSONP请求:
$.ajax({
url : 'http://127.0.0.1:53880/cross/data.php', //请求资源地址
data : "name=林&age=119", //参数
jsonp:'cb',//回调函数标识符参数键
jsonpCallback:'haha', //回调函数最后会在success中回调结果,不用设置该参数会有默认的
dataType:'jsonp', //jsonp方式请求
success:function(data){ //回调函数
console.dir(data);
}
});
</br>
</br>
</br>
</br>
</br>