天天都在用的Ajax你真的了解吗？

DannySen
961 阅读10分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

Ajax

Ajax是Asynchronous Javascript And XML（异步JavaScript和XML）的缩写。

Ajax技术描述了使用脚本操纵HTTP和Web服务器进行数据交换，在页面不刷新的情况下，实现页面的局部更新。是指一种创建交互式网页应用的网页开发技术。

注意：

  • Ajax = 异步 （JavaScript) 和 XML）。

  • Ajax 是一种用于创建快速动态网页的技术。

  • Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

在这里插入图片描述 注意： Ajax对象和document对象之间是有同步和异步之分的，但它相对于整个网页依然是异步的，通俗点说就是 Ajax 可以在不刷新整个网页的前提下，对网页的局部进项刷新（相对于整个网页的异步），但是 Ajax 可以选择在浏览器解析到自己的时候，是一边处理自己，一边解析下面的文档（异步）还是等待自己被解析完毕再解析下面的文档（同步）

说到这里也简单说一下 同步 和 异步 的区别： 同步： 同步的过程通俗的说就是流水线，前面的没有执行完毕，后面的不能执行，是单线程的。 异步： 异步的过程则不需要等待，即我不需要等待你前面的工作完成，你先做你的，我后面的也继续执行着。

异步方式（默认） ：是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果。下面请看异步的执行过程：

在这里插入图片描述 同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。同步的执行过程如下：

在这里插入图片描述

创建Ajax

上面写到对 Ajax 的介绍，下面则重点介绍创建 Ajax 的四步流程（完整过程不为4步，即代码书写为4步）

1. 创建XMLHttpRequest对象

浏览器在XMLHttpRequest类上定义了它的HTTP方法。这个类型的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和获取相应数据。

创建XMLHttpRequest对象：

var xmlhttp = new XMLHttpRequest();

兼容 IE5，6的写法：

var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();

 } else {
  // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2. Ajax向服务器发送请求

创建XMLHttpRequest对象之后，我们就可以使用XMLHttpRequest对象的open()方法发起请求，该方法必须要指定请求方法（GET、POST等）和URL。

xmlhttp.open(‘GET’, ‘home.html’);
// method 为请求方法，早上的博文中有提及，url地址（此处应为完整地址：应当包括 协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分）
xmlhttp.open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])

  • method：用于指定请求方式，如GET、POST，不区分大小写。 URL：表示请求的地址。 asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。 userName和password：可选参数，表示HTTP认证的用户名和密码。

  • 请求方法不区分大小写，但通常都写成大写的形式。除了‘GET’和‘POST’之外，该方法还支持‘DELETE’、‘HEAD’、‘OPTIONS’和‘PUT’作为第一个参数。但‘TRACE’和 ‘CONNECT’由于安全风险已被明确禁止使用。

  • URL用来指定请求的资源。它可以是一个相对URL（相对于当前文档的URL），也可以是一个绝对URL。如果使用的是绝对URL，则协议、主机和端口通常必须要与当前文档URL保持一致，因为跨域的请求通常会报错（在服务器允许跨域请求时，则不会报错）。

  • 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

  • 跨域 : JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

3. 设置http请求头

除了设置请求方法和URL以外，我们还可以设置请求头。POST请求必须要用‘Content-Type’请求头指定请求主体的MIME类型(用来描述实体内容的编码格式)：

//默认编码格式(数据被编码为名称/值对) 
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

//由于以上的文件格式不支持上传，进行文件传输时候要改成这样的格式
xmlhttp.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);

//用来告诉服务端消息主体是序列化后的 JSON 字符串
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/json’);

在这里插入图片描述

但是有些请求头我们不能自己指定，例如‘Content-Length’、‘Date’、‘Referer’、‘User-Agent’等，XMLHttpRequest将自动添加这些头，防止伪造它们。除此之外，XMLHttpRequest对象自动处理Cookie、连接时间、字符集和编码判断，所以我们无法向setRequestHeader()传递如下的请求头：

Accept-CharsetContent-Transfer-EncodingTE
Accept-EncodingDateTrailer
ConnectionExpectTransfer-Encoding
Content-LengthHostUpgrade
CookieKeep-aliveUser-Agent
Cookie2RefererVia

4. 发送请求

使用XMLHttpRequest发起请求的最后一步是指定可选的请求主体并将它发送给服务器。

//Open的方式是post
xmlhttp.send(content);

//open的方式是get的一般不用send
xmlhttp.send(null);

eg:xmlhttp.send(name=张三&gender=男);

GET请求没有请求体，所以应该传递null或省略这个参数。而POST请求通常具有请求主体，同时它应该与使用setRequestHeader()指定的‘Content-Type’一致。

注意： 写到此处，Ajax对象已创建完成

Ajax响应后

5. 获得响应

一个完整的HTTP响应消息由状态行、响应头、空行和响应主体组成。这些都可以通过XMLHttpRequest对象的方法和方法获取。 在这里插入图片描述

6. 监听请求状态的改变

为了在响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的onreadystatechange事件。

xhr.onreadystatechange = function(){

};

但为了理解这个事件类型，我需要先弄明白readyState属性。readyState属性的值是一个整数，用来指示HTTP请求的状态。readyState属性的值如下表所示：

常量值含义
UNSENT0初始化，尚未调用open()方法
OPENED1启动，已调用open()方法，但尚未调用send()方法
HEADERS_RECEIVED2发送，已调用send()方法，接收到响应头信息
LOADING3接收，已经接收到部分响应主体
DONE4完成，已经接收到全部响应数据，而且已经可以在客户端使用了

理论上，每次readyState属性的值改变都会触发readystatechange事件。然而，在实际应用中，当readyState属性的值改变为0或1时可能不会触发这个事件。在某些浏览器中LOADING状态可能会触发多次。当readyState属性的值改变为4或服务器的响应完成时，所有的浏览器都会触发readystatechange事件。因此为了判断响应是否真正完成了，我们应该在事件处理程序中时刻检测readyState属性的值。

xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
		console.log(‘请求完成了’);
	}
};

但这样只能确保请求完成了，并不能确保请求成功。因此我们还需要根据响应的【状态码】来判断请求是否成功。

我们可以通过XMLHttpRequest对象的status和statusText属性获取HTTP状态码，状态消息。

xmlhttp.status       // 200
xmlhttp.statusText   // OK

代码如下：

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(‘请求完成并且成功了’);
	}
};

完善的判断信息

xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
	}
};

在这里插入图片描述

7. 获取响应头

  • 响应头用于告知客户端本次响应的基本信息，包括服务器程序名、内容的编码格式、缓存控制等。请求头和响应头是浏览器和服务器之间交互的重要信息，由程序自动处理，通常不需要人为干预。

  • 使用getResponeHeader()和getAllResponeHeaders()获取响应头信息。XMLHttpRequest会自动处理cookie：它会从getAllResponeHeaders()返回的响应头中过滤掉cookie头，而如果给getResponseHeader()传递‘Set-Cookie’和‘Set-Cookie2’则返回null。

xmlhttp.getResponeHeader(‘Content-Type’)      // ‘text/html’
xmlhttp.getAllResponeHeaders()                 // 获取所有的响应头

8. 获得响应主体

服务器的响应实体内容有多重编码格式，当用户请求的是一个网页，实体内容的格式就是HTML，如果请求的是图片响应的就是图片，服务器为了告知浏览器内容类型，会通过响应头中的Content-type字段来描述，这是一种MIME常见的类型。

无论响应主体内容类型是什么，响应主体的内容都会保存到responseText和responseXML属性中；而对于非XML数据而言responseXML属性的值将为null。

xmlhttp.responseText     // 服务器端返回的文本内容

9. 处理服务器返回的数据

服务器返回的数据都是JSON格式的字符串，为了使用方便，我们需要先把字符串转换成JavaScript对象（Object/Array）。

JSON.parse(xhr.responseText);

转换之后，就能以访问对象属性的方式拿到各种数据，实例如下：

// 转换成Object类型的对象
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}

// 转换成Array类型的对象
[
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}
]

10. 怎样向服务器传递数据？

GET方式的请求：

传递给后台的数据要拼接到URL的后面，以问号（？）开始，参数是以name=value的形式出现，每两个键值对之间以（&）分隔。例如：

'http://192.168.0.101:8080/AjaxDemo/LoginServlet?username=zhangsan&password=123456'

POST方式的请求：

先通过请求头（Content-Type）指定数据的格式类型，常用的格式类型有两种，分别是：

  • application/x-www-form-urlencoded：用来告诉服务端消息主体是经过 URL编码的字符串(窗体数据被编码为名称/值对)

  • application/json ：用来告诉服务端消息主体是序列化后的 JSON 格式的字符串

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

  • 然后将编码之后的数据通过send()方法传递给服务器，例如：

xhr.send(“clazz=%E7%81%AB%E8%8A%B112%E6%9C%9F&name=%E9%99%88%E6%A2%A6%E9%BE%99&gender=%E7%94%B7&age=20&hobby=%E7%9D%A1%E8%A7%89&hobby=%E6%89%93%E8%B1%86%E8%B1%86&tel=13834569928&address=%E5%8D%97%E9%98%B3&remark=%E6%96%B0%E5%90%8C%E5%AD%A6&date=2019-08-01”)。
avatar
文章
阅读
粉丝