AJAX原理解析与案例实践，助你成为前端技术高手

阿猫的故乡

已于 2023-12-22 15:18:56 修改

阅读量997

点赞数 34

分类专栏： AJAX JavaScript 前端文章标签：前端 ajax javascript

于 2023-12-14 10:55:30 首次发布

本文链接：https://blog.csdn.net/weixin_70007095/article/details/134989668

版权

前端同时被 3 个专栏收录

48 篇文章 2 订阅

订阅专栏

JavaScript

45 篇文章 4 订阅

订阅专栏

AJAX

5 篇文章 1 订阅

订阅专栏

大家有关于JavaScript知识点不知道可以去

🎉博客主页：阿猫的故乡

🎉系列专栏：JavaScript专题栏

🎉ajax专栏：ajax知识点

🎉欢迎关注：👍点赞🙌收藏✍️留言

学习目标：

AJAX 原理

学习内容：

XMLHttpRequest
Promise

封装简易版 axios

学习时间：

提示：这里可以添加计划学习的时间

例如：

周一至周五晚上 7 点—晚上9点
周六上午 9 点-上午 11 点
周日下午 3 点-下午 6 点

学习产出：

AJAX原理 - XMLHttpRequest

定义：

XMLHttpRequest是一种在Web开发中使用的API，用于进行异步通信。它是AJAX（Asynchronous JavaScript and XML）的核心组件之一。XMLHttpRequest对象可以在不影响页面的情况下，向服务器发送HTTP请求并接收服务器返回的数据。

XMLHttpRequest对象首先由Microsoft在Internet Explorer中引入，后来被其他浏览器所采纳并成为标准的一部分。尽管其名称中包含"XML"，但它实际上可以与各种数据格式一起使用，例如HTML、文本、JSON等。

通过XMLHttpRequest对象，开发人员可以实现以下功能：

异步加载数据：XMLHttpRequest可以在后台向服务器发送请求并从服务器接收数据。这样，在页面加载时，可以同时进行其他操作而不会阻塞用户界面。
更新部分页面内容：通过XHR可以向服务器请求特定的数据，并将其插入到页面的特定区域，而不需要重新加载整个页面。这样可以实现动态更新部分内容的效果。
发送数据到服务器：除了从服务器获取数据，XHR还可以用于将数据发送到服务器，例如提交表单数据或者将用户输入保存到数据库中。

XMLHttpRequest对象具有多个属性和方法，使开发人员可以对请求进行设置、发送请求、处理响应数据等。通过使用这些属性和方法，可以实现高度定制的异步通信。

总结来说，XMLHttpRequest是一种用于发送异步HTTP请求并处理响应的JavaScript API。它是AJAX技术的基础，使得在Web应用中可以实现更加流畅和动态的用户体验。

关系：axios 内部采用 XMLHttpRequest 与服务器交互
好处：掌握使用 XHR 与服务器进行数据交互，了解 axios 内部原理

使用 XMLHttpRequest

要使用XMLHttpRequest对象进行异步通信，需要按照以下步骤进行操作：

创建XMLHttpRequest对象：
```
var xhr = new XMLHttpRequest();
```
设置请求的相关参数：
- 指定请求的方法（GET、POST等）和URL：
```
xhr.open('GET', 'http://example.com/api/data', true);
```
- 可选：指定请求的头信息（例如设置请求的Content-Type）：
```
xhr.setRequestHeader('Content-Type', 'application/json');
```

注册事件处理程序：

指定当请求完成时调用的回调函数：

xhr.onload = function() {
  // 响应已完成
  if (xhr.status === 200) {
    // 请求成功
    console.log(xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败：' + xhr.status);
  }
};

可选：指定在请求过程中发生错误时调用的回调函数：
```
xhr.onerror = function() {
  console.error('请求发生错误');
};
```

发送请求：
```
xhr.send();
```

在发送请求之后，XHR对象会与服务器进行通信，并在完成后触发相应的事件处理程序。可以使用xhr.responseText访问服务器返回的响应数据。如果请求失败，可以使用xhr.status来获取错误状态码。

需要注意的是，由于安全原因，存在跨域限制。如果请求的URL与当前页面的域名不同，可能会受到浏览器的限制。可以使用CORS（跨域资源共享）或JSONP等技术来解决跨域问题。

这只是XMLHttpRequest的基本用法，还有其他更高级的功能，例如设置请求超时、上传文件等。可以查阅更多文档或教程来深入了解XMLHttpRequest的更多用法和功能。

总结：

步骤：
1. 创建 XMLHttpRequest 对象
2. 配置请求方法和请求 url 地址
3. 监听 loadend 事件，接收响应结果
4. 发起请求

XMLHttpRequest - 查询参数

XMLHttpRequest对象通常用于发送异步请求，并从服务器获取数据。查询参数是在URL中传递的参数，用于向服务器发送特定的请求信息。

可以通过将查询参数附加到URL中来发送数据。以下是使用XMLHttpRequest对象发送具有查询参数的请求的示例：

var xhr = new XMLHttpRequest();
var url = 'http://example.com/api/data?param1=value1¶m2=value2';

xhr.open('GET', url, true);

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('请求失败：' + xhr.status);
  }
};

xhr.onerror = function() {
  console.error('请求发生错误');
};

xhr.send();

在上述示例中，URL中的查询参数是通过在URL末尾使用?和&添加的。每个查询参数由键值对组成，使用等号（=）分隔，键和值之间使用&分隔。示例中的URL将param1=value1和`param

需求：通过 XHR 提交用户名和密码，完成注册功能
核心：
请求头设置 Content-Type：application/json
请求体携带 JSON 字符串

下面是一个示例代码，演示如何通过XHR提交用户名和密码完成注册功能：

var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('POST', 'http://example.com/register', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 构建请求体
var data = {
  username: 'john',
  password: 'password123'
};

// 发送请求
xhr.send(JSON.stringify(data));

// 监听请求完成事件
xhr.onload = function() {
  if(xhr.status === 200) {
    console.log('注册成功');
  } else {
    console.log('注册失败');
  }
}

请根据实际情况修改请求的URL和请求体数据。

Promise

定义

Promise是JavaScript中处理异步操作的一种方式，它可以更方便地管理和处理异步代码。Promise有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。

Promise的语法如下：

new Promise(function(resolve, reject) {
  // 异步操作的代码
  // 成功时调用 resolve()，并传递结果数据
  // 失败时调用 reject()，并传递错误信息
}).then(function(result) {
  // 成功时的处理逻辑
}).catch(function(error) {
  // 失败时的处理逻辑
});

在Promise的构造函数中，我们可以执行异步操作。如果异步操作成功，调用resolve()方法，并传递成功的结果数据；如果异步操作失败，调用reject()方法，并传递错误信息。

在then()方法中，我们可以处理异步操作成功时的情况。then()方法接收一个函数作为参数，该函数的参数是异步操作成功的结果数据。

在catch()方法中，我们可以处理异步操作失败时的情况。catch()方法接收一个函数作为参数，该函数的参数是异步操作失败的错误信息。

Promise还有一些其他的方法和特性，如resolve()、reject()、all()、race()等，可以更灵活地处理异步操作。

请注意，Promise是ES6中的特性，如果要在老旧的浏览器环境中使用，可能需要使用Polyfill库补充支持。

总结：

1. 什么是 Promise？
➢ 表示（管理）一个异步操作最终状态和结果值的对象
2. 为什么学习 Promise？
➢ 成功和失败状态，可以关联对应处理程序
➢ 了解 axios 内部原理
3. Promise 使用步骤？

Promise - 三种状态
作用：了解Promise对象如何关联的处理函数，以及代码执行顺序
概念：一个Promise对象，必然处于以下几种状态之一
✓ 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
✓ 已兑现（fulfilled）：意味着，操作成功完成
✓ 已拒绝（rejected）：意味着，操作失败

总结：

1. Promise 对象有哪 3 种状态？
➢ 待定 pending
➢ 已兑现 fulfilled
➢ 已拒绝 rejected
2. Promise 状态有什么用？
➢ 状态改变后，调用关联的处理函数

封装简易版 axios

封装_简易axios_获取省份列表

需求：基于 Promise + XHR 封装 myAxios 函数，获取省份列表展示
步骤：
1. 定义 myAxios 函数，接收配置对象，返回 Promise 对象
2. 发起 XHR 请求，默认请求方法为 GET
3. 调用成功/失败的处理程序
4. 使用 myAxios 函数，获取省份列表展示

以下是基于Promise和XHR封装的myAxios函数来获取省份列表并展示的代码示例：

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(config.method || 'GET', config.url, true);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };

    if (config.headers) {
      for (let header in config.headers) {
        xhr.setRequestHeader(header, config.headers[header]);
      }
    }

    xhr.send();
  });
}

// 使用myAxios函数来获取省份列表并展示
const url = 'https://api.apiopen.top/getAllUrl';

myAxios({ url })
  .then(response => {
    console.log(response);
    // 在这里展示省份列表
  })
  .catch(error => {
    console.error('Error:', error);
  });

这段代码定义了一个myAxios函数，它接收一个配置对象作为参数，并返回一个Promise对象。在函数内部，通过XMLHttpRequest对象来发送XHR请求，并监听其状态变化。在请求成功时，解析响应的文本并将结果传递给resolve方法；在请求失败时，将错误信息传递给reject方法。

在代码的后面部分，我们使用myAxios函数来发送GET请求获取省份列表，并在成功时打印出返回的数据。你可以根据具体需求，对返回的数据进行展示。

需求：修改 myAxios 函数支持传递查询参数，获取"河北省"，"邯郸市"对应地区列表展示
步骤：
1. myAxios 函数调用后，判断 params 选项
2. 基于 URLSearchParams 转换查询参数字符串
3. 使用自己封装的 myAxios 函数展示地区列表

以下是修改后的myAxios函数，支持传递查询参数，并获取"河北省"，"邯郸市"对应的地区列表进行展示：

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    let url = config.url;

    // 如果有查询参数，则转换为字符串并拼接到URL上
    if (config.params) {
      const params = new URLSearchParams(config.params);
      url += '?' + params.toString();
    }

    xhr.open(config.method || 'GET', url, true);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };

    if (config.headers) {
      for (let header in config.headers) {
        xhr.setRequestHeader(header, config.headers[header]);
      }
    }

    xhr.send();
  });
}

// 使用myAxios函数来获取地区列表并展示
const url = 'https://api.apiopen.top/getArea';

myAxios({ 
  url,
  params: {
    province: '河北省',
    city: '邯郸市'
  }
})
  .then(response => {
    console.log(response);
    // 在这里展示地区列表
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这段代码中，我们对myAxios函数进行了修改，添加了对查询参数的支持。在调用myAxios函数时，可以通过params选项传递查询参数。我们使用URLSearchParams对象将查询参数转换为字符串，并拼接到URL上。

在请求地区列表时，我们传递了查询参数province为"河北省"，city为"邯郸市"。在请求成功后，可以在then方法中处理返回的地区列表数据，并进行展示。

需求：修改 myAxios 函数支持传递请求体数据，完成注册用户功能
步骤：
1. myAxios 函数调用后，判断 data 选项
2. 转换数据类型，在 send 方法中发送
3. 使用自己封装的 myAxios 函数完成注册用户功能

以下是修改后的myAxios函数，支持传递请求体数据，并完成注册用户功能：

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(config.method || 'GET', config.url, true);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };

    if (config.headers) {
      for (let header in config.headers) {
        xhr.setRequestHeader(header, config.headers[header]);
      }
    }

    if (config.method === 'POST' && config.data) {
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.send(JSON.stringify(config.data));
    } else {
      xhr.send();
    }
  });
}

// 使用myAxios函数来完成注册用户功能
const url = 'https://api.apiopen.top/registerUser';

myAxios({
  url,
  method: 'POST',
  data: {
    username: 'testuser',
    password: 'testpassword'
  }
})
  .then(response => {
    console.log(response);
    // 在这里处理注册成功的逻辑
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这段代码中，我们对myAxios函数进行了修改，增加了对data选项的支持。在调用myAxios函数时，可以通过data选项传递请求体数据。在发送POST请求时，我们将请求头设置为'Content-Type: application/json'，并将数据转换为JSON字符串后发送。

在注册用户功能中，我们传递了请求体数据username为'testuser'，password为'testpassword'。在请求成功后，可以在then方法中处理返回的响应数据，并进行相应的逻辑处理。

以上就是全部的ajax原力知识点了以上所有图均来自网络，如有侵权联系速删！！！

阿猫的故乡

关注

34
点赞
踩
33

收藏

觉得还不错? 一键收藏
打赏
5
评论
AJAX原理解析与案例实践，助你成为前端技术高手

文将介绍AJAX的原理和常见应用案例。首先，我们将解释AJAX是什么以及它的工作原理。AJAX是一种在不重新加载整个页面的情况下，通过异步请求与服务器进行数据交互的技术。它使用了XMLHttpRequest对象来发送和接收数据，并通过JavaScript来处理服务器返回的数据。接下来，我们将介绍AJAX的优势和适用场景，例如实时搜索、无需刷新页面的表单提交和动态加载内容等。我们还会提供一些常见的AJAX应用案例，如动态加载新闻列表、实时更新聊天室和无刷新添加购物车等。最后，我们会给出一些使用AJAX时需要注
复制链接

扫一扫