浅析JS中的跨域请求-图解加实例(JSONP篇)

何为跨域

简单来讲就是js与异源页面进行通讯，正常状况不容许js进行跨域通讯的缘由是其同源策略。

JSONP

党咱们使用XHR去得到异源的数据时，就会形成跨域请求。JSONP(JSON Padding)即填充式JSON能够来解决这样的问题。

实现原理：虽然咱们不能直接请求异源上的资源，可是在js中如img，script标签倒是能够获得其余服务器上的资源的，那么咱们就能够经过这样的方式将一段js代码间接地从外部引入。经过script标签向目标源发起一个GET请求，服务器根据请求的参数返回包含js的代码，请看下图：

//本地代码
<script>
    function getData(obj) {
        var data = JSON.parse(obj);
        console.log(data.name);//jiavan
        console.log(data.age);//20
    }
</script>
<script src="http://cv.jiavan.com/test/data.php?callback=getData"></script>

//服务器上的代码
<?php
    $func = $_GET['callback'];
    $data = '{"name": "jiavan", "age": 20}';
    echo $func."(".$data.");";
?>

先在本地定义了一个函数，这是用来处理来自服务器上数据的函数，下面用一个script标签，而且向服务器发起了一个GET请求，而且指定了处理数据的回调函数，即上方的getData，服务器收到请求后返回了getData('{"name": "jiavan", "age": 20}');，即便一段js代码，将数据传入到回调函数中处理，这样便完成了跨域。

总结：JSONP是很常见的处理跨域的方法，可是这种方式 只能是GET类型的请求而且须要服务器配合，这样才能完成跨域，可是它的优势就是实现比较简单而且对低版本浏览器支持都很好。

原文出处 https://github.com/Jiavan/jia... 以为对你有帮助就给个star吧