JS中ajax的原理是什么？

学习前端的渣渣

于 2022-09-01 21:00:07 发布

阅读量206

点赞数

分类专栏：前端面试题 JavaScript 文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/fangqi20170515/article/details/126651079

版权

103 篇文章 2 订阅

订阅专栏

79 篇文章 0 订阅

订阅专栏

原理：通过XMLHttpRequest对象来向服务器发送异步请求，从服务端获取数据，然后用js来操作DOM去更新页面。

实现过程：

创建ajax的核心对象XMLHttpRequest对象；
new XMLHttpRequest( )实例化对象
通过XMLHttpRequest对象的open( )方法与服务端建立连接；
new XMLHttpRequest().open(method:表示请求方式，url:服务的地址)
构建请求所需的数据内容，并通过XMLHttpRequest对象的send( )方法发送给服务器端
new XMLHttpRequest().send(body:发送的数据)；如果使用get请求发送数据，send()参数值为null
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态；
new XMLHttpRequest().onreadystatechange主要监听的属性是实例化对象中resayState（五个状态）：
0：opne()未调用，1：send()未调用，2：send()已经调用，响应头和响应状态已经返回，3：响应头正在下载，responseText（接收服务端响应的结果）获取到部分的数据，4：整个请求过程已经完毕。
只要resayState属性值发生呢个改变，onreadystatechange被触发
接收并处理服务端向客户端响应的数据结果；
将处理结果更新到HTML页面中