Ajax的请求写法详解

简介

是什么

Ajax全称Asynchronous JavaScript and XML，直译过来就是异步的javascript 和 XML。为什么是叫XML还得由于最开始用ajax实现客户端和服务器端数据通信的时候，传输的数据格式一般都是xml格式的数据，所以把它称之为异步js和xml（现在一般都是基于json格式来进行数据传输的）。
需要说明的是Ajax并不是一门新的语言，而是一种使用现有标准的新方法。它是在异步JS和XMLHttpRequest的基础上实现的。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

概念

在未出现Ajax之前，客户端与服务器之间进行数据交互，只能通过特定的标签来实现。如a标签来请求一个新的页面，img、iframe、script等，使用这些标签不是需要刷新页面，就是只能请求到特定的数据。这样的局限性很大，缺点也很明显。
这个时候就需要一种技术更好的处理客户端与服务器之间的数据交互，Ajax应运而生。Ajax可以做到不刷新整个页面接收数据，且可以获得任意类型的数据。

同步和异步

同步：必须等待前面的任务完成，才能继续后面的任务。
异步：不受当前任务的影响。
举个例子：
同步：你去买饭，排队，还没到你，你就在后面等着，啥也不做。
异步：你去买饭，排队，还没到你，你去另一个档口买，最终还是买到了饭。

五个步骤

1. 创建AJAX引擎对象–所有操作都是通过引擎对象(XMLHttpRequest)。
2. 绑定监听–监听服务器是否已经返回对应数据（回调函数)
3. 创建请求消息，绑定地址,及配置其他参数——open()
4. 发送请求（send）
5. 接受相应返回数据，这个是写在第三个步骤回调函数里面的

具体写法

首先在写具体写法之前有必要配置一些其他必要的东西，首先Ajax是与服务端之间进行数据传递，所以肯定是需要写服务端语言，我这里使用php语言，然后还需要搭建服务器环境。我这里使用XAMPP，XAMPP 是一个把 Apache 网页服务器与 PHP、Perl 及 MariaDB 集合在一起的安装包，允许用户可以在自己的电脑上轻易的建立网页服务器环境。完全免费且易于安装。关于这个app的安装包和我整个示例代码我放在本篇博客的最后，建议先去把安装包下载下载安装好。
安装好之后找到安装目录xmall/htdocs，安装好之后这个文件夹内的文件都可以删除。然后在这里面去新建文件夹开始你的项目。运行的时候打开浏览器输入localhost:端口号，进入你的项目。端口号是80时可以省略，这是默认的端口号，80端口作为http协议的默认端口,在输入网站的时候其实浏览器(非IE)已经帮忙输入协议了。
如果安装好了xmall

点击start没有出现端口号，并且报错，很有可能是端口号被占用了，可以参考这篇博客https://blog.csdn.net/ycl396232695/article/details/79908181，改端口号。
安装好了就可以直接开始写了。
我这里就主要展示js部分代码，其他代码可以下载我的源码查看。

get请求

(function(){

	document.querySelector("[type='button']").onclick = function(){ // 点击提交

		// 获取用户输入的值
		var unval = document.querySelector("[name='username']").value;

		if(!unval){ return;} // 没有输入则不继续往下执行

		// 1.创建AJAX引擎对象
		var xhr;
		// 兼容写法
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		} else if(window.ActiveXObject){
			xhr = new ActiveXObject('Microsoft.XMLHTTP'); // 主要兼容 ie5 ie6
		} else {
			alert("你的浏览器不支持异步");
		}

		// 2. 绑定监听
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){ // 状态码
				doresponse(xhr);
			}
		}

		// 3. 创建请求消息，连接服务器
		xhr.open('GET', `./src/php/get.php?username=${unval}`, true);

		// 4. 发送请求消息
		xhr.send(null);

		// 5. 回调函数 接受相应返回数据
		function doresponse(xhr){
			// 找到登录提示框
			let tips = document.getElementsByClassName("utips")[0];
			// xhr.responseText 接收返回的数据
			if(xhr.responseText == '0'){ // 没有被注册
				tips.innerText = "该用户名可以使用";
				tips.style.color = "green";
			} else if(xhr.responseText == '1'){ // 被注册
				tips.innerText = "该用户名已被注册";
				tips.style.color = "red";
			}
		}

	}

})();

兼容性： 一般都只是兼容以前的ie5 ie6现在基本上看不见，所以兼容性很高。
监听： 绑定监听的时候主要监听请求返回的状态码，根据状态判断是否执行回调函数。各种状态码将在这篇博客最后列出来。
传递数据： get请求的参数放在地址内

post请求

(function(){

		document.querySelector("[type='button']").onclick = function(){ // 点击提交

		// 获取用户输入的值
		var unval = document.querySelector("[name='username']").value;
		var pwdval = document.querySelector("[name='password']").value;

		if(!unval || !pwdval){ return;} // 账号密码有一个没有输入就不往下执行

		// 1.创建AJAX引擎对象
		var xhr = new XMLHttpRequest();

		// 2. 绑定监听
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				doresponse(xhr);
			}
		}

		// 3. 创建请求消息，连接服务器
		xhr.open('POST', `./src/php/post.php`, true);

		// 3.5 post方法要设置请求头
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

		// 4. 发送请求消息
		xhr.send(`username=${unval}&password=${pwdval}`); // post请求传入的值放在send里面

		// 5. 回调函数 接受相应返回数据
		function doresponse(xhr){
			// 找到登录提示框
			let tips = document.getElementsByClassName("utips")[0];

			if(xhr.responseText == '0'){ // 账号密码错误
				tips.innerText = "账号密码错误";
				tips.style.color = "red";
			} else if(xhr.responseText == '1'){ // 账号密码正确
				tips.innerText = "账号密码正确";
				tips.style.color = "green";
			}
		}

	}


})()

与get不同，参数传递： post参数传递在send里面，并且post需要设置请求头。

状态码

ajax引擎对象与服务器通信状态码xmlHttp.readystate，范围0~4

状态码	意义
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

这个回调函数一共被调用4次，但只有状态码4的时候才代表服务器响应完成数据完成。

http通讯状态码

由于http通讯的状态码巨多，这里只给出两个最常用的。

状态码	意义
200	(成功)服务器已成功处理了请求。
404	(未找到)服务器找不到请求的网页。
500	(服务器内部错误)服务器遇到错误，无法完成请求。

示例代码与app：https://gitee.com/cress/Ajax
xampp官网： https://www.apachefriends.org/index.html