ES6、Ajax | 前端面试题总结篇
“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情
Part1、ES6
一、mouseover和mouseenter
-
不论鼠标指针穿过被选元素或其子元素,都会触发mouseover事件,对应mouseout
-
只有在鼠标指针穿过被选元素时,才会触发mouseenter事件,对应mouseleave
二、call和apply的区别
call,apply 都属于 Function.prototype 的一个方法,它是 JavaScript 引擎内在实现的,因为属于 Function.prototype,所以每个 Function 对象实例(就是每个方法)都有 call,apply 属性
通过 call 和 apply 可以重新定义函数的执行环境,即 this 的指向
foo.call(this, arg1, arg2, arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
三、session和cooike区别
-
session 保存在服务器,客户端不知道其中的信息;
-
cookie 保存在客户端,服务器能够知道其中的信息。
-
session 中保存的是对象,cookie 中保存的是字符串。
-
session 不能区分路径,同一个用户在访问一个网站期间,所有的 session 在任何一个地方都可以访问到。
-
而 cookie 中如果设置了路径参数,那么同一个网站中不同路径下的 cookie 互相是访问不到的。
四、截取字符串
例子: 截取 abcdefg 的 efg
alert('abcdefg'.slice(4));
五、将列表结点转化成数组
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // 现在 NodeList 是一个数组
var arrayElements = Array.from(elements); // 这是另一种转换 NodeList 到 Array 的方法
Part2、Ajax
一、什么是Ajax
快速创建动态网页的技术。可以实现动态不刷新(局部刷新),就是在不更新页面的前提下维护数据。
二、跨域解决方法
1. 动态创建一个script标签
利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤:
- 去创建一个script标签
- script的src属性设置接口地址
- 接口参数,必须要带一个自定义函数名,要不然后台无法返回数据
- 通过定义函数名去接收后台返回数据
//去创建一个script标签
var script = document.createElement("script");
//script的src属性设置接口地址并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据function jsonpCallback(data)f
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
2. CORS:跨域资源共享
服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持HTML5,可以支持POST, PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin:
//允许所有域名访问,或者
Access-Control-Allow-Origin: http://a.com
//只允许所有域名访问