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      请求完成，不管成果或失败

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

相关阅读：

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

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

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

Atas ialah kandungan terperinci AJAX使用中的异步同步请求怎么实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!