什么是Ajax？封装

拒绝76

已于 2022-03-30 11:28:25 修改

阅读量1.1k

点赞数 1

文章标签： ajax

于 2022-03-30 11:27:21 首次发布

本文链接：https://blog.csdn.net/weixin_61434466/article/details/123841270

版权

AJAX是一种创建交互式网页应用的技术，允许在不刷新页面的情况下与服务器交换数据并更新内容。其原理主要涉及XMLHttpRequest对象的使用，包括建立连接、发送请求、监听通信状态和处理响应数据。文章还探讨了Ajax的封装，以简化其在实际应用中的使用。

摘要由CSDN通过智能技术生成

1.什么是ajax

AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应
⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚

原理

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后
⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤：

创建 Ajax 的核⼼对象 XMLHttpRequest 对象
通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接
构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端
通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果
将处理结果更新到 HTML ⻚⾯中

举个例⼦：

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
 if(request.readyState === 4){ // 整个请求过程完毕
 if(request.status >= 200 && request.status <= 300){
 console.log(request.responseText) // 服务端返回的结果