“ajax封装”目录

ajax.js （Ajax类）

// 工具函数
import { serialize, addURLData, serializeJSON } from './utils.js';// 默认参数
import DEFAULTS from '.defaults.js'class Ajax{constructor(url, options){// options分用户参数、默认参数this.url = url;this.options = Object.assign({}, DEFAULTS, options);// 初始化this.init();}// 初始化init() {const xhr = new XMLHttpRequest();this.xhr = xhr;// 绑定响应事件处理程序this.bindEvents();this.xhr.open(this.options.method, this.url+this.addParam(), true); // true表示异步 // 设置 responseTypethis.setResponseType();// 设置跨域是否携带 cookiethis.setCookie();// 设置超时this.setTimeout();// 发送请求this.sendData();}// 与事件处理有关的都放进来，绑定响应事件处理程序bindEvents(){const xhr = this.xhr;const (success, httpCodeError, error, abort, timeout) = this.options;// loadxhr.addEventListener('load',() => {if (this.ok()) {success(xhr.response, xhr);} else {httpCodeError(xhr.status, xhr);}},false);   // error// 当请求遇到错误时，将触发 error 事件xhr.addEventListener('error',() => {error(xhr);},false);// abortxhr.addEventListener('abort',() => {abort(xhr);},false);// timeoutxhr.addEventListener('timeout',() => {timeout(xhr);},false);}// 检测响应的 HTTP 状态码是否正常ok() {const xhr = this.xhr;return (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304;}// 在地址上添加数据addParam() {const { params } = this.options;if (!params) return '';// 有时候url上面已经带参数，即?words=js;有时候不带参数，要先加?return addURLData(this.url, serialize(params));}// 设置 responseTypesetResponseType() {this.xhr.responseType = this.options.responseType;}// 设置跨域是否携带 cookiesetCookie() {if (this.options.withCredentials) {this.xhr.withCredentials = true;}}// 设置超时setTimeout() {const { timeoutTime } = this.options;if (timeoutTime > 0) {this.xhr.timeout = timeoutTime;}}// 发送请求sendData() {const xhr = this.xhr;if (!this.isSendData()) {return xhr.send(null);}let resultData = null;const { data } = this.options;// 发送 FormData 格式的数据if (this.isFormData()) {resultData = data;} else if (this.isFormURLEncodedData()) {// 发送 application/x-www-form-urlencoded 格式的数据this.setContentType(CONTENT_TYPE_FORM_URLENCODED);resultData = serialize(data);} else if (this.isJSONData()) {// 发送 application/json 格式的数据this.setContentType(CONTENT_TYPE_JSON);resultData = serializeJSON(data);} else {// 发送其他格式的数据this.setContentType();resultData = data;}xhr.send(resultData);}// 是否需要使用 send 发送数据isSendData() {const { data, method } = this.options;if (!data) return false;if (method.toLowerCase() === HTTP_GET.toLowerCase()) return false;return true;}// 是否发送 FormData 格式的数据isFormData() {return this.options.data instanceof FormData;}// 是否发送 application/x-www-form-urlencoded 格式的数据isFormURLEncodedData() {return this.options.contentType.toLowerCase().includes(CONTENT_TYPE_FORM_URLENCODED);}// 是否发送 application/json 格式的数据isJSONData() {return this.options.contentType.toLowerCase().includes(CONTENT_TYPE_JSON);}// 设置 Content-TypesetContentType(contentType = this.options.contentType) {if (!contentType) return;this.xhr.setRequestHeader('Content-Type', contentType);}// 获取 XHR 对象getXHR() {return this.xhr;}
}export default Ajax;

default.js （存放默认参数）

// 默认参数
const DEFAULTS = {method: 'GET',// 请求头携带的数据params: null,//params: {//  username: 'jinhuai',//  age: '22'//}// username=jinhuai&age=22// 请求体携带的数据data: null,//data: {//  username: 'jinhuai',//  age: '22'//}// data: FormData数据contentType: 'application/x-www-form-urlencoded',responseType:'',  //默认文本timeoutTime: 0,  // 默认没有超时时间withCredentials: false,// 方法success(){},httpCodeError(){},error(){},abort(){},timeout(){}
};export default DEFAULTS;

utils.js （工具函数）

const serialize = param => {const results = for(const [key, value] of Object.entries(param)){results.push(`${encodeURLComponent(key)}=${encodeURLComponent(value)}`);}// ['username=jinhuai', 'age=22'];return results.join('&');
}// 数据序列化成 JSON 格式的字符串
const serializeJSON = param => {return JSON.stringify(param);
};// 给 URL 添加参数
// www.imooc.com?words=js&
const addURLData = (url, data) => {if (!data) return '';const mark = url.includes('?') ? '&' : '?';return `${mark}${data}`;
};export { serialize, addURLData, serializeJSON };

constants.js

// 常量
export const HTTP_GET = 'GET';
export const CONTENT_TYPE_FORM_URLENCODED = 'application/x-www-form-urlencoded';
export const CONTENT_TYPE_JSON = 'application/json';

index.js

import Ajax from './ajax.js';const ajax = (url, options) => {return new Ajax(url, options).getXHR();
};const get = (url, options) => {return ajax(url, { ...options, method: 'GET' });
};const getJSON = (url, options) => {return ajax(url, { ...options, method: 'GET', responseType: 'json' });
};const post = (url, options) => {return ajax(url, { ...options, method: 'POST' });
};export { ajax, get, getJSON, post };

导入

<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 url = 'https://www.iimooc.com/api/http/search/suggest?words=js';// const url = './414.html';const xhr = ajax(url, {method: 'GET',params: { username: 'alex' },data: {age: 18},responseType: 'json',// timeoutTime: 10,success(response) {console.log(response);},httpCodeError(err) {console.log('http code error', err);},error(xhr) {console.log('error', xhr);},abort(xhr) {console.log('abort', xhr);},timeout(xhr) {console.log('timeout', xhr);}
});xhr.abort();
</script>

【仿旅游网站】Ajax封装相关推荐

【仿旅游网站】使用Promise改造封装好的Ajax
文章目录修改文件 index.js constants.js 导入修改文件 index.js import Ajax from './ajax.js'; // 常量 import {ERROR_H ...
仿途风网旅游网站/爱讯.NET程序敏捷开发框架
技术特点: 本系统采用PETSHOP抽象工厂三层架构,数据库兼容SQL SERVE 2008及Oracle等数据库,前台采用Jquery+Ajax+JqueryUI,并使用formValidator. ...
HTML期末作业-仿旅游景点介绍网站HTML模板(HTML+CSS+JavaScript)
HTML期末作业-仿旅游景点介绍网站HTML模板(HTML+CSS+JavaScript) 旅游景点介绍网站模板,全套模板,包括首页.历史.风景.旅游.美食.动态.留言.团队介绍.. 效果演示代码实 ...
清新iso7风格-仿格子微酒店触屏版html5手机wap旅游网站模板下载
为什么80%的码农都做不了架构师?>>> 清新iso7风格-仿格子微酒店触屏版html5手机wap旅游网站模板下载说明: 清新iso7风格-仿格子微酒店触屏版html5手机wap旅游 ...
塞北村镇旅游网站设计（论文+PPT+源码）
此处为论文中文题目,要求居中填写主标题不超过24个汉字:可加副标题(副标题前加破折号),副标题与主标题间空一行的位置主标题:黑体,小二,居中副标题:楷体_GB2312,四号,居中阅后删除此文本 ...
【java毕业设计】基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现（毕业论文+程序源码）——村镇旅游网站
基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现,文章末尾 ...
（附源码）node.js游云旅游网站毕业设计231547
云游旅游网站的设计与实现摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题. ...
（附源码）ssm南昌旅游网站管理系统毕业设计 101407
南昌旅游网站管理系统摘要随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需. 南昌旅游网站管理系统设计,主要的模块包括查看首页.公告内容(轮播 ...
ssm基于SSM的南昌旅游网站管理系统设计与实现毕业设计源码101407
南昌旅游网站管理系统摘要随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需. 南昌旅游网站管理系统设计,主要的模块包括查看首页.公告内容(轮播 ...

【仿旅游网站】Ajax封装

文章目录

“ajax封装”目录

ajax.js （Ajax类）

default.js （存放默认参数）

utils.js （工具函数）

constants.js

index.js

导入

【仿旅游网站】Ajax封装相关推荐

最新文章

热门文章

【仿旅游网站】Ajax封装

文章目录

“ajax封装”目录

ajax.js （Ajax类）

default.js （存放默认参数 ）

utils.js （工具函数）

constants.js

index.js

导入

【仿旅游网站】Ajax封装相关推荐

最新文章

热门文章

default.js （存放默认参数）