Ajax的封装及使用

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

封装好后ajax的具体使用

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

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

工具模块utils

默认参数模块defaults

常量模块

源文件地址

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

 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进行操作我们就需要先判断加？还是&，调用我们的addparam方法！xhr.open(this.options.method, this.url + this.addparam(), true);//  调用我们下面定义的设置请求类型方法this.setResponseType();// 调用serCookie方法用来设置是否允许跨域携带cookiethis.setCookie();// 调用setTime方法用来设置请求事件this.setTime();// 调用sendData方法用来发送数据this.sendData();};// 定义我们用来表示状态的方法okok() {const xhr = this.xhr;return (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304;};bindEvents() {const xhr = this.xhr;// 使用es6中的解构赋值方法从options中解构出我们需要使用的方法const { success, error, httpCodeError, abort, timeout } = this.options;xhr.addEventListener('load', () => {// 当xhr正常加载的时候,使用if判断xhr的状态// xhr的状态码可以在200-299之间或者等于304的时候我们算作正常状态调用success方法，如果不是的话即代表xhr的状态不正确我们调用httpCodeError方法来查看xhr的错误状态// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {//     // 调用我们解构出来的success方法//     success(xhr.response, xhr);// } else {//     httpCodeError(xhr.status, xhr);// };// 我们可以将xhr状态正常的情况单独抽离出去,看起来整洁一些// 调用方法ok，如果结果为true即代表状态正常if (this.ok()) {// 调用我们解构出来的success方法success(xhr.response, xhr);} else {httpCodeError(xhr.status, xhr)}}, false);// false表示在冒泡阶段执行// 监听到哪个事件，触发哪个事件的方法，我们之前已经将五个方法从options中解构出来了！xhr.addEventListener('error', () => {error(xhr);}, false);xhr.addEventListener('abort', () => {abort(xhr);}, false);xhr.addEventListener('timeout', () => {timeout(xhr);}, false);};// 使用if判断请求头数据是否存在，如果请求头数据存在我们调用addUrlDataaddparam() {const { params } = this.options;if (!params) return "";return addUrlData(this.url)};// 设置文本的响应类型setResponseType() {// 将xhr对象的响应类型赋值为参数中的对应值this.xhr.responseType = this.options.responseType;};// 设置是否携带cookiesetCookie() {// 将xhr对象的是否携带cookie赋值为参数中的对应值this.xhr.withCredentials = this.options.withCredentials;};// 设置超时时间setTime() {// 将xhr对象的响应时间赋值为参数中的对应值this.xhr.timeout = this.options.timeoutTime;};// 用来发送data数据sendData() {// 将data从参数中解构出来const { data } = this.options;const xhr = this.xhr;// 调用isSendData来判断是否发送数据if (!this.isSendData()) {return xhr.send(null);};// 定义一个变量resultData用来存放数里后的数据let resultData = null;// 使用if配合isFormData方法来判断是否为FormDataif (this.isFormData()) {resultData = data;} else if (this.isFormUrlEncodedData()) {// isFormUrlEncodedData方法来判断this.setContentType(CONTENTTYPEURL);// 如果判断为真则调用我们在工具函数中定义的serialize方法对数据进行处理并赋值给resultDataresultData = serialize(data);} else if (this.isJsonData()) {// isJsonData方法来判断this.setContentType(CONTENTTYPEjson);// 如果判断为真则调用我们在工具函数中定义的serializeJson方法对数据进行处理并赋值给resultDataresultData = serializeJson(data);} else {// 对其它类型的数据不进行处理resultData = data;}// 最后使用send将处理好的resultData发送出去xhr.send(resultData);};// 用来判断是否需要发送Data数据isSendData() {// 将data和method从options中解构出来const { data, method } = this.options;// 使用if进行判断如果判断为真则之间返回，否则返回true即需要发送data数据if (!data) return "";if (method.toLocaleLowerCase() === GET.toLowerCase()) return "";return true;};// 判断是否为FormData对象isFormData() {return this.options.data instanceof FormData;};isFormUrlEncodedData() {return this.options.contentType.toLowerCase().includes(CONTENTTYPEURL);};isJsonData() {return this.options.contentType.toLowerCase().includes(CONTENTTYPEjson);};setContentType(contentType = this.options.contentType) {if (!contentType) return;this.xhr.setRequestHeader('Content-Type', contentType)};// 通过getXhr方法获取xhrgetXHR() {return this.xhr;}
};

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

import { Ajax } from './ajax.js';
import { ERROR_HTTP_CODE, ERROR_HTTP_CODE_TEXT, ERROR_REQUEST, ERROR_REQUEST_TEXT, ERROR_TIMEOUT, ERROR_TIMEOUT_TEXT, ERROR_ABORT, ERROR_ABORT_TEXT } from "./constants.js";
export const ajax = (url, options) => {// 实例化Ajax并且获取xhr// 实例化xhr对象let xhr;
//使用promise再次进行改造升级const p = new Promise((resolve, reject) => {xhr = new Ajax(url, {...options,... {success(response) {// 当ajax成功的时候执行resolveresolve(response);}, httpCodeError(status) {reject({type: ERROR_HTTP_CODE,text: ERROR_HTTP_CODE_TEXT `:${status}`,})}, error(err) {reject({type: ERROR_REQUEST,text: ERROR_REQUEST_TEXT,})}, timeout() {reject({type: ERROR_TIMEOUT,text: ERROR_TIMEOUT_TEXT,})}, abort() {reject({type: ERROR_ABORT,text: ERROR_ABORT_TEXT,})}}}).getXHR();});p.xhr = xhr;p.ERROR_ABORT = ERROR_ABORT;p.ERROR_REQUEST = ERROR_REQUEST;p.ERROR_TIMEOUT = ERROR_TIMEOUT;p.ERROR_HTTP_CODE = ERROR_HTTP_CODE;return p;
};
export const get = (url, options) => {return ajax(url, {...options, method: "GET" });
};
export const getJSON = (url, options) => {return ajax(url, {...options, method: "GET", responseType: "json" });
};
export const post = (url, options) => {return ajax(url, {...options, method: "POST" });
};

工具模块utils

export const serialize = param => {// 数据序列化字符串const results = [];// 使用for of循环,使用Object.entries将对象转为可遍历的数组for (const [key, value] of Object.entries(param)) {// 将获取到的key和value进行编码使用数组的push方法results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);};// 通过join方法将数组转为字符串并且使用&进行切割return results.join("&");
};
// 转为json格式
export const serializeJson = param => {return JSON.stringify(param)
};
// 用于网址添加
export const addUrlData = (url, data) => {if (!data) return "";const mark = url.includes("?") ? ":" : "?";return `${mark}${data}`
}

默认参数模块defaults

 import { GET, CONTENTTYPEURL } from "./constants.js"export const DEFAULTS = {method: GET,params: null,data: null,contentType: CONTENTTYPEURL,responseType: "",timeoutTime: 0,withCredentials: false,success() {},httpCodeError() {},error() {},abort() {},timeout() {},}

常量模块

export const GET = 'GET';
export const POST = 'POST';
export const CONTENTTYPEURL = 'application/x-www-form-urlencoded';
export const CONTENTTYPEjson = 'application/json';
export const ERROR_HTTP_CODE = 1;
export const ERROR_HTTP_CODE_TEXT = "HTTP状态码异常";
export const ERROR_REQUEST = 2;
export const ERROR_REQUEST_TEXT = "请求被阻止";
export const ERROR_TIMEOUT = 3;
export const ERROR_TIMEOUT_TEXT = "请求超时";
export const ERROR_ABORT = 4;
export const ERROR_ABORT_TEXT = "请求终止";

源文件地址

链接：https://pan.baidu.com/s/1Y9TlUxT_Y0o1bj9K_YR3RA
提取码：aaaa

Ajax的封装及使用相关推荐

ajax 加载提示锁屏,js锁屏解屏通过对$.ajax进行封装实现
jquery插件源码: /** * 对jquery中$.ajax进行封装,以便加入锁屏功能 * isAsync 是否为异步请求,默认为true * isLock 是否锁屏,默认是true * isCa ...
Vue的axios与ajax的区别：axios是对ajax的封装
分析 axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样. ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装. axios是ajax ...
js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）...
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递二.js进阶ajax函数封装 ajax1.js 1 function ajax( ...
jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...
Ajax及封装Ajax详解
首先说道ajax必须要知道JSON,不会JSON的,请点击. Ajax 说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术. ajax的应用场景有:(地图)实时更新,表单验证等 ...
关于Ajax原生封装
接上文,我们已经对原生的Ajax有了一个基础的了解,但是在我们日常工作中,不可能每次需要用到时在用原生写一遍,所以本文针对后续工作需要,对Ajax进行封装,主要演示其封装过程,便于理解其中原理. 1. ...
jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){/*** ...
ajax json 封装,Ajax--json（Ajax调用返回json封装代码、格式及注意事项）
Ajax调用json封装代码: //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="mydb") { //定义数据 ...
AJAX之封装+跨域
AJAX5步法先简单回顾下之前所说的5步法 1.创建异步对象XMLHttpRequest /* 1.创建 XMLHttpRequest一步对象*/var xhr;if (window.XMLHttp ...

Ajax的封装及使用

封装好后ajax的具体使用

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

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

工具模块utils

默认参数模块defaults

常量模块

源文件地址

Ajax的封装及使用相关推荐

最新文章

热门文章