欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Ajax获取服务器端响应数据的两种方式

程序员文章站 2022-07-15 14:04:25
...

方式一：onload

	xhr.onload = function (){
			console.log(xhr.responseText);
	     	}

方式二：

  • Ajax状态码：

  • 在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。

  • 5个状态码

  • 0：请求未初始化(还没有调用open())
    1：请求已经建立，但是还没有发送(还没有调用send())
    2：请求已经发送 （发送过程中状态是不断变化的 send方法不可以直接输出属性值 需要下面事件）
    3：请求正在处理中，通常响应中已经有部分数据可以用了
    4：响应已经完成，可以获取并使用服务器的响应了

 xhr.readyState // 获取Ajax状态码
  • onreadystatechange 事件：
 // 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		// 状态码为0 已经创建了ajax对象 但是还没有对ajax对象进行配置
		console.log(xhr.readyState);
		xhr.open('get', 'http://localhost:3000/readystate');
		// 1 已经对ajax对象进行配置 但是还没有发送请求
		console.log(xhr.readyState);

		// 当ajax状态码发生变化的时候出发
		xhr.onreadystatechange = function() {
			// 2 请求已经发送了
			// 3 已经接收到服务器端的部分数据了
			// 4 服务器端的响应数据已经接收完成
			console.log(xhr.readyState);
			// 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
			if (xhr.readyState == 4) {
				console.log(xhr.responseText);
			}
		} 
		//该事件写在上面 ，因为请求已经发送 再去监听事件已经晚了
		xhr.send();
		
	</script>
</body>
</html>

区别：

Ajax获取服务器端响应数据的两种方式
推荐使用onload事件（执行效率更高）来写：

<script type="text/javascript">
		// 1.创建ajax对象
		var xhr = new XMLHttpRequest();
		// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
		// 1)请求方式 2)请求地址
		xhr.open('get', 'http://localhost:3000/responseData');
		// 3.发送请求
		xhr.send();
		// 4.获取服务器端响应到客户端的数据
		xhr.onload = function (){
			// console.log(typeof xhr.responseText)
			// 将JSON字符串转换为JSON对象（服务器端写的json数据到了客户端就变成了json字符串）
			var responseText = JSON.parse(xhr.responseText);
			// 测试：在控制台输出处理结果
			console.log(responseText)
			// 将数据和html字符串进行拼接
			var str = '<h2>'+ responseText.name +'</h2>';
			// 将拼接的结果追加到页面中
			document.body.innerHTML = str;
		}
	</script>
相关标签： 前端 ajax

上一篇： Centos6安装RabbitMQ

下一篇： 【PAT】1066图像过滤

推荐阅读