跨域之JSONP

jsonp是利用script具备的跨域特性，动态生成script标签，将src属性指向目标域;目标域的处理则是将资源作为参数传递给回调函数，并输出该回调函数（回调函数名一般做参数化传递到后台），新生成的script将后台输出的内容下载后执行，请求完成；下面以百度搜索为例：

html

<div class="header">
    <span>百度一下</span>
     <input id="searchBox" type="text" placeholder="关键词" />
</div>
<dl id="listview">            
</dl>

 

js

              
 　　　　　　　　 var search = document.querySelector('#search'),
                    searchBox = document.querySelector('#searchBox'),
                    list = document.querySelector('#listview');
                
                
                //定义jsonp的回调函数
                function callback(d){
                    
                    var html = '';
                    
                    if(d.s.length){
                        
                        list.style.display = 'block';
                        
                        for (var i = 0, len = d.s.length; i < len; i++) {
                        
                            html += '<li><a href="http://www.baidu.com/s?wd'+d.s[i]+'">'+ d.s[i] +'</li>';
                            
                            list.innerHTML = html;
                        }
                    }
                }
            
                
                searchBox.addEventListener('input',function(e){
                    
                    if(this.value !== ''){
                    
                        handler(e,'c1');
                    
                    }else{
                    
                        list.style.display = 'none';
                    
                    }
                })
                
                
                
                function handler(e,cb){
                    
                    var ele = e.target || e.srcElement;
                    
                    if(ele.value !== ''){
                    
                        var script = document.createElement('script');
                        
                        var html = '';
                        //根据百度搜索的接口分析，wd为搜索关键字，cb为回调函数名
                        script.src = 'http://suggestion.baidu.com/su?wd='+ ele.value + '&cb='+ cb;
                        
                        document.body.appendChild(script);
                    }
                }

 

over