</script>

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200409190432936.jpg)  

**根据测试的结果我们可以得出，ajax自身并不能跨域**



### []( )如果需要用到ajax跨域，我们可以借助jsonp的方法



**jsonp原理：**  

利用了script标签和img标签的特性 ，同源策略是浏览器这边的，限制不了这两个标签。



### []( )准备一个前端页面

// 引入网络路径，通过跨域访问到地址

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



// 引入网络路径，通过跨域访问到图片

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586441063897&di=77229595c6d8a194a925dd78f91bce7a&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg" alt="" style="width: 420px; height: 595px;">



// 引入本地路径，通过跨域访问到地址

<script src="http://localhost:4000/getAjax"></script>



<script>

    console.log(Vue);

    console.log(a)

</script>

### []( )准备一个后端服务器



**服务器还是上方准备的两个服务器**



**注意点：**  

服务端没有返回任何东西的话 也、会报错

router.get(“/getAjax”,ctx=>{

console.log("running......");

ctx.body = "var a = 20";

});

**浏览器反馈**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200409192526301.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70#pic_center)  

访问成功



**但是注意** 通常后端给我们返回的数据都是一些比较复杂的，不会使我们做测试的  

var a = 20这种简单的数据，所以我们需要稍微优化一下代码。



[]( )优化代码：

===============================================================

<button>点我获取跨域资源</button>

<script>

    let btn = document.querySelector("button");

	btn.onclick = function(){

		let port = 4000;

        let o = document.createElement("script");

        // o.src = `http://localhost:${port}/getAjax?cb=cbfn`;

        o.src = "http://localhost:4000/getAjax?cb=cbfn";

        document.querySelector("head").appendChild(o);

        // console.log(a);//同步的问题直接加载过了，所以会报错，找不到

        o.onload = function(){

            console.log(a);

        }

     }

</script>

**注意：** 虽然小功能都可以使用了，但是解决方式还是存在一些问题。所以不是很推荐这种方式！！！



**继续优化**



**前端页面处理**

<button>点我获取跨域资源</button>

<script>

    let btn = document.querySelector("button");



	// 传递一个函数去后端，然后后端将携带参数的函数返回

    function cbfn(res){

        console.log(res)

    };

    

	btn.onclick = function(){

		let port = 4000;// 这里需要前后端协调处理

        let o = document.createElement("script");

        /*

            属性名叫做cb还是callback需要和后端协商

            cb把cbfn()这个函数体返回给了后端

        */ 

        o.src = `http://localhost:${port}/getAjax?cb=cbfn`;

        document.querySelector("head").appendChild(o);

        

        o.onload = function(){

            console.log(a);

        }

    }

</script>

**后端服务器处理**

router.get(“/getAjax”,ctx=>{

// console.log("running......");

// ctx.body = "var a = 20";



let obj = {

    name:"小李",

    age:20

}



// 这里的cb 是前后端人员共同拟定的名字

let cb = ctx.query.cb;

console.log(cb);



// 将参数传递回前端

ctx.body = `${cb}(${JSON.stringify(obj)})`;

});

[]( )封装jsonp文件

===================================================================



上一篇博客为专门封装jsonp的博客，请移步查看



### []( )ajax实现jsonp文件



**注意：**



1.  后端服务器不变

2.  前端页面引入jsonp.js文件

<button>点击请求jsonp</button>

<script src="jsonp.js"></script>

<script>



    let btn = document.querySelector("button");



    btn.onclick = function(){

        

        ajax({

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?