Ajax的封装

最新推荐文章于 2024-05-14 00:20:38 发布
最新推荐文章于 2024-05-14 00:20:38 发布
阅读量287 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： ajax jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/120604360
版权

一、Ajax的封装目录

  • Ajax封装后主要包含以下5各模块：

  • ajax.js ：主要是 Ajax 类的封装。
  • constants.js ：常用常量的封装。
  • defaults.js ：默认参数的封装。
  • index.js ：Ajax 类实例化对象的封装。
  • utils.js ：工具函数的封装。
  • 代码的下载地址：Ajax-Encapsulation 。

二、测试封装好的 Ajax

  • 使用 index.js 暴露的 getJSON() 进行测试。
  • 测试成功状态。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试封装好的 Ajax</title>
  </head>
  <body>
    <script type="module">
      import { ajax, get, getJSON, post } from './ajax/index.js';

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const p = getJSON(url, {
        params: { username: 'alex' },
        data: { age: 18 }
      });

      const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;

      p.then(repsonse => {
        console.log(repsonse);
      }).catch(err => {
        switch (err.type) {
          case ERROR_HTTP_CODE:
            console.log(err.text);
            break;
          case ERROR_REQUEST:
            console.log(err.text);
            break;
          case ERROR_TIMEOUT:
            console.log(err.text);
            break;
          case ERROR_ABORT:
            console.log(err.text);
            break;
        }
      });
    </script>
  </body>
</html>

  • 测试HTTP_CODE异常。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试封装好的 Ajax</title>
  </head>
  <body>
    <script type="module">
      import { ajax, get, getJSON, post } from './ajax/index.js';

      // 当前目录下没有 hello.html
      const url = './hello.html';

      const p = getJSON(url, {
        params: { username: 'alex' },
        data: { age: 18 }
      });

      const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;

      p.then(repsonse => {
        console.log(repsonse);
      }).catch(err => {
        switch (err.type) {
          case ERROR_HTTP_CODE:
            console.log(err.text);
            break;
          case ERROR_REQUEST:
            console.log(err.text);
            break;
          case ERROR_TIMEOUT:
            console.log(err.text);
            break;
          case ERROR_ABORT:
            console.log(err.text);
            break;
        }
      });
    </script>
  </body>
</html>

  • 测试请求异常。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试封装好的 Ajax</title>
  </head>
  <body>
    <script type="module">
      import { ajax, get, getJSON, post } from './ajax/index.js';

      // 输入错误的请求地址
      const url = 'https://www.iiiimooc.com/api/http/search/suggest?words=js';

      const p = getJSON(url, {
        params: { username: 'alex' },
        data: { age: 18 }
      });

      const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;

      p.then(repsonse => {
        console.log(repsonse);
      }).catch(err => {
        switch (err.type) {
          case ERROR_HTTP_CODE:
            console.log(err.text);
            break;
          case ERROR_REQUEST:
            console.log(err.text);
            break;
          case ERROR_TIMEOUT:
            console.log(err.text);
            break;
          case ERROR_ABORT:
            console.log(err.text);
            break;
        }
      });
    </script>
  </body>
</html>

  • 测试请求超时。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试封装好的 Ajax</title>
  </head>
  <body>
    <script type="module">
      import { ajax, get, getJSON, post } from './ajax/index.js';

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const p = getJSON(url, {
        params: { username: 'alex' },
        data: { age: 18 },
        timeoutTime: 10
      });

      const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;

      p.then(repsonse => {
        console.log(repsonse);
      }).catch(err => {
        switch (err.type) {
          case ERROR_HTTP_CODE:
            console.log(err.text);
            break;
          case ERROR_REQUEST:
            console.log(err.text);
            break;
          case ERROR_TIMEOUT:
            console.log(err.text);
            break;
          case ERROR_ABORT:
            console.log(err.text);
            break;
        }
      });
    </script>
  </body>
</html>

  • 测试请求中止。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试封装好的 Ajax</title>
  </head>
  <body>
    <script type="module">
      import { ajax, get, getJSON, post } from './ajax/index.js';

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const p = getJSON(url, {
        params: { username: 'alex' },
        data: { age: 18 },
      });
      p.xhr.abort();

      const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;

      p.then(repsonse => {
        console.log(repsonse);
      }).catch(err => {
        switch (err.type) {
          case ERROR_HTTP_CODE:
            console.log(err.text);
            break;
          case ERROR_REQUEST:
            console.log(err.text);
            break;
          case ERROR_TIMEOUT:
            console.log(err.text);
            break;
          case ERROR_ABORT:
            console.log(err.text);
            break;
        }
      });
    </script>
  </body>
</html>

小豪boy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax封装实例代码
11-04
Ajax封装则是将常见的Ajax操作进行模块化处理，方便开发者在项目中快速、高效地实现数据交互。本篇文章将深入探讨Ajax封装实例代码及其相关知识点。 首先，我们来看Ajax的核心原理：通过JavaScript创建...
原生与封装Ajax
weixin_53903929的博客
12-27 1597
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术Ajax 是一种用于创建快速动态网页的技术Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
异步编程Ajax的详解，并对其进行封装整理
热门推荐
零一的博客
10-12 2万+
对于Ajax，肯定很多小伙伴都听过甚至用过了，那么没听过的也不用着急，本文会对Ajax进行讲解，其次，一定还有一些人只用过JQuery封装好了的Ajax却对原生的Ajax并不了解，那么也不用着急，本文从最基本的Ajax开始讲起，然后最后会尽可能得模仿JQuery对其进行封装，让我刚才提到的两类人能对Ajax有进一步的了解。 公众号：Lpyexplore的编程小屋 关注我，不定时更新前端面试题 关注还有更多电子书、前端面试题、数据结构与算法代码等你来拿 异步编程——Ajax一、什么是Ajax二、Ajax的
2024年前端最新异步编程Ajax的详解，并对其进行封装整理，面试训练app
最新发布
2401_84619606的博客
05-14 893
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
ajax介绍
玖尘的博客
03-03 382
前言：在前端技术不断进步的同时，前端的技术栈更新也是与时俱进。从之前的jquery到现在前端三巨头（Vue, React, Angelar）,再到现在大前端趋势下，前端越来越显得重要了。 在这其中前端不可绕过的Javascript网络请求更是伴随着前端技术迭代的脚步，这篇文章我们就来学习一下 -Javascript 网络请求。 一、ajax介绍 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，...
什么是Ajax？封装
weixin_61434466的博客
03-30 1148
1.什么是ajax AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应 ⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚ 原理 Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后 ⽤ JavaScript 来操作 DOM ⽽更新⻚⾯ 实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤： 创建 Ajax 的.
封装Ajax请求以及Vuex实现模块化管理
weixin_47936649的博客
08-03 283
封装Ajax请求以及Vuex实现模块化管理
ajax的封装
m0_45884629的博客
11-01 1965
ajax的封装
自己实现ajax封装示例分享
09-04
自己实现ajax封装示例分享 在前端开发中，Ajax 是一种非常重要的技术，能够实现在页面不刷新的情况下更新页面的内容。今天，我们将要分享一个自己实现的 Ajax 封装示例，帮助大家更好地理解和使用 Ajax。 Ajax ...
AJAX封装类使用指南
10-25
AJAX 封装类使用指南 AJAX 封装类是一种 JavaScript 库，用于简化 AJAX 请求的使用。AJAX（Asynchronous JavaScript and XML）是一种异步请求技术，允许网页在不刷新页面的情况下，向服务器请求数据。使用 AJAX ...
ajax:一个ajax封装实现
05-16
这里的"一个Ajax封装实现"可能就是对`XMLHttpRequest`对象进行了抽象和简化，创建了一个易于使用的函数或类库。 **Ajax的基本流程**： 1. **创建XMLHttpRequest对象**：在所有现代浏览器中，都可以通过`new ...
ajax封装函数
08-01
对ajax基础的封装
原生AJAX封装的简单实现
10-21
下面小编就为大家带来一篇原生AJAX封装的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原生js的AJAX封装以及实例展示.zip
07-25
这个压缩包"原生js的AJAX封装以及实例展示.zip"包含了对AJAX的简单封装以及一个具体的增删改查（CRUD）操作实例，这将帮助我们深入理解如何在实际项目中应用AJAX。 首先，让我们了解一下AJAX的基本原理。AJAX的核心...
对jquery的ajax封装
05-03
对常用jquery的ajax函数进行封装，便于调用，会有不同错误的错误提醒
javascript实现简单的ajax封装示例
10-20
主要介绍了javascript实现简单的ajax封装功能,结合实例形式分析了ajax基本功能与操作实现技巧,需要的朋友可以参考下
【Ajax】封装方法
Ma_Zhen_的博客
11-03 244
优化代码：Ajax封装与使用方法
Ajax的封装——Axios与jQuery
pro1822的博客
04-23 2905
Ajax的封装——Axios与jQuery
jquery ajax封装
09-14
jQuery的ajax封装主要分为三个步骤。首先，需要引入jQuery库。然后，通过代码实例来讲解。最后，根据代码注释来理解封装过程。 具体来说，封装的步骤如下： 1. 第一步：引入jQuery库。用户需要在页面中引入jQuery...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值