web前端学习笔记29-Ajax的应用——兼容性及案例操作_与ajax@^2.4.5.兼容的xlsx版本是多少-CSDN博客

本文链接：https://blog.csdn.net/weixin_42727838/article/details/107856423

本文探讨了Ajax的兼容性问题，包括不同版本的处理方式，并介绍了使用Ajax工具对象来解决兼容性和便捷性问题。通过具体的案例，如获取数据并转化为json对象，以及演示如何利用Ajax检测用户名是否已存在，展示了Ajax在实际开发中的应用。

摘要由CSDN通过智能技术生成

一、Ajax兼容性问题

兼容版本信息：['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','']

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax兼容性问题</title>
	</head>
	<body>
		<button id="btn">ie低版本Ajax</button>
		<script>
			// xhr对象兼容性处理
			// 1. 创建xhr对象
			// var xhr=new XMLHttpRequest();	//高版本		
			// 低版本ie
			var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP',''];
			for(var i=0;i<versions.length;i++){
    
				var xhr=new ActiveXObject(versions[i]);
				console.log(xhr);
				// 判定是否创建成功
				if(xhr){
    
					break;
				}
			}
			btn.onclick=function(){
    
				// 2. 建立连接
				xhr.open('get','1.php?age=22');
				// 3. 发送数据
				xhr.send(null);
				// 4.检测数据是否发送成功，检测服务器是否响应成功
				xhr.onreadystatechange=function(){
    
					// 是否发送成功
					if(xhr.readyState==4){
    
						// 是否响应成功
						if(xhr.status==200){
    
							// 使用服务器给我们的数据
							console.log(xhr.responseText);
						}
					}					
				}
			}
			
		</script>
	</body>
</html>

【1.php】

<?php
	echo $_GET['age'];
?>

二、Ajax工具对象：解决兼容问题与便捷问题

【 ajax.js 】

// ajax工具对象：1. 兼容问题  2. 便捷问题
function Ajax(){
   
	// 一. xhr对象兼容问题
	var xhr