Ajax的封装

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量288 收藏 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封装示例分享
09-04
自己实现ajax封装示例分享 在前端开发中，Ajax 是一种非常重要的技术，能够实现在页面不刷新的情况下更新页面的内容。今天，我们将要分享一个自己实现的 Ajax 封装示例，帮助大家更好地理解和使用 Ajax。 Ajax ...
Ajax 封装
weixin_47505105的博客
03-09 4885
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
Ajax封装
shao_xuan_的博客
02-15 1120
Ajax封装ajax()封装服务器部分JQuery中的Ajax$.get()不带参数的get请求带参数的get请求$.post()不带参数的post请求带参数的post请求$.ajax() ajax()封装 封装ajax()函数的参数对象，包括type请求方式、url请求地址、date请求数据、async异步or同步、success请求成功后处理请求结果的函数。 <!DOCTYPE html> <html lang="en"> <head> <meta c
2024年前端最新异步编程Ajax的详解，并对其进行封装整理，面试训练app
2401_84619606的博客
05-14 899
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
ajax封装（精简篇）
Mark Sheng的博客
12-08 7482
一、什么是Ajax Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。 举个例子，我们去饭店吃饭，然后点了一桌子菜，后来发现其中有一道菜太咸了，因
JS Ajax 封装
wu_2004的博客
09-20 654
Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。
JS实现Ajax封装
qq_46345868的博客
10-26 428
JS实现Ajax的封装
Ajax封装函数
m0_56262017的博客
07-14 375
Ajax封装函数（reAjax.js）
原生js-Ajax封装
boundle_ss的博客
01-12 1373
Ajax 说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有：（地图）实时更新，表单验证等等.... ajax的优缺点： 优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力 缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制） 2.一个Ajax请求多了，也会出现页面加载慢的情况。 ...
ajax封装（两种方式）
前端泡面人
05-06 2102
封装ajax请求的两种方式
ajax封装：get封装方式、post封装方式
YY的博客
11-12 1238
ajax封装：get封装方式、post封装方式
ajax封装，promise封装ajax，axios封装
flhhly的博客
09-09 501
前后端数据交互，前端操作
AJAX封装类使用指南
10-25
AJAX 封装类使用指南 AJAX 封装类是一种 JavaScript 库，用于简化 AJAX 请求的使用。AJAX（Asynchronous JavaScript and XML）是一种异步请求技术，允许网页在不刷新页面的情况下，向服务器请求数据。使用 AJAX ...
html5页面开发源代码（含ajax封装及调用方法）
07-26
提供完整的html5页面开发流程和开发方式，包括html5页面开发代码，含ajax封装方法，以及调用的方式
ajax:一个ajax封装实现
05-16
这里的"一个Ajax封装实现"可能就是对`XMLHttpRequest`对象进行了抽象和简化，创建了一个易于使用的函数或类库。 **Ajax的基本流程**： 1. **创建XMLHttpRequest对象**：在所有现代浏览器中，都可以通过`new ...
快速入门了解Ajax
音符犹如代码的博客
07-25 864
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 649
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 77
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
jquery ajax封装
09-14
jQuery的ajax封装主要分为三个步骤。首先，需要引入jQuery库。然后，通过代码实例来讲解。最后，根据代码注释来理解封装过程。 具体来说，封装的步骤如下： 1. 第一步：引入jQuery库。用户需要在页面中引入jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值