2020前端面试（五）-Ajax篇

点这里，欢迎关注

1.如何实现Ajax请求：

//1.创建一个XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置请求地址和请求方式
xhr.open('get','http://localhost:3000/first');
//3.如果发送的是post请求，还需要设置请求参数的格式
xhr.setRequestHeader("Content-Type","application/json");
//4.设置发送内容并发送该请求
xhr.send(JSON.stringfiy({name:'liu'}));
//5.监听Ajax的请求状态
xhr.onreadystatechange=function(){
    //5.1 判断ajax的请求状态，为4则表明客户端已经拿到并解析出了结果
	if(xhr.readyState=4){
        //5.2 判断响应报文的状态，如果是200,则表明本次请求是成功的
        if(xhr.status==200){
            //6.拿到服务器返回的数据
            var data=xhr.responseText;
        }
    }
}

2.ajax返回的状态:

let xhr=new XMLHttpRequest();
console.log(xhr.readyState);//0 － 未初始化，还未发送请求
xhr.open('get','http://localhost:3000/first');
consple.log(xhr.readyState);//1 － 正在发送请求
xhr.onreadystatechange=function(){
    // 2 － 载入完成/已经接收到全部响应内容
    // 3 － 正在解析响应内容
    // 4 － 解析完成，客户端可以使用数据了
}
xhr.send();

3.如果我想发出两个有顺序的ajax需要怎么做？(原生JS的ajax)

原生js的话可以使用回调函数，在拿到第一个ajax请求后，执行回调函数，并将结果传入该回调函数。然后由

该回调函数执行下一个ajax请求。

除此之外还可以使用promise来封装ajax请求，返回一个promise对象。

4.发送Ajax请求时禁止浏览器的缓存功能：

4种方法：

1. 设置请求头：xhr.setRequestHeader('If-Modified-since','0')

2. 设置请求头：xhr.setRequestHeader('Cache-Control','no-cache')

3. 在请求路径最后添加一个随机数参数，保证每次请求的路径都不同。"fresh="+Math.random()

4. 与方法3类似，添加一个时间参数。currentTime=Date.now()

5.websocket和ajax的区别是什么:

5.1 什么是websocket：

（1）websocket诞生的背景：

HTTP协议是单向的，通信只能由客户端发起，服务器无法主动向客户端发送消息。

（2）在websoket之前服务器推送消息的两种方式：

轮询：

• 浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
• 缺点：浏览器发送请求过于频繁，需要服务器有很快的处理速度和资源。

长连接方式：

• 客户端发起连接后，如果没消息，就一直不返回数据给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
• 缺点：需要一直保持连接，需要有很高的并发。

（3）websoket的概念：

websocket是HTML5提供的一个支持全双工通信的新协议，支持客户端和服务器端的长连接，服务端可以向客户端主动发送信息。

websokit协议的标识符为ws，加密的为wss ws://example.com:80/some/path

（4）webSocket的应用：

聊天室（用户在发出聊天信息后服务器立马将数据推送到所有的用户的聊天室里）

5.2 websocket和ajax的区别是什么：

1.本质不同

Ajax是一种异步请求方式；

WebSocket是HTML5的一种新协议，实现了浏览器与服务器全双工通信。

2.生命周期不同。

websocket建立的是长连接，在一个会话中一直保持连接；而ajax是短连接，数据发送和接受完成后就会断开连接。

3.适用范围不同

websocket一般用于前后端实时数据交互，而ajax前后端非实时数据交互。

4.发起人不同

Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。

5.跨域方面

Ajax请求存在跨域的问题，而websoket支持跨域请求

6.传统的web请求方式,Ajax,axios,fetch,superagent的比较：

传统的web请求方式：

利用表单进行提交，每次提交的时候页面都会被强制刷新一下。

Ajax:

异步网络请求，页面可以无刷新的请求数据。

优点：相比于传统的web请求方式，提升了用户体验

缺点：书写麻烦，暴露了与服务器交互的细节

axios:

axios基于Promise对原生的XHR进行了非常全面的封装，使用方式也非常的优雅。同时支持浏览器和node环境。是网络请求的首选方案。

优点：同时支持浏览器和node环境，可以拦截未执行的请求或响应。

缺点：用起来比较麻烦？？？

fetch:

Fetch 是浏览器自带的用于发送请求的 API，旨在替代 XMLHttpRequest。

使用fetch，你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持，所以你仍然需要一个polyfill。

优点：使用 Promise 避免回调地狱，相比原生的ajax，也比较好写。

缺点：不支持服务器使用

superagent:

superagent是一个http客户端请求代理模块，使用在NodeJS环境中。

优点：有一个插件生态，通过构建插件可以实现更多功能

缺点：api不符合规范