JSONP跨域+百度搜索案例实现

一、使用JSONP的原因

        由于浏览器安全限制，不同的根域名、二级域名、不同端口之间的数据不可以直接跨域，所以用JSONP（JSON with Padding），其是JSON的一种补充使用方式，不是官方协议，而是利用 Script 标签请求资源可以跨域的特点来解决跨域问题，是一种变通的解决方案。

二、JSONP的缺点

1.只支持GET方法请求。

2.它没有关于JSONP调用的错误处理，一旦回调函数调用失败，浏览器会以静默失败的方式处理。

3.安全性。在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

三、百度搜索案例实现

 百度搜索API接口：

https://suggestion.baidu.com/su?cb=callback&wd=%E7%99%BD%E7%BE%8A

1.简单做个布局

    
    
    
    
    


    

        

            
            

                
vue的优缺点
            
        
    

页面效果如下：

 2.引入vue（可以下载vue文件，或者使用http的vue）

3.创建Vue实例，并在页面绑定搜索API数据。

 
{{ item }}

3.在input上用v-model指令来实现表单元素和数据的双向绑定。用watch实现监听输入的关键词keyword发生的改变。

data:{
    keyword:"",
    keywords_list:[]
},
  watch:{
    keyword(value){
        console.log(value);
    }
}

4.请求JSONP，将请求的数据结果给keywords_list。

        1）创建script标签

const script = document.createElement('script')

        2）将关键词传给搜索API，设置script的src属性，并将script标签添加到页面中

keyword(value){
    // 创建script标签
    const script = document.createElement('script')
    if(this.keyword !==""){
        var url = "https://suggestion.baidu.com/su?cb=callback&wd="+this.keyword
        //设置script的src属性
        script.src=url;
    }
    // 将script标签添加到页面中
    document.body.appendChild(script)
}

        3）将请求的数据结果给页面

function callback(res) {
    vm.keywords_list=res.s
}

完整代码：

    
    
    
    
    
    



    

        

            
            

                
{{ item }}