AJAX-AJAX 工具对象_ajax技术中，实现其功能的关键对象dui'x-优快云博客

本文链接：https://blog.youkuaiyun.com/QWH_PYTHON/article/details/103623981

本文详细介绍了如何使用AJAX工具对象进行POST和GET请求，包括处理浏览器兼容性问题、简化请求步骤，以及如何在HTML页面中调用这些功能。

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

AJAX-AJAX 工具对象

AJAX 工具对象
- 一：使用 POST 请求
- 二：使用 GET 请求

AJAX 工具对象

ajax.js

//ajax工具对象：1.兼容问题  2.便捷问题

function Ajax(){
	
	//1.兼容问题 xhr对象
	var xhr = null;
	
	if(window.XMLHttpRequest){//检测是否有XMLHttpRequest构造方法
		//使用XMLHttpRequest构造方法创建xhr对象
		xhr = new XMLHttpRequest();
	}else if(window.ActiveXObject){//检测是否可以使用低版本ie的ActiveXObject
		//使用ActiveXObject来创建xhr对象
		//下面的数组为ie可能使用的版本名称
		var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.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++){
			//尝试创建
			xhr = new ActiveXObject(versions[i]);
			//检测是否创建成功
			if (xhr){
				break;
			}
		}
	}else{//都无法使用，就不能用ajax
		return false;
	}
	
	//继续简化ajax第四步
	function checkAndUse(func){
		
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status == 200){
					//使用响应的数据
					func(xhr.responseText)
				}
			}
			
		}
	}
	
	//定义一个get请求的内部函数
	function ajaxGET(url,callback){
		//1.创建xhr对象（已经在兼容性位置解决）
		//2.建立连接
		xhr.open('get',url);
		//3.发送数据
		xhr.send(null);
		//4.检测请求与响应
		checkAndUse(callback);
	}
		
	//定义一个post请求的内部函数
	function ajaxPOST(url,data,callback){
		//1.创建xhr对象（已经在兼容性位置解决）
		//2.建立连接
		xhr.open('post',url);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.发送数据
		xhr.send(data);
		//4.检测请求与响应
		checkAndUse(callback);
	}
	
	//返回值-2.便捷问题 (闭包实例)
	return {
		//ajax的功能对象
		get:ajaxGET,//实现ajax的get异步传输
		post:ajaxPOST//实现ajax的post异步传输
	}
}

一：使用 POST 请求

post.php

<?php
	//输出post请求
	echo $_POST['age'];
	echo "你好啊"
?>

post.html

<!doctype html>
<html>
	<head>
		<title>使用ajax工具对象</title>
		<meta charset="utf-8">
		<!--引入js文件-->
		<script src="./ajax.js"></script>
	</head>
	<body>
		<button id="btn">检测工具</button>
	</body>
</html>
<script>
	//添加事件
	btn.onclick=function(){
		//使用ajax请求服务器数据
		Ajax().post('post.php','age=455',console.log)
	}
</script>

二：使用 GET 请求

get.php

<?php
	//输出get请求
	echo $_GET['age'];
	echo "你好啊"
?>

get.html

<!doctype html>
<html>
	<head>
		<title>使用ajax工具对象</title>
		<meta charset="utf-8">
		<!--引入js文件-->
		<script src="./ajax.js"></script>
	</head>
	<body>
		<button id="btn">检测工具</button>
	</body>
</html>
<script>
	//添加事件
	btn.onclick=function(){
		//使用ajax请求服务器数据
		Ajax().get('post.php?age=455',console.log)
	}
</script>