带你了解 Ajax 请求数据的四个步骤~~~

虽然有很多封装好的网络请求，但是多了解一些知识总归没错的。

直接进入正题

步骤一

创建出一个对象 XMLHttpRequest()

var xhr = null;
if(window.XMLHttpRequest){
	//该方法不兼容IE6及以下浏览器
	xhr = new XMLHttpRequest();
}else{
	//IE6及以下兼容
	xhr = ActiveXObject('Microsoft.XMLHTTP');
}

步骤二

准备发送网络请求 open() 参数有三个

• 第一个参数：使用什么方式访问（get和post）
• 第二个参数：访问的url地址
• 第三个参数：同步或异步（true是异步，false是同步）一般是异步请求

get请求
get请求会将请求的参数放在地址栏
register.php文件是后端人员给的，参数也是后端人员给的（一般有接口文档）

/xhr.open('get','register.php?username='+unameValue,true);

post请求
post请求会将请求的参数放在请求体中

xhr.open('post','register.php',true);

步骤三

执行发送网络请求 send()

get请求的发送方式

xhr.send(null);

post请求的发送方式

var param = 'username=' + unameValue;
// 设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(param);

步骤四

指定回调函数并接收数据
现在基本上都是JSON数据格式了，xml格式也有，用的多不多不清楚了。下面用到的状态图，在文章的最后有图片介绍。

异步请求的代码

// 监听服务器的状态改变，来触发onreadystatechange事件
xhr.onreadystatechange = function () {
	//xhr.readyState == 4 表示发送的状态
	if(xhr.readyState == 4){
		//xhr.status == 200 表示服务器返回的状态
		if(xhr.status == 200){
			//看后端制作的是什么数据格式，再决定使用哪种类型
			//如果是xml数据格式，使用下面的
			//var queryResult = xhr.responseXML;
			//如果是json或者别的数据格式使用下面的
			var queryResult = xhr.responseText;
			// 进行输出
			document.getElementById('query').innerText = queryResult;
		}
	}
}

同步请求的代码

if (xhr.readyState == 4) {
	if (xhr.status == 200) {
		var queryResult = xhr.responseText;
		// 进行输出
		document.getElementById('query').innerText = queryResult;
	}
}

状态图

结语

这篇文章主要是了解Ajax的请求过程。目前有很多封装好的网络请求，比如说jQuery的$.ajax()、$.get()、$.post()，还有vue的axios等。只需要知道怎么使用它们就可以了。各位大佬给点个赞吧🤭