Ajax接收服务器端返回信息

落日映苍穹つ 2022-05-20 06:23 186阅读 0赞

# Ajax可以接收什么信息？ #

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

![70][]

**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="触发" οnclick="f1()">
    	<div id="result"></div>
    </body>
    </html>

# 执行效果： #

![70 1][]

# ajax属性和方法介绍： #

# 属性： #

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

# 方法： #

open() 创建新的http请求

send() 把请求发送到服务器端

# ajax事件onreadystatechange最多感知四种状态： #

![WEBRESOURCEa0fea046e8f3b58163c60373aa0de592][]

# 获取到服务器端内容： #

![WEBRESOURCEdf270deececef70d23a9775cee8fde10][]

# ajax常用请求方法： #

![WEBRESOURCEb8e7a3cab41aed10ceb38013b713b82a][]

# ajax常用属性： #

![WEBRESOURCE9ca143e747f04e35f53f6ed75ef85f0e][]

# ajax的五种状态readyState及状态码和状态值： #

![WEBRESOURCE59adbe52b12ae09370fe8b82b8e5bab0][]

[70]: /images/20220520/8adfae22fce44b01a3f0c6d0ddf197b8.png
[70 1]: /images/20220520/bf19c72bfe47421982ca4f773f041c20.png
[WEBRESOURCEa0fea046e8f3b58163c60373aa0de592]: https://note.youdao.com/yws/res/4666/WEBRESOURCEa0fea046e8f3b58163c60373aa0de592
[WEBRESOURCEdf270deececef70d23a9775cee8fde10]: https://note.youdao.com/yws/res/4671/WEBRESOURCEdf270deececef70d23a9775cee8fde10
[WEBRESOURCEb8e7a3cab41aed10ceb38013b713b82a]: https://note.youdao.com/yws/res/4673/WEBRESOURCEb8e7a3cab41aed10ceb38013b713b82a
[WEBRESOURCE9ca143e747f04e35f53f6ed75ef85f0e]: https://note.youdao.com/yws/res/4676/WEBRESOURCE9ca143e747f04e35f53f6ed75ef85f0e
[WEBRESOURCE59adbe52b12ae09370fe8b82b8e5bab0]: https://note.youdao.com/yws/res/4683/WEBRESOURCE59adbe52b12ae09370fe8b82b8e5bab0