跨域--jsonp

jsonp跨域请求

---

一、JSONP

jsonp 
	请求方式：get
	跨域:可以
	使用条件：1.跨域  2.有一个参数是回调！
		例如：http://suggestion.baidu.com/su?cb=callback&wd=123
	使用：
		1.创建一个script标签  var os=document.createElement("script")
		2.给script一个src    os.src="url";
		3.把script标签插入到页面   document.body.appendChild(os)
		4.在回调函数里面处理数据   
ajax  
	请求方式：get post 
	跨域：不能

使用jsonp条件：

1.跨域 
2.有一个参数需要是回调函数，大部分情况下叫cb |callback

ajax 不能跨域 get post
jsonp 可以跨域 get

使用jsonp方法：

1.创建一个script标签
	var os=document.createElement("script")
2.给他src
	os.src="url"
3.插入到页面
	document.body.appendChild(os)
4.回调函数中处理数据
	

使用：jsonp+watch 百度 翻译

例1.百度

	<style>
        .select {
            background: #333333;
            color: #ffffff;
        }
    </style>
    <div id="app">
        <input type="text" v-model="kw" @keydown.down="down" @keydown.up.prevent="up" @keydown.enter="enter">
        <ul>
            <li v-for="(item,index) in arr" :key="item" v-if="4>index" :class="[index==n?'select':'']">{{item}}</li>
        </ul>
    </div>
    <script>
        //  http://suggestion.baidu.com/su?cb=callback&wd=123
        var vm = new Vue({
            el: "#app",
            data: {
                kw: "",//关键字
                arr: [],
                n: -1
            },
            methods: {
                //下键
                down() {
                    this.n++
                    if (this.n >= 4) {
                        this.n = -1
                    }
                },
                //上键
                up() {
                    this.n--;
                    if (this.n <= -1) {
                        this.n = 4
                    }
                },
                //回车
                enter() {
                    if (this.n >= 0 && this.n <= 9) {
                        window.open("https://www.baidu.com/s?wd=" + this.arr[this.n])
                    } else {
                        window.open("https://www.baidu.com/s?wd=" + this.kw)
                    }
                }
            },
            watch: {
                kw() {
                    if (this.kw != "") {
                        var os = document.createElement("script")
                        os.src = "http://suggestion.baidu.com/su?cb=aaa&wd=" + this.kw
                        document.body.appendChild(os)
                    }else{
                        this.arr=[]
                    }
                }
            }
        })
        function aaa(d) {
            vm.arr = d.s
        }
    </script>

例2：翻译

<div id="app">
        <textarea  cols="30" rows="10" v-model="kw"></textarea>
        <div>翻译结果：{{msg}}</div>
    </div>
    <script>
       var vm= new Vue({
            el:"#app",
            data:{
                kw:"",//要翻译的内容
                msg:""
            },
            watch:{
                kw(){
                    if(this.kw==""){
                        this.msg=""
                        return;
                    }
                    var os=document.createElement("script")
                    os.src="https://api.asilu.com/fanyi?callback=cb&q="+this.kw+"&type=&_1501665233671"
                    document.body.appendChild(os)
                }
            }
        })
        function cb(d){
            vm.msg=d.data
        }
    </script>