AJAX使用中的异步同步请求怎么实现

这次的教程是在AJAX中，异步同步的请求怎么实现，我们知道，FormData类型、事件监听接口都是需要AJAX来实现的，那么有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态替换页面中展示的数据呢？今天就来说一下AJAX这个概念。

XMLHttpRequest 对象

　　XMLHttpRequest只是一个JavaScript对象，确切的说，是一个构造函数。换句话说，它一点也不神秘，它的特殊之处只在于它是由客户端(即浏览器)提供的（而不是JavaScript原生的），除此之外，它有属性，有方法，需要通过new关键字进行实例化，我们只需掌握它们就好；

XMLHttpRequest 之 获取数据

　　我们知道AJAX用来在项目中以阻止页面刷新的方式获取数据，那么数据从哪里来呢？我们又怎么知道如何获取这些数据？答案是我们通常使用API与各式各样的数据库交互。

　　“API”是“Application Programming Interface”(即：应用程序接口)的缩写，你可以想象一些数据是开放的并且在等待被使用，而我们获取这些数据的方式便是使用API。API通常的形式是一个URL，并提供指定的参数名和参数值用来帮助你定位所要获取的数据。

XMLHttpRequest 之 准备请求

要想与服务器交互，首先需要思考以下问题：

我们是要获取数据还是存储数据？ —— 表现为请求方式是“GET”还是“POST” 向哪里发出请求？　　　　　　　 —— 即相应的API地址 以何种方式等待相应？　　　　　 —— 有“同步”和“异步”两种选择

而XMLHttpRequest实例的.open()方法的作用就是用来回答以上三个问题。.open()方法接收三个参数：请求方式，请求URL地址和是否为异步请求的布尔值。

下面是一个.open()方法调用的例子：

// 该段代码会启动一个针对“example.php”的GET同步请求。

xhr.open("get", "example.php", false)

// “DELETE”、“HEAD”、“OPTONS”、“PUT”也可以作为open()方法的第1个参数。

　　上面的代码中，通过传递第三个参数为false实现同步。要注意的是：一旦设置为同步，那么send()方法将阻塞直到请求完成。　

（三）同步请求与异步请求

　　人们通常认为AJAX是异步的，实际上并非如此，AJAX是避免页面在获取数据后刷新的一种技术，至于等待服务器响应的方式是同步还是异步，需要开发人员结合业务需求进行配置（虽然通常是异步的）。

　　你可能会好奇，什么时候我们需要使用同步的AJAX？就我个人经验而言，似乎很难找到相应的场景。

　　最后我们再简单解释一下“同步”等待响应与“异步”等待响应的区别：“同步”意味着一旦请求发出，任何后续的JavaScript代码不会再执行，“异步”则是当请求发出后，后续的JavaScript代码会继续执行，当请求成功后，会调用相应的回调函数。　

XMLHttpRequest 2级 之 FormData类型

　　W3C提出了XMLHttpRequest 2级规范，虽然并非所有的浏览器都实现了该规范所规定的内容，但还是有一些内容被全部或大多数浏览器所实现。

FormData 类型

　　FormData是XMLHttpRequest 2级为我们提供的新的数据类型（构造函数），还记的如何伪装一个POST请求为一个表单提交吗？FormData令这一过程变得更加轻松，因为XHR2对象能够识别传入的数据类型是FormData的实例，并自动配置适当的头部信息。

如何伪装一个POST请求为一个表单提交？

当使用POST方法提交这种顺序的表单数据时，必须设置“Content-Type”请求头为这个值。

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

注意：当使用form时，这不是必需值，因为这是默认方法。

FormData的使用方式如下：

// 添加数据
let data1 = new FormData()
data1.append("name", "Tom")
xhr.send(data1)
 
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)

　　除此之外，FormData的另一个好处是相较于传统的AJAX请求，它允许我们上传二进制数据（图片，视频，音频等）。

FormData的浏览器兼容性。

桌面端　　IE 10+ 与其他浏览器均支持

移动端　　Android，Firefox Mobile，OperaMobile均支持，其余浏览器未知

XMLHttpRequest 2级 之 事件监听接口

XMLHttpRequest第一版，只能对onreadystatechange这一个事件指定回调函数。该事件对所有情况作出响应。

XMLHttpRequest第二版允许对更多的事件指定回调函数。

onloadstart 　　请求发出

onprogress 正在发送和加载数据

onabort 请求被中止，比如用户调用了abort()方法

onerror 请求失败

onload 　　　　　请求成功完成

ontimeout 　　　用户指定的时限到期，请求还未完成

onloadend 请求完成，不管成果或失败

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

前端的js框架总结以及用途讲解

怎样解决ajax在解析json数据时单位秒的形式

h5里js和servlet实现文件上传的实现步骤

以上就是AJAX使用中的异步同步请求怎么实现的详细内容，更多请关注其它相关文章！