JavaScript基础 jsonp

jsonp是一种非正式协议

• 跨域：<img src = 'http://timgsa.baidu.com/time....'>本地和自己的服务器都没有这张图片，所以上面的src是请求到https://timgsa.baidu.com的服务器里加载这图片的
  这就是跨域 合法的src有跨域能力
• jsonp利用script标签的src属性去拿别人服务器上的数据

<script>
    var aInp = document.getElementsByTagName( 'input' )[0];
    var oUl = document.getElementsByTagName( 'ul' )[0];
    aInp.oninput = eFn;
    aInp.onfocus = eFn; //获取焦点时再把搜索请求一次
    function eFn( e ){
        e = e || window.event;
        e.cancelBubble = true;
        var val = this.value;
        var script = document.createElement( 'script' ); //创建一下script标签
        script.src = 'https://www.sogou.com/suggnew/ajajjson?key='+val+'&type=web'; //把scr设置为搜索地址
        document.body.appendChild( script ); //把标签放入文档里
        script.parentNode.removeChild( script );
    }

    var sogou = {       //创建搜索地址的回调函数  回调函数它是 window.sogou.sug 所以我们要创建一下同样函数接收一下obj对象
        sug : function ( obj ) {
            draw( obj )
        }
    }
    //绘制li
    function draw( obj ) {
        var str = '';
        for(var i=0 , length = obj[1].length ; i<length ; i++ ){
            str += '<li>'+obj[1][i]+'</li>';
        }
        oUl.innerHTML = str;
    }
    oUl.onclick = function ( e ) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        var val = target.innerHTML;
        if( /li/i.test( target.nodeName ) ){
            window.open( 'https://www.sogou.com/web?query='+ val ) //搜索到内容后点击li搜索对应内容的链接
            aInp.value = val; //点击联想把内容放到input
        }
    }
    //失去焦点时把Ul清空掉
    aInp.onblur = function (  ) {
        setTimeout( function (  ) { //延迟一下oUl清空   这样点击跳转才不会先触发清空
            oUl.innerHTML = '';
        },200)
    }
    //回车后搜索
    aInp.onkeyup = function ( e ) {
        if( e.keyCode === 13 ){
            var val = this.value;
            window.open( 'https://www.sogou.com/web?query='+ val )
        }
    }
</script>

Animation2.gif