Ajax的封装及使用

最新推荐文章于 2023-08-12 16:05:07 发布

永年一朵花

最新推荐文章于 2023-08-12 16:05:07 发布

阅读量2.2k

点赞数 5

文章标签： ajax javascript java

本文链接：https://blog.csdn.net/qq_55791710/article/details/120407783

版权

本文介绍了如何封装Ajax以便于在JavaScript项目中更便捷地使用。通过创建index.js文件，引入工具模块、默认参数模块和常量模块，实现Ajax的简化调用。封装后的Ajax使用更加简便，提高开发效率。

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

ajax 全名 async javascript and XML(异步JavaScript和XML)

封装好后ajax的具体使用

Ajax的具体封装步骤及文件原版

然后我们写一个index.js文件，写一些我们要用到方法

我们在日常的使用中可能都需要写这些东西

 const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== 4) return;
            if ((xhr.status >= 200) & (xhr.status < 300) | xhr.status === 304) {
                console.log(xhr.responseText);
            };
        };
        xhr.open('GET', url, true);
        xhr.send(null);

但是当我们如果我们可以把Ajax封装好的话，那么用起来就比较方便了，付出总有汇报的对吧！

封装好后ajax的具体使用

import {get, getJSON, post, ajax } from "./index.js";
const url = "http://www.mmd.com/api/http/search/suggest?word=js";
const P = post(url, {
    data: { username: "xg" },
});
P.then(response => {
    console.log(response);
}).catch(err => {
    console.log(err);
});

写起来是不是简单了些许呢！

Ajax的具体封装步骤及文件原版

// 接收我们定义默认参数
import { DEFAULTS } from "./defaults.js";
// // 接收我们定义好的工具
import { serialize, addUrlData, serializeJson } from "./utils.js";
// // 接收我们定义好的常量
import { GET, CONTENTTYPEjson, CONTENTTYPEURL } from "./constants.js";
// // 定义一个Ajax类并使用export导出
export class Ajax {
    // 使用构造方法constructor，传入两个参数url，options；url用来放地址，options供用户来传入参数
    constructor(url, options) {
        // 将参数url和options放到this上，方便使用
        this.url = url;
        // 使用Object.assign方法将对象合并，defaults用来设置默认参数，options用来供用户传入参数
        this.options = Object.assign({}, DEFAULTS, options);
        // 调用我们下面定义好的init方法进行初始化
        this.init();
    };
    // init方法的定义
    init() {
        // 定义一个常量xhr为实例对象
        const xhr = new XMLHttpRequest();
        // 将常量xhr放到this上，方便我们的使用
        this.xhr = xhr;
        // 对我们定义好的常量xhr进行事件监听
        //  将我们定义好的事件监听方法放到bindEvent方法中
        this.bindEvents();
        // 调用xhr的open方法进行发送前的准备
        // 首先我们需要对请求方法进行判断，如果说是post请求方法的话使用send，不需要对url进行操作，如果是get方法的话就需要通过请求头操作了
        // 如果我们需要对url进行操作我们就需要先判断加？还是&，调