Ajax同步请求/异步请求(get|post)

最新推荐文章于 2022-07-03 23:09:52 发布

原创最新推荐文章于 2022-07-03 23:09:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #同步请求 #异步请求 #get/post

前端专栏收录该内容

15 篇文章

订阅专栏

本文详细讲解了AJax同步与异步请求的实现流程，包括如何使用XMLHttpRequest对象进行GET和POST请求，以及如何解析响应数据。通过实例演示了同步请求的直接返回结果与异步请求的事件监听处理。

一.AJax同步请求

实现流程:

得到核心对象XMLHttpRequest对象

 var xhr = new XMLHttpRequest();

准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);

 xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求

发送请求:
send(参数/null);
注：
如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;

xhr.send(null);

解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
2、得到后台响应数据 responseText

	if (xhr.status == 200) { // 1、判断响应是否成功 status=200
			console.log(xhr.responseText);// 2、得到后台响应数据  responseText
			var user = JSON.parse(xhr.responseText);
			console.log(user);
			console.log(user.uname);
		} else {
			alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
		}

二.AJax异步请求
异步无刷新技术前台无需等待,继续向下执行
实现流程：

得到核心对象XMLHttpRequest对象

	var xhr = new XMLHttpRequest();

准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);

xhr.open("GET","js/data.json?uname=zhangsan&uage=10",true); // 异步请求

发送请求
send(参数/null);
注：
如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;

xhr.send(null);

4 解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
2、得到后台响应数据 responseText

// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
	xhr.onreadystatechange = function() {
		// 如果是异步请求，需要等待数据完全响应后再做处理
		if (xhr.readyState == 4) {
			// 4、解析响应数据
			if (xhr.status == 200) { // 1、判断响应是否成功 status=200
				// 2、得到后台响应数据  responseText
				console.log(xhr.responseText);
				var user = JSON.parse(xhr.responseText);
				console.log(user);
				console.log(user.uname);
			} else {
				console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
			}
		}
	}

三.Post异步请求

// 1、得到核心对象XMLHttpRequest对象
	var xhr = new XMLHttpRequest();
	console.log(xhr);
// 2、准备/打开请求  open(请求类型GET/POST,请求的路径,是否异步true/false);
	xhr.open("POST","js/data.json",true); // 异步请求
	// 由于Post请求的机制问题，需要模拟表单提交
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3、发送请求  send(参数/null);
	xhr.send("uname=zhangsan&uage=10"); // post请求如果有参数，需要将参数设置在send方法中
	// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
		// 如果是异步请求，需要等待数据完全响应后再做处理
	if (xhr.readyState == 4) {
	// 4、解析响应数据
	if (xhr.status == 200) { // 1、判断响应是否成功 status=200
			console.log(xhr.responseText);// 2、得到后台响应数据  responseText
			var user = JSON.parse(xhr.responseText);
			console.log(user);
			console.log(user.uname);
		} else {
			console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
		}
	}
}