Ajax接收服务器端返回信息

最新推荐文章于 2021-08-05 21:50:05 发布

原创最新推荐文章于 2021-08-05 21:50:05 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax接收服务器返回信息 #responseText #readyState #onreadystatechange

AJAX 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Ajax如何接收服务器返回的多种类型信息，包括字符串、HTML、CSS、XML和JSON等。通过设置readyState、onreadystatechange和responseText，详细解析了Ajax在不同状态下的响应处理。同时，列举了常用的Ajax请求方法和属性，以及readyState的五种状态及其含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax可以接收什么信息？

浏览器可以接收的信息ajax都可以接收，例如字符串、html标签、css样式内容、xml内容、json内容等。

ajax接收服务器端返回的信息，需要结合readyState/onreadystatechange/responseText一起使用：

服务器端01.php：

<?php
	echo "<div style='color:green;'>恭喜，该用户名可以使用</div>";

客户端01-response.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax接收服务器信息</title>
	<script type="text/javascript">
	function f1(){
		//ajax发起请求并接收返回的信息
		
		//第一步：创建对象
		var xhr = new XMLHttpRequest();

		//第四步：给ajax设置事件
		xhr.onreadystatechange = function(){
			// console.log(xhr.readyState);
		 if(xhr.readyState==4){
			  // 把服务器端返回的信息显示到页面上
			  document.getElementById('result').innerHTML = xhr.responseText;
		   }
		}

		//第二步：创建新的http请求
		xhr.open('get', '01.php');

		//第三步：发送请求
		xhr.send(null);
	}
	</script>
</head>
<body>
	<h2>ajax接收服务器端返回的信息</h2>
	<input type="button" value="触发" onclick="f1()">
	<div id="result"></div>
</body>
</html>

执行效果：

ajax属性和方法介绍：

属性：

    responseText: 以字符串形式接收服务器端返回的信息
    readyState:
        0: 刚创建ajax对象
        1：已经调用open方法
        2：已经调用send方法
        3：已经返回部分数据
        4：请求完成，数据返回完整
    onreadystatechange: 事件，当ajax状态readyState发生变化的时候要触发执行
    为了获得较多创建好ajax的状态，最好在创建好ajax对象后就设置
    最多可以感知1 2 3 4 四种状态