跨域 JSONP

首先我们先认识一下跨域：端口、协议、主机中的一个不一样都属于跨域。ajax的GET和POST里的地址都不能写跨域的，也就是说ajax不支持跨域。JSONP是通过动态创建script标签的，script的src可以写跨域地址。所以我们可以通过JSONP获得别的网站的数据。

当我们在输入框输入内容时，电脑会向服务器请求数据，这个数据在调试台的Network内会显示出来。

双击这个文件会得到数据

我们可以将这个文件当做是一个调用函数fn(a)的形式，也就是说_ _jsonp21_ _ 是函数名（函数名可以自己改），（）里面的数是变量。在网址的末尾部分，有一个callback键，后面的值跟文件开头是一样的，函数名可以通过改变callback的值来改变。当然，不是每个网站都是用callback当做键，具体要看文件开头与地址进行判断。

原理知道后，现在就可以开始来获取数据了。首先是要创建动态的script标签。

<script>

    input.onkey = function(){   //我们要根据输入的不同内容获得不用的数据

        var script = document.createElement("script");

         script.src = "https://smart.sug.so.com/suggest?            pid=webpage&word="+input.value+"&srcg=&src=hao_home&encodein=utf-8&encodeout=utf-    8&callback=fn&t=1525446027861";  //input.value获取输入内容，fn为了方便写，将函数名改为fn

        document.body.appendChild(script)；

        document.body.removeChild(script);  //每次执行完都需要将便签移除

    }

</script>

当我们输入时，服务器请求了一个数据并执行了函数fn()，但是我们还有没有设置函数fn()，所以我们在onkey之前设置函数fn要执行的代码。

<script>

    function fn(data){    //data就是获得到的数据，类型是字符串。

        console.log(data)    //data是一个对象，你可以对象的办法调用里面的数据。

    }

</script>