解决跨域问题的几种方法:

1. Flash（不做讨论）
2. 服务器代理中转
3. Jsonp
4. document.domain（针对基础域名相同的情况）
   bj.58.com document.domain = '58.com'
   tj.58.com document.domain = '58.com'

jsonp 原理

jsonp的基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。

jsonp只能进行GET请求。

1. web 页面上用 <script> 引入js文件时则不受是否跨域的影响。（不仅如此，我们还发现凡是拥有 “src” 这个属性的标签都拥有跨域的能力，比如 <script> 、<img>、<iframe>）

2. 于是我们把数据放到服务器上，并且数据为 json 形式。（因为 js 可以轻松处理 json 数据）

3. 因为我们无法监控通过 <script> 的 src 属性是否把数据获取完成，所以我们需要一个处理。

4. 实现定义好处理跨域获取数据的函数，如 function doJSON（data） {}。

5. 用 src 获取数据的时候添加一个参数 cb='doJSON'(服务端会根据参数 cb 的值返回 对应的内容) 此内容为以 cb 对应的值 doJSON 为函数真实要传递的数据为函数的参数的一串字符，如 doJSON('数据')。

<script>
    var $ = {
        ajax: function (param) {
            if (param.dataType == 'jsonp') {
                var isOrigin = true;
                // 判断是否同源 isOrigin = true/false
                var url = param.url;
                if (window.location.host == url.split('/')[2]) {
                    isOrigin = true;
                } else {
                    isOrigin = false;
                }

                // 同源  ---  ajax
                if (isOrigin) {
                    var ajax = new XMLHttpRequest();
                    ajax.open(param.type, param.url);
                    ajax.send(param.data);
                    ajax.onreadystatechange = function () {
                        if (ajax.readyState == 4 && ajax.status == 200) {
                            param.success(ajax.responseText);
                        }
                    }
                } else {
                    // 非同源 == 跨域  动态创建script标签
                    window.fn = param.success;
                    var oScript = document.createElement('script');
                    oScript.setAttribute('type', 'text/javascript');
                    oScript.src = url;
                    document.body.appendChild(oScript);
                }
            }
        }
    };

    var url = 'https://www.baidu.com/sugrec?prod=pc&wd=ssssss&cb=fn';
    var param = {
        type: 'GET',
        url: url,
        data: '',
        dataType: 'jsonp',
        success: function (data) {
            console.log(data.g);
        },
        error: function () {
            console.log('error');
        }
    }
    $.ajax(param);
</script>

jsonp 含义

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

jsonp执行过程：

• 前端定义一个解析函数(如: jsonpCallback = function (res) {})。

• 通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)。

• 后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传递给前端。

• 前端在script标签返回资源的时候就会去执行jsonpCallback并通过回调函数的方式拿到数据了。