Jsonp 介绍

我们在网站开发的时候，经常会出现在 www.aa.com 域名下面请求 www.bb.com 的数据。
在 javascript 中，有一个很重要的安全性限制，同源策略 ，只能访问当前源下的内容。

源：指，域名，协议，端口相同

同源策略，它是由 Netscape 提出的一个著名的安全策略。现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个 tab 页中分别打开来百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个源的，即检查是否同源，只有和百度同源的脚本才会被执行

然而我们有很多的开发需求，需要访问其他源的内容，这是就会出现跨域的情况，下面我们介绍一种解决方案 jsonp

我们在 html 里面中经常会用到 script 标签加载文件信息，这里没有限制，可以加载任意域名下的内容。
可以利用这个特性实现获取其他源下内容信息

JSONP 的缺点则是：
它只支持 GET 请求，不支持 POST 等其它类型的 HTTP 请求
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题

我们举例来实现

index.html 文件
说明: 此文件在 www.aa.com 服务器上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jsonp</title>
    <script type="text/javascript">

    function search()
    {
        var val = document.getElementsByName('search')[0].value;
        var url = 'http://www.bb.com/index.php?callback=show&val=' + val;

        var el = document.createElement('script');
        el.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(el);
    }

    function show(res)
    {
        var str = 'name:' + res.name + ';age:' + res.age;
        document.getElementById('app').innerHTML = str;
    }
    </script>
</head>
<body>
    <input type="text" name="search">
    <input type="button" name="" value="search" onclick="search()"> 

    <div id="app"></div>
</body>
</html>

index.php
注：此文件在 www.bb.com 服务器上面

<?php

$data = [
    'name' => 'flyerboy',
    'age' => $_GET['val']
];

echo $_GET['callback'] . '(' . json_encode($data) . ')';

在 lamp 环境下，可以用虚拟主机来搭建实验环境，运行 www.aa.com 下的 index.html 查看效果，
可以读取到 www.bb.com 服务器上的内容

注： callback 参数的处理，我们在 js 文件中是一个可执行的函数，在服务器上面返回的时候，拼装成一个能在 js 端形式，返回到客户端，在客户端就会执行 callback 参数所传递的函数，解析服务器返回的内容信息。

©版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 & 作者信息。

End