JSONP初探

web开发中经常会遇到的问题就是跨域,由于浏览器的同源策略,跨域请求会被限制(请求是可以发出去,但是返回的数据拿不到),所以js中有很多解决跨域的方法,其中JSONP是一种比较简单的方式。

浏览器虽然会限制不同域名之前相互请求,但是却允许imgscript等标签的src属性跨域访问。比如

<img src="www.baidu.com/imges/xxx.img">

所以利用这个方法,只要和后端配合一下,可以达到跨域请求数据。方法如下

前端代码:

<html>
<!-- 动态的生成script标签,利用src属性 -->
<script>
var script = document.createElement("script");
script.src = "www.example.com/test.php?callback=sample";
document.body.appendChild(script);

function sample(returnData){
//......
}

</script>
<body></body>
</html>

注script的src,地址最后附带了一个参数 callback=sample,并且有一个具名函数与参数值同名因为script请求的内容会被当做js代码来执行。所以就需要后端在返回数据时做一点处理。

后端代码:

<?php

$callback = $_GET['callback']; // 拿到回调名称
$data = "helloworld";             // 需要返回的数据
echo $callback."('".$data."')";  // 以执行函数的语法形式返回数据

这样前端拿到返回的数据会执行sample函数,参数就是返回的数据,从而达到跨域取得数据。

来自知乎

发表评论

电子邮件地址不会被公开。 必填项已用*标注