web前端面试题及答案（一份ajax高频面试题拍了拍你）

1、你在工作中有没有遇到需要跨域的情况，如果有请说一下你的解决方案。vue的解决方案是什么？

跨域：协议、端口、域名；浏览器的“同源策略”，服务器端无跨域（关键词：同源策略） 一般跨域会报这样的错误：No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404 解决方案：jsonp方式、cors方式、代理请求方式 jsonp：利用<script>脚本拥有跨域能力,所以jsonp可以解决跨域问题。需要协助后端工程师一起解决 cors：后端/运维工程师解决。 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); // 也可以写上具体的IP地址 res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); }); 代理请求方式：前端ajax请求自己的本地接口，然后本地接口接收到请求后向实际的接口请求数据，然后再将信息返回给前端 vue解决方案：`核心原理，服务器代理`。使用proxyTable的原理就是将域名发送给本地的服务器，再由本地的服务器去请求真正的服务器。在配置文件中添加： proxyTable:{ '/': { target: 'http://www.web.cn/api', //你要访问的服务器域名 changeOrigin: true, //允许跨域 pathRewrite: { '^/': '' //重写规则 只要访问的是/开头的都会自动处理成http://www.web.cn/api } } }

2、(原生)ajax常用的方法有哪些？简单讲一下区别

//注意看注释内容 var xhr = new XMLHttpRequest(); xhr.open("post","validate.php"); //调用open(method, url ,async)设置请求信息 //post提交需设置header头 调用setRequestHeader(header,value)设置HTTP请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("username=" name); //调用send([string])发送 xhr.onreadystatechange = function(){ // 判断服务器是否响应，判断异步对象的响应状态 if(xhr.status == 200 && xhr.readyState == 4){ document.querySelector(".showmsg").innerHTML = xhr.responseText; } }

3、ajax中get请求和post请求的区别有哪些？

1、形式：get请求会将参数跟在URL后面进行参数传递，而post请求则是作为http消息的实体内容发送给web服务器； 2、大小：get提交的数据限制是1024字节，这种显示是来自特定浏览器和服务器对它的限制。 3、安全：在某种情况下，get方式会带来严重的安全问题，而post相对来说可以避免这些问题。

4、http状态码有哪些？分别代表什么意思？（大家在写的时候写一些典型的状态码，如：200，302，403，404，500，502）

这里是方便大家记忆： 2XX系列响应代码表明：操作成功了，表示服务器成功响应了客户端所请求的动作 3XX系列响应代码表明：客户端需要做些额外工作才能得到所需要的资源。它们通常用于GET请求 4XX系列响应代码表明：客户端出现错误，不是认证信息有问题，就是表示格式或HTTP库本身有问题。客户端需要自行改正 5XX系列响应代码表明：服务端错误，意味着服务器处于不能执行客户端请求的状态，此时客户端应稍后重试

5、json和jsonp的区别

JSON是一种数据交换格式，而JSONP是一种非官方跨域数据交互协议，动态创建script标签利用src可跨域的能力解决跨域问题。json是描述信息的格式，jsonp是信息传递双方约定的协议。

其实ajax相关的高频面试题就这样，把这些掌握了，面试没问题～

加油～