跨域JSONP

A. JSONP原理

1.利用script元素的属性scr引入文件不受同源策略的影响，来作为ajax的传输机制。
2.HTTP请求所得到的响应数据是经过JSON编码的合法的JS代码，响应内容必须用JS函数名和圆括号包裹起来的。（如：aa({"name":"kiwi"})）
3.定义处理跨域获取数据的函数（如：function callback(data){}），来监控<script>的src属性是否完成数据的获取。 
4.用src获取数据的时候添加一个参数?cd(或&cd) 5.服务端会根据参数cb的值返回对应的内容 
（即，callback函数的参数格式的字符串）
复制代码

B. 使用

//动态创建script标签，并添加src属性值。
var oScript = document.createElement('script');
oScript.src = './index.txt?cb=callback';
//callback为查询参数的值(实际，支持JSONP的服务不需要强制指定客户端必须实现的回调函数名称)

//将script标签插入到body里面
document.body.appendChild(oScript);
//清理工作：移除script元素
document.body.removeChild(oScript);

function aa(data){
    console.log(data);
}
function bb(data){
    console.log(data.age);
}
复制代码

index.txt文档内容

aa({"name":"kiwi"});
bb({"age":"27"})
复制代码

最终返回值

//{name:"kiwi"}
//27
复制代码

D. 实战应用--百度搜索联想词

免费接口 JSON API：https://www.bejson.com/knownjson/webInterface/

var oInput = document.getElementsByTagName('input')[0],
    oUl = document.getElementsByTagName('ul')[0];
//当输入发生变化时，数据返回会实时变化。
oInput.oninput = function(){
    var value = this.value;
    //创建<script>标签
    var oScript = document.createElement('script');
    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=callback';
    //这里的wd是回调函数
    document.body.appendChild(oScript);
    document.body.removeChild(oScript);
}
//{q:"value", p:false, s:Array[10]}
//q 是输入的关键字；s 是返回的相关数组
function callback(data){
    var s = data.s,
        str = '';
    if(s.length > 0){
        s.forEach(function(ele,index){
            str += '<li><a href="https://www.baidu.com/s?wd=' + ele +'">' + ele + '</a></li>';
            oUl.innerHTML = str;
            oUl.style.display = 'block';
        })
    }else{
        oUl.style.display = 'none';
    }
}
复制代码