ajax put请求_前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?
前言
在 Ajax 出现之前,网页想要和服务器通信,最常用的方式是使用 form 表单;用户提交表单后,浏览器就开始跳转,服务器接收表单并处理,然后将新的网页返回给浏览器;整个过程用户都只有等待,用户之前的操作状态会丢失,并且服务器返回的新网页常常和之前网页的大部分内容相同,浪费带宽;可见,使用表单来进行网页和服务器的交互,会做很多无谓的工作,浪费资源,用户体验还差。
Ajax 是 Asynchronous JavaScript and XML(异步的 JavaScript 与 XML 技术)的缩写,并不是 JavaScript 的一部分,而是网页与服务器通信的一系列技术的总称。网页使用 Ajax 与服务器通信,可以规避上述 form 表单存在的问题,页面不会刷新,用户不用等待请求的返回,可以继续在我们的网页上“冲浪”。第一个大规模使用 Ajax 的网页应用是 Gmail,Gmail 的出现让大家意识到网页还能这么玩,网页也能做得像桌面应用一样,打破了大家对网页应用的认知,可以说 Ajax 为 web 技术注入了灵魂。
使用
浏览器为我们提供了 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();
可见,发送一个最简单的 Ajax 请求,只需几步:实例化一个 XMLHttpRequest 对象,绑定 readyState 改变时调用的回调,最后使用 open、send 方法发出请求即可。
上面的代码涉及到 XMLHttpRequest 对象的常用属性、方法,接下来依次解释它们的作用。
注:为了方便阅读,下面用 xhr 指代 XMLHttpRequest
xhr.onreadystatechange
请求发出后,只要 xhr.readyState 发生变化,就会调用通过 xhr.onreadystatechange 绑定的函数。
xhr.readyState
xhr.readyState 的值代表 xhr 对象所处的状态,可能的状态如下:
就像上面的示例一样,一般我们在 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 之前设置
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 对象,比如:
然后监听 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
欢迎关注
ajax put请求_前端基础面试:手写一个ajax,说说XMLHttpRequest 都有哪些属性?相关推荐
- jquery手写轮播图_用jQuery如何手写一个简单的轮播图?(附代码)
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图 先上个效果截图: 主要 ...
- 小白前端之路:手写一个简单的vue-router这几年,好像过的好快,怀念我的大学生活。 - 连某人 大三实习生,之前写过简单MVVM框架、简单的vuex、但是看了vue-router的源码(看了
这几年,好像过的好快,怀念我的大学生活. 连某人 大三实习生,之前写过简单MVVM框架.简单的vuex.但是看了vue-router的源码(看了大概)之后就没有写,趁着周末不用工作(大三趁着不开学出来 ...
- 一个connection对象可以创建一个或一个以上的statement对象_从 0 开始手写一个 Mybatis 框架,三步搞定...
来自:开源中国,作者:我叫刘半仙 链接:https://my.oschina.net/liughDevelop/blog/1631006 MyBatis框架的核心功能其实不难,无非就是动态代理和jdb ...
- 2019前端基础面试秘籍
一.html和css部分 1.如何理解CSS的盒子模型? 标准盒子模型:宽度=内容的宽度(content)+ border + padding低版本IE盒子模型:宽度=内容宽度(content+bor ...
- 2019前端基础面试秘籍(更新于5.13)
77777777777777777777777777777777777777777777777777777777777777777777777777 一.html和css部分 1.如何理解CSS的盒子 ...
- 前端面试手写题汇总大全(含答案)-- 持续更新
高频 一. 柯里化函数(Currying)和反柯里化 简介 柯里化(Currying),又称部分求值(Partial Evaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第 ...
- @cacheable 设置过期时间_缓存面试三连击——聊聊Redis过期策略?内存淘汰机制?再手写一个LRU 吧!...
大家好,今天我和大家想聊一聊有关redis的过期策略的话题. 听到这里你也许会觉得:"我去,我只是个日常搬砖的,这种偏底层的知识点,我需要care吗?" 话虽如此·,但是兄die, ...
- ds查找—二叉树平衡因子_面试官让我手写一个平衡二叉树,我当时就笑了
平衡二叉树对于初学者一直是一个比较复杂的知识点,因为其里面涉及到了大量的旋转操作.把大量的同学都给转晕了.这篇文章最主要的特点就是通过动画的形式演示.确保大家都能看懂.最后是手写一个平衡二叉树. 一. ...
- 手写一个promise用法_手写一个 Promise
1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 ...
最新文章
- jQuery中deferred对象的使用(二)
- ubuntu 安装pycharm
- simulink中错误object[id]!=NULL Component: Simulink | Category:Model error
- android 开发小工具,Android 开发者必备的八款小工具
- createrepo常用参数
- JavaScript学习代码整理(二)--函数
- WPF实现下拉框带图文和水印
- 正面管教PHP沙龙,正面管教沙龙体会
- 测试:第二章 测试过程
- function 自定义函数、函数调用
- 视频教程-C++Windows之WDM驱动程序开发(实战篇)上-驱动/内核开发
- OutMan——Objective-C中成员变量的作用域、@property和@synthesize介绍和使用、构造方法和自定义构造方法
- markdown在.html中生成目录
- vue 组件自己不能删除自己,$destroy从组件树上删除+从视图上消失
- 织梦CMS建站入门学习(二)
- app界面设计是什么?需要学习什么UI软件
- 在C#中设置打印机纸张大小,如此简单
- KF、EKF、UKF的matlab代码实现
- 在Linux中安装JKD(详细教学)
- Intel AVX入门实践
热门文章
- Angular No provider for EffectsRootModule错误消息的出现原因和修复方式
- SAP Fiori应用发生超时错误的一个可能原因
- SAP Data Hub里的Constant Generator
- Cluster table import - BSP UI component source code is actually stored in cluster table
- SAP云平台API portal里的discover all功能
- how does Fiori Mock server serve OData request with 202
- the title and note has maintained the same text type
- SAP UI5 group function调试
- 周期性取count请求是如何在前台setup的 - Tile count
- S4 KNUMH的设计原理