JavaScript：原生JS的Ajax实现-优快云博客

本文链接：https://blog.youkuaiyun.com/HiLiou/article/details/108029418

本文详细介绍了Ajax（异步的JavaScript和XML）的概念及其在前后端数据交互中的应用。通过四个步骤讲解了如何创建Ajax请求：创建XMLHttpRequest对象、发送请求、处理服务器响应以及设置onreadystatechange事件。

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

什么是Ajax

Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript和XML，用于前后端进行数据交互

创建Ajax的步骤

1. 创建XMLHttpRequest对象

var xmlhttp;
if(window.XMLHttpRequest){
	//ie7+
	xmlhttp = new XMLHttpRequest();	
}else{
	//ie5,ie6
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2. 向服务器发送请求

//open方法用于规定请求的类型，url及是否异步
xmlhttp.open("GET",url,true)
//send方法用于发起请求
xmlhttp.send()

3. 服务器响应

//获得字符串形式的响应数据
xmlhttp.responseText
//获得XML形式的响应数据
xmlhttp.responseXML

4. onreadystatechange事件

readyState属性

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

status属性

200：”OK“
400：未找到页面

//只要xmlhttp的readystate属性发生变化，就调用onreadystatechange方法
xmlhttp.onreadystatechange = function(){
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
		callback(JSON.parse(xmlhttp.responseText))
	}
}

Ajax实例

//定义ajax函数
function ajax(url,data,callback){
	var xmlhttp;
	if(window.XMLHttpRequest){
	    xmlhttp = new XMLHttpRequest();
	}else{
	    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
	}
	xmlhttp.onreadystatechange = function(){
	    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
	        callback(JSON.parse(xmlhttp.responseText))
	    }
	};
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}  
//调用ajax函数
ajax(url,param,(res)=>{
	console.log(res)
})