Ajax工作原理

最新推荐文章于 2025-03-26 17:59:42 发布

前端碎碎念

最新推荐文章于 2025-03-26 17:59:42 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

分类专栏：面试文章标签： ajax工作原理

本文链接：https://blog.youkuaiyun.com/zhongqw_00/article/details/97282398

面试专栏收录该内容

113 篇文章

订阅专栏

本文深入讲解了Ajax的工作机制，包括其异步特性、线程执行流程及回调函数的应用。通过实例代码展示了如何使用XMLHttpRequest对象发起HTTP请求，并解释了readyState属性与status状态码的作用。

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

如果面试被问到Ajax的原理的话，我觉得可以从以下几个方面来讲。

异步 | 线程 | 回调：Ajax就是告诉告诉浏览器我要去发送一个http请求，然后浏览器开一个线程去执行，由于该操作是异步的，此时浏览器可以去做其他的事情，当服器响应之后便可以执行回调函数。
再就可以把Ajax的实现流程说一下

let xhr = new XMLHttpRequest();
xhr.open('get' ,'http://baidu.com', true); //最后一个参数是选择是否异步请求，默认tue(异步)
xhr.setRequestHeader('content-type', application/x-www-form-urlencode) // post需要设置请求头，且data需要在xhr.send(date);
xhr.send();
xhr.onreadystatechange = function(){ //eadyState 属性改变时，就会调用该函数
	if(xhr.readyState == 4 && xhr.status == 200){ 
		/*
			readyState：
			0: 请求未初始化
			1: 服务器连接已建立
			2: 请求已接收
			3: 请求处理中
			4: 请求已完成，且响应已就绪
			status是状态码
		*/
		console.log('ajax ok');
	}
}