利用JSONP解决AJAX跨域问题的原理

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即"同源策略"。而跨域就是通过某些手段来绕过"同源策略"限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

[表格.png]


什么是JSONP？

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，而JSONP(JSON with Padding)则是JSON的一种"使用模式"，通过这种模式可以实现数据的跨域获取。


JSONP跨域的原理

在"同源策略"下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举个例子，假如需要从服务器(http://justflyhigh.com/test.php?id=123)获取的数据如下：
1

{"id":123, "name":"张三", "age":17}

那么，使用JSONP方式请求(http://justflyhigh.com/test.php?id=123&callback=test)的数据将会是如下：
1

test({"id":123, "name":"张三", "age":17});

当然，如果服务端考虑的更加充分，返回的数据可能如下：
1

try{test({"id":123, "name":"张三", "age":17});}catch(e){ }

这时候我们只要定义一个test(data)函数，并创建一个script标签，使其的src属性为"http://justflyhigh.com/test.php?id=123&callback=test"即可调用返回的数据了。
1
2
3
4
5
6
7
8
9

<script type="text/javascript">
    function test(data){
        console.log(data);
    }
    var jsonp = document.createElement('script');
    jsonp.type = 'text/javascript';
    jsonp.src = 'http://justflyhigh.com/demo/test.php?id=123&callback=test';
    document.getElementsByTagName('head')[0].appendChild(jsonp);
</script>

示例运行结果：

[结果.png]