前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?

前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?最常用的方式是使用form表单;用户提交表单后,浏览器就开始跳转,服务器接收表单并处理,然后将新的网页返回给浏览器。

欢迎大家来到IT世界,在知识的湖畔探索吧!

前言

在 Ajax 出现之前,网页想要和服务器通信,最常用的方式是使用 form 表单;用户提交表单后,浏览器就开始跳转,服务器接收表单并处理,然后将新的网页返回给浏览器;整个过程用户都只有等待,用户之前的操作状态会丢失,并且服务器返回的新网页常常和之前网页的大部分内容相同,浪费带宽;可见,使用表单来进行网页和服务器的交互,会做很多无谓的工作,浪费资源,用户体验还差。

Ajax 是 Asynchronous JavaScript and XML(异步的 JavaScript 与 XML 技术)的缩写,并不是 JavaScript 的一部分,而是网页与服务器通信的一系列技术的总称。网页使用 Ajax 与服务器通信,可以规避上述 form 表单存在的问题,页面不会刷新,用户不用等待请求的返回,可以继续在我们的网页上“冲浪”。第一个大规模使用 Ajax 的网页应用是 Gmail,Gmail 的出现让大家意识到网页还能这么玩,网页也能做得像桌面应用一样,打破了大家对网页应用的认知,可以说 Ajax 为 web 技术注入了灵魂。

前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?

使用

浏览器为我们提供了 XMLHttpRequest 对象(低版本 IE 使用 ActiveXObject 对象),让我们能够方便地使用 Ajax。下面我们就用 Ajax 来和服务器打声招呼:

var xhr
// 实例化一个 XMLHttpRequest 对象
if (window.XMLHttpRequest) {
 xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6及以下
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 绑定 xhr.readyState 改变时调用的回调
xhr.onreadystatechange = function () {
 if (xhr.readyState === 4) {
 if (xhr.status === 200) {
 console.log(xhr.responseText)
 console.log('请求成功')
 } else {
 console.log('请求错误')
 }
 }
}
// 初始化请求
xhr.open('GET', '/api/hello');
// 设置请求头(可选)
xhr.setRequestHeader('Accept', '*/*')
// 发出请求
xhr.send();

欢迎大家来到IT世界,在知识的湖畔探索吧!

前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?

可见,发送一个最简单的 Ajax 请求,只需几步:实例化一个 XMLHttpRequest 对象,绑定 readyState 改变时调用的回调,最后使用 open、send 方法发出请求即可。

上面的代码涉及到 XMLHttpRequest 对象的常用属性、方法,接下来依次解释它们的作用。

注:为了方便阅读,下面用 xhr 指代 XMLHttpRequest

xhr.onreadystatechange

请求发出后,只要 xhr.readyState 发生变化,就会调用通过 xhr.onreadystatechange 绑定的函数。

xhr.readyState

xhr.readyState 的值代表 xhr 对象所处的状态,可能的状态如下:

前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?

就像上面的示例一样,一般我们在 xhr.onreadystatechange 绑定的函数中判断 xhr.readyState 的值,当值变为4的时候,我们再做进一步处理。

xhr.status

xhr.status 代表服务器响应的 http 状态码,比如上面的示例中,我们认为 xhr.status 等于200的时候,服务器正常返回了我们想要的内容,否则认为请求发生错误。

xhr.responseText

xhr.responseText 的值即为服务器响应的内容。

xhr.open(method, url, async, user, password)

xhr.open方法,用于初始化请求,可以接受5个参数,后三个参数都是可选的,通常我们也很少使用

  • method:要使用的HTTP方法,比如 GET、POST、PUT、DELETE 等
  • url:请求的url
  • async(可选):是否发起异步请求,默认值为 true;注意,新版本的浏览器已经不建议将该值设置为 false 来发起同步请求
  • user(可选):用户名,用于认证
  • password(可选):用户密码,用于认证

xhr.setRequestHeader(header, value)

xhr.setRequestHeader 用于设置 http 请求的 header。需要注意的是,该方法只能在调用 xhr.open 初始化请求后,并且在调用 xhr.send 发出请求之前调用,否则会抛出错误。该方法接收两个参数

  • header: 设置的 header 头的名字
  • value:设置的 header 头的值

xhr.send(content)

xhr.send 方法用于发出请求。注意,如果发出的是同步请求,该方法会阻塞 js 的执行。xhr.send 接收一个参数

  • content:请求发送的内容。如果是 GET 或 HEAD 请求,应当不传这个参数或者传null

XMLHttpRequest Level 2

在 HTML5 之前,虽然各家浏览器都实现了 XMLHttpRequest 接口,但由于没有统一的规范,导致各个浏览器的实现或多或少有些差异。HTML5 将 XMLHttpRequest 纳入了规范,并在原来的基础上做了升级,提出了 XMLHttpRequest Level 2。

XMLHttpRequest Level 2 相较于老版本的 XMLHttpRequest 主要新增了如下内容:

  • 可以设置HTTP请求的超时时间
  • 可以通过 FormData 发送表单数据
  • 可以上传文件
  • 支持跨域请求
  • 可以获取服务器端的二进制数据
  • 可以获得数据传输的进度信息

设置HTTP请求的超时时间

xhr.timeout

和 xhr.setRequestHeader 一样,xhr.timeout的值只能在调用 xhr.open 之后且在 xhr.send 之前设置

欢迎大家来到IT世界,在知识的湖畔探索吧!var xhr = new XMLHttpRequest()
xhr.open('GET', '/api/hello')
xhr.timeout = 2000 // 超时时间,单位是毫秒
xhr.ontimeout = function (e) {
 // XMLHttpRequest 超时,在此做超时的处理
}
xhr.send(null)

发送表单数据

HTML5 新增了一个 FormData 对象,用于模拟表单。我们可以结合 FormData 与 xhr 发送表单数据

var xhr = new XMLHttpRequest()
// 实例化一个 FormData 对象
var formData = new FormData()
// 向 FormData 添加数据
formData.append('username', 'whale')
formData.append('age', '18')
xhr.open('POST', '/api/form')
// 发送表单数据
xhr.send(formData)

上传文件

FormData 除了可以添加字符串数据,也可以添加 blob、file 类型的数据,因此可以用于上传文件。在浏览器中,一般是通过文件上传输入框来获取 file 对象,比如:

欢迎大家来到IT世界,在知识的湖畔探索吧!<input type="file" name='uploadFile' id="upload-file" />

然后监听 input 的 change 事件,获取 file 对象:

document.getElementById('upload-file').addEventListener('change', function () {
 formData.append('uploadFile', this.files[0])
 xhr.send(formData)
})

跨域请求

默认情况下,浏览器出于安全考虑不允许发送跨域请求,但有时候向不同域的服务器发送请求是必要的。为了标准化跨域请求流程,W3C 提出了跨域资源共享(Cross-origin resource sharing,简称 CORS)标准,在 CORS 出现之前,通常是使用 JSONP 来取巧地解决跨域问题,但由于 JSONP 存在各种限制,因此在支持 CORS 的浏览器中(IE10 以下不支持)还是推荐使用 CORS。

要使用 CORS,默认情况下,前端不用修改任何代码,如果浏览器发现 XMLHttpRequest 发出了跨域请求,会帮我们做相应的处理,但服务器需要返回 Access-Control-Allow-Origin 响应头,指定允许进行跨域请求的域。

CORS 请求默认是不发送 Cookie 的,如果想要发送 cookie,服务器需要返回 Access-Control-Allow-Credentials: true,并且前端需要设置 withCredentials 属性:

xhr.withCredentials = true

接收二进制数据

XMLHttpRequest level 1 只能接收文本数据,新版本 XMLHttpRequest 添加了接收二进制数据的能力。要接收二进制数据,一般有两种方式。

一种是使用 overrideMimeType 方法覆写服务器指定的 MIME 类型,从而改变浏览器解析数据的方式。

xhr.overrideMimeType(mimeType)

  • mimeType:要设置的 MIME 类型

比如:

// 告诉浏览器,服务器响应的内容是用户自定义的字符集
xhr.overrideMimeType('text/plain; charset=x-user-defined')

执行上面的代码后,浏览器就会将服务器返回的二进制数据当成文本处理,我们需要做进一步的转换才能拿到真实的数据:

// 获取二进制数据的第 i 位的值
var byte = xhr.responseText.charCodeAt(i) & 0xff

欢迎关注

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/34809.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信