Web中jsonp跨域，百度搜索小demo

因为浏览器的同源策略，不同网站之间不能跨域访问，因此产生了跨域问题
补充：同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。
古人有云：上有政策，下有对策，产生了跨域问题，以下是解决跨域的几中方式

1. Flash（不做讨论）

2. 服务器代理中转
   跨域产生的原因是由于浏览器的同源策略，于是就有了服务器代理中转的方式来解决跨域问题。
   A、C不在同一个服务器中，但网站A想要请求服务器C中的数据，由于同源策略，直接访问显然是不现实的，我们可以通过向本地的后台B发送请求，通过本地服务器B向服务器C请求数据，因为同源策略属于浏览器的限制，服务器端没有限制。B请求返回的数据再发送给网站A 如此便可以解决跨域访问的问题.

3. Jsonp
   我在这里详细的解释下Jsonp解决跨域问题。
   首先，我们需要了解的是 用src获取数据时不收同源策略的影响。因此用script标签，引入 js文件时则不受跨域的影响（还有 img，iframe中src都具有跨域的能力。
   因此，通过这个特性，我们把数据放在服务器上，通过script标签的src属性获取数据，但是该属性无法判断是否返回了数据，于是我们做一步回调函数的处理。
   补充：数据类型为json格式，因为js可以很容易的就处理json格式的数据。这也是为什么要叫 jsonp 的原因

实例：

    <script src="./data.txt"></script>
    <script>
        function callback(data){
            console.log(data)  //{name:"xg"}
        }
    </script>

后台代码：

    callback({"name":"xg"})

下面是我仿写的百度联想词的小demo

html代码：

    <div class="wrapper">
        <input type="text">
        <ul>
        </ul>
    </div>

js代码：

  <script>
        var oInput = document.getElementsByTagName("input")[0];
        var oUl = document.getElementsByTagName("ul")[0];
        oInput.oninput = function (){
            var value = this.value;
            var oScript = document.createElement("script");
            oScript.src = "https://www.baidu.com/sugrec?prod=pc&wd="+value+"&cb=doJson" //wd为当前词的值 cb为回调函数的名称
            document.body.appendChild(oScript);
            document.body.removeChild(oScript);
        }
        function doJson(data){
            var datas = data.g;
            var str = "";
            datas.forEach(ele => {
                str +=  "<li><a href='https://www.baidu.com/s?wd=" + ele.q + "'>"+ele.q+"</a></li>"
                console.log(ele.q)
            });
            oUl.innerHTML = str;
            
        }
    </script>

4. document.domain(针对基础域名相同的情况)
   bj.58.com
   tj.58.com

document.domain = '58.com'
document.domain = '58.com'

设置他的domain 即可跨域访问