AJAX简单实现(jq实现和原生实现)_jquery 中的$ajax替换成原声-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45616142/article/details/108922866

本文介绍了AJAX的基础知识，包括使用jQuery库和原生JavaScript实现AJAX GET请求的方法，帮助理解其工作原理。

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

jq的实现方法：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<button>点击</button>
	</body>
	<script src="js/jquery-2.1.4.min.js"></script>
	<script>
		$('button').click(function() {
			$.ajax({
				url: '/ajax/ajax/a.txt',  //请求路径
				type: 'GET',  //请求方式
				async: true,  //同步异步
				dataType: 'text',//返回数据类型
				data: '噢噢噢噢',  //发送数据到后台
				success: function(data) { //请求成功拿到数据
					console.log(data);
				},
				error:function(err){//提供报错信息
					console.log(err);
				}
			})
		})
	</script>

</html>

原生实现方法：（以get方法为例）

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>

	<!--
					
		1， 这块首先要处理一个兼容问题，因为在低版本的IE下，是不存在XMLHttpRequest内置对象，
		    我们可以使用另一个对象ActiveXObject('Microsoft.XMLHTTP')替代就可以。
		    XMLHttpRequest   新浏览器
			ActiveXObject("Microsoft.XMLHTTP");  旧浏览器

		2,
			xhr.open(method,url,async)
			method: get  post
			url: 请求地址
			async: ture（异步）      flase（同步）

		3,
			xhr.send()   发送请求
			通过get方式发送的请求， xhr.send(null)
			通过post方式发送的请求。 xhr.send("user=zf")

		4，	监听
			xhr.onreadystatechange       当状态码改变时触发 

		5,	接收数据，
			responseText  接收响应的数据  (字符串格式)

			get 与 post 的区别:
				POST是发送数据，GET是接受数据；
				POST发送数据的安全性较好，而GET较差；
				POST发送数据不限制大小，而GET大小受限2~100k。
-->

	<script>
		//声明ajax核心对象，   处理兼容
		var xhr;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		} else {
			alert('浏览器很垃圾，换吧');
		}
		//建立连接
		xhr.open("GET", "http://localhost/speed/a.txt", true);

		//发送请求
		xhr.send(null);

		//监听状态码
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4 && xhr.status == 200) {
				//接收数据
				console.log(xhr.responseText)
			}
		} 
	</script>
</body>

</html>