2024年前端网络基础-通过XMLHttpRequest实现AJAX(2)，程序员面试题精选100题及答案

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

在浏览器的调试窗口的Network面板中，我们也可以过滤出基于XHR（XMLHttpRequest的缩写）发起的ajax请求

而XMLHttpRequest其实就是用来实现AJAX的。

我们知道AJAX的作用是发起异步的HTTP请求，而一个HTTP请求包含：

请求URL，请求行（请求方法，资源标识，HTTP版本），请求头，空行，请求体

其中红色部分是必须要开发者指定的，其余部分都可以间接获取到。

所以XMLHttpRequest想要实现AJAX，则必须：

1、至少要有指定HTTP请求URL，HTTP请求方法，HTTP请求头，HTTP请求体的入口

2、实现异步

xhr对象

XMLHttpRequest实现AJAX的所有操作都是基于其实例对象的。

var xhr = new XMLHttpRequest()

如何通过xhr设置HTTP请求

---

xhr.open方法

gai该方法支持传入五个参数，依次是 method，url， async, user, password，较为常用是前三个参数

第一个参数method，就是HTTP请求方法，如GET，POST

第二个参数url，就是HTTP请求URL

第三个参数async，就是指是否异步发送，默认为true，即异步发送，设为false的话，则表示同步发送

最后两个参数user,password，用于身份认证。

xhr.open(‘post’, ‘http://127.0.0.1/api/reguser’, true)

xhr.setRequestHeader方法

该方法用于设置HTTP请求头，有两个参数，第一个参数是请求头字段名，第二个是请求头字段值。

xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencode’)

xhr.send方法

该方法用于设置HTTP请求体，只有一个参数，接收的数据作为HTTP请求体。数据必须是字符串类型的，如果不是字符串类型，则会被强转成字符串类型。

另外字符串数据也有格式要求，需要和请求头的Content-Type指定的类型匹配，如

Content-Type	说明	字符串数据样例
application/x-www-form-urlencode	查询字符串格式	"key1=value1&key2=value2"
application/json	JSON字符串格式	"{'key1':value1, 'key2':value2}"
text/plain	纯文本字符串格式	"123"

另外，需要注意的是，GET请求一般不需要设置HTTP请求体，因为GET请求参数都加载URL中，而POST请求需要设置HTTP请求体。

xhr.send(‘username=张三&password=123123&repassword=123123’)

小结

通过xhr.open，xhr.setRequestHeader，xhr.send已经完成了一个HTTP请求的设置：请求URL，请求方法，请求头，请求体，并且可以指定HTTP请求是同步发起，还是异步发起。

如果是同步发起HTTP请求，则接收HTTP响应时直接使用同步代码接收即可，但是过程中，会造成网页阻塞，用户体验不好。

如果时异步发起HTTP请求，则无法使用同步代码接收异步的HTTP响应，此时XMLHttpRequest提供了基于事件回调的方式来接收异步HTTP响应。

如何通过xhr监听异步的HTTP响应

---

xhr.readyState属性和xhr.onreadystatechange事件处理程序属性

xhr对象本身有一个属性readyState，有五个值，分别对应xhr对象得五种状态：

0：xhr对象刚被创建，但是还没有open初始化

1：xhr已经被open初始化，但是还没有send

2：xhr已经send，但是还没有收到响应体

3：xhr已经收到部分响应体数据

4：xhr已经收到全部响应体数据

xhr.readyState属性值会随着xhr对象状态得变化而自动改变。

所以只要监听xhr.readyState的变化，就能准确知道xhr对象什么时候完全接收到响应数据。

xhr对象本身存在一个onreadystatechange事件处理程序属性，浏览器会监听xhr对象的readystate值的变化，并会触发对应xhr对象的onreadystatechange事件处理程序。而我们一般只关注xhr.readystate === 4时，即获取到完整的HTTP响应结果时的事件触发。

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

// …

}

}

小结

现在已经可以接收到异步的HTTP响应了。

我们知道一个HTTP响应包含：

响应行（HTTP版本，状态码，状态码描述）、响应头、空行、响应体

而我们一般只关注红色部分标记的，所以XMLHttpRequest只会提供红色部分的HTTP响应，而这些响应数据都被挂载为了xhr对象的属性和方法。

如何通过xhr获取HTTP响应状态码和响应头

---

xhr.status属性和xhr.statusText属性

xhr.status属性对应HTTP响应报文的状态码，xhr.statusText对应响应报文的状态码描述。

我们一般只关注成功的响应，即状态码2xx的响应，这些状态码表示HTTP请求被服务器成功处理并返回结果，

另外304表示HTTP请求的资源已被浏览器缓存，并且服务器确认该资源没有变动，所以HTTP请求的资源可以直接使用浏览器缓存中的资源。也可以被视为成功的响应。

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){

// …

}

}

}

xhr.getRespnseHeader方法和xhr.getAllResponseHeaders方法

xhr.getRespnseHeader用于获取指定HTTP响应报文头字段的值

xhr.getAllResponseHeaders用于获取所有HTTP响应报文头

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){

console.log(xhr.getResonseHeader(‘Content-Type’))

console.log(xhr.getAllResponseHeader())

// …

}

}

}

小结

通过xhr.status,xhr.statusText，以及xhr.getResponseHeader，xhr.getAllResponseHeaders已经可以获取到HTTP响应的状态码及描述，以及响应头信息，还有响应体没有说明如何获取。

在考虑获取响应体之前，我们需要思考下，HTTP响应体的数据格式有哪些？

比如JSON格式，比如XML格式，HTML格式，二进制格式，字节流格式。虽然它们在HTTP响应体中都以文本字符串的形式存在，但是我们在处理时，无法直接基于字符串获取数据，只有转成对应的类型才能有效处理。

如何通过xhr获取HTTP响应体

---

xhr.response属性、xhr.responseText属性、xhr.responseXML属性

xhr.response、xhr.responseText、xhr.responseXML都对应于HTTP响应报文中的响应体。

xhr.response用于接收HTTP响应体，但是数据类型不定（可能是JSON类型，HTML对应的DOM元素类型，二进制数据ArrayBuffer类型等…）

xhr.responseText 存放文本格式HTTP响应体,或者没有值

xhr.responseXML 存放XML或HTML格式的响应体，或者为null

而上述三个属性是否有值，值得数据类型是什么取决于三点：

1、HTTP响应成功状态码

2、HTTP响应报文的响应头字段Content-Type 或 设置的xhr.overrideMimeType

3、设置的xhr.responseType值

xhr.overrideMimeType方法

该方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。此方法必须在send方法之前调用方为有效。

如果服务器没有指定一个`[Content-Type]( )` 头, XMLHttpRequest 默认MIME类型为"text/xml". 如果接受的数据不是有效的XML，将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。

xhr.overrideMimeType(‘application/json’);

xhr.responseType属性

该属性是一个枚举字符串值，用于指定xhr.response的数据类型。可读可写。

如果将 responseType 的值设置为空字符串，则会使用 text 作为默认值。

需要注意得是xhr.responseType必须在xhr.readyState状态为0，1，2时设置，不能在3,4时设置，即不能等到已经获取了部分HTTP响应体之后再设置。

xhr.responseType枚举值	含义
""	空的 responseType 字符串与默认类型 "text" 相同。
"arraybuffer"	response 是一个包含二进制数据的 JavaScript ArrayBuffer。
"blob"	response 是一个包含二进制数据的 Blob 对象。
"document"	response 是一个 HTML Document 或 XML XMLDocument，根据接收到的数据的 MIME 类型而定
"json"	response 是通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象。
"text"	response 是 DOMString 对象中的文本

xhr.responseType = ‘json’

验证xhr.response和xhr.responseType，以及HTTP响应头中Content-Type之间关系

当 xhr.responseType = ‘’ || ‘text’   并且  HTTP响应报文头中Content-Type: text/html

则 xhr.response中值为文本字符串，xhr.responseText中有值，且和xhr.response相同，xhr.responseXML为null

当xhr.responseType = ‘document’ 且 HTTP响应报文头中Content-Type:text/html

则xhr.response为DOM元素，xhr.responseText取值报错，xhr.responseXML有值，且和xhr.response值相同

当 xhr.responseType = ‘json’   并且  HTTP响应报文头中Content-Type: application/json

则 xhr.response中值为Object对象，xhr.responseText，xhr.responseXML取值报错

小结

前提条件：HTTP响应成功

xhr.responseText 只有在xhr.responseType设置为’'或’text’时有值

xhr.responseXML只有在xhr.responseType设置为’document’时有值

而只要 xhr.responseType 和 HTTP响应头中Content-Type字段的值匹配，则xhr.response一定有值。

使用XMLHttpRequest发起AJAX请求

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

发起GET请求

---

var xhr = new XMLHttpRequest()

xhr.open(‘get’, ‘http://127.0.0.1/my/article/list?pagenum=1&pagesize=5’)

xhr.send()

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {

console.log(xhr.response)

}

}

}

上面是一个最基本的xhr实现AJAX GET的过程。它有如下特点和注意事项：

1、GET请求的参数通常放在请求URL中，且需要按照请求字符串的格式。

如果GET请求将请求参数放在请求体中，则可能会被浏览器直接丢弃，或者可能服务器不考虑接收。

如果GET请求参数在URL中不按照请求字符串格式，即key1=valule1&key2=value2格式，则浏览器和服务器都无法正常解析

2、由于GET请求参数都放在请求URL中，所以没有请求体，也就不需要设置请求头中的Content-Type，注意请求头中的Content-Type设置的是请求体的数据格式

发起POST请求

---

var xhr = new XMLHttpRequest()

xhr.open(‘post’, ‘http://127.0.0.1/my/article/updatecate’)

//xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

//xhr.send(‘id=1&name=时尚&alias=SHISHANG2’)

xhr.setRequestHeader(‘content-type’, ‘application/json’)

xhr.send(JSON.stringify({

id:1,

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

0.0.1/my/article/updatecate’)

//xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)

//xhr.send(‘id=1&name=时尚&alias=SHISHANG2’)

xhr.setRequestHeader(‘content-type’, ‘application/json’)

xhr.send(JSON.stringify({

id:1,

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-jJMXkHXf-1715629366904)]

[外链图片转存中…(img-bwPxAf2F-1715629366904)]