封装原生ajax（缓存+xhr单例）

最新推荐文章于 2024-04-11 15:18:10 发布
最新推荐文章于 2024-04-11 15:18:10 发布
阅读量863 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30114149/article/details/79419600
版权 
<!DOCTYPE html>
<html>
<head>
	<title>封装原生的ajax</title>
</head>
<body>
<script type="text/javascript">
	function XAjaxRequester(bool) {
		this.openTempData = ( typeof bool === "boolean") ? bool : true;  //  是否采用缓存
		this.tempSaveData = {};  //为了加入缓存
		this.XHR = this.creareXMLHttpRequest();
	}
	XAjaxRequester.prototype = {
		creareXMLHttpRequest: function () {
			var request = false;
				return function () {
					if (!request) {
						//  一般先判断非IE浏览器
						//  window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
						if (window.XMLHttpRequest) {
							request = new XMLHttpRequest();  //  非IE以及IE7，IE8以上浏览器
						} else if (window.ActiveXobject) {
							var versions = ['Microsoft.XMLHTTP',
		                                         'MSXML.XMLHTTP',
		                                         'Msxml2.XMLHTTP.7.0',
		                                         'Msxml2.XMLHTTP.6.0',
		                                         'Msxml2.XMLHTTP.5.0', 
		                                         'Msxml2.XMLHTTP.4.0', 
		                                         'MSXML2.XMLHTTP.3.0', 
		                                         'MSXML2.XMLHTTP'];//各种IE浏览器创建Ajax对象时传递的参数
		                                        for(var i=0; i<versions.length; i++){
			                                    try{
			                                         request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同
			                                    }catch(e){
			                                         request=false;
			                                    }
		                	                }
		         		        }
					}
					return request;
				}
		}(),
		get: function (url, data, successCallBack, failureCallBack) {  //  包含参数的url
			var _self = this;
			//  请求数据，至少请求三次
			if (typeof data == "object") {
				url = this.encodeGetData(url, data);
			} else {
				console.error('传入参数格式错误！需要传入对象参数！');
				return;
			}
			var sendCount = 0;
			var xhr = this.XHR;
			xhr.onreadystatechange = function () {
				if (this.readyState == 4) {
					if ((this.status >= 200 && this.status < 300) || this.status == 304) {
						//  var res = JSON.parse(this.responseText);
                    	var res = this.responseText;
                    	if (typeof successCallBack == "function") {
                    		successCallBack(res);
                    		_self.tempSaveData[url] = res;  //  加入缓存
                    	}
					} else {
						if (++sendCount < 3) {  //  额外请求2次作为请求的补充
							xhr.open("get", url, true);
							xhr.send(null);
						} else {
							if (typeof failureCallBack == "function") {
								failureCallBack();
							}
						}
					}
				}
			};
			if (this.openTempData && this.tempSaveData[url]) {
				data = this.tempSaveData[url];
				successCallBack(data);
			} else {
				xhr.open("get", url, true);
				xhr.send(null);
			}
		},
		post: function (url, data, successCallBack, failureCallBack) {
			var xhr = this.XHR;
			xhr.onreadystatechange = function () {
				if (this.readyState == 4) {
					if ((this.status >= 200 && this.status < 300 || this.status == 304)){
						if (typeof successCallBack == "function") {
							successCallBack(this.responseText);
						}
					} else {
						if (typeof failureCallBack == "function") {
							failureCallBack();
						}
					}
				}
			};
			data = this.encodePostData()
			xhr.open("post", url, true);
			xhr.setRequestHeader("Content-Type", "mutipart/form-data");
			xhr.send(data);
		},
		//  ajax中get请求参数encode处理
		encodeGetData: function (urlStr, dataObject) {
			for (var prop in dataObject) {
				var encodeProp = encodeURIComponent(prop);
				var encodeValue = encodeURIComponent(dataObject[prop]);
				urlStr += (urlStr.indexOf("?") == -1 ? "?" : "&");
				var dataStr = encodeProp + '=' + encodeValue;
				urlStr += dataStr;
			}
			return urlStr;
		},
		//  ajax post请求参数处理
		encodePostData: function (dataObj) {
			var urlStr = '';
			for (var prop in dataObj) {
				var property = encodeURIComponent(prop);
				var value = encodeURIComponent(dataObj[prop]);
				urlStr += property + "=" + value + "&"
			}
			urlStr = urlStr.slice(0, urlStr.length - 1);
			return urlStr;
		}
	};
	//  创建浏览器的ajax请求对象(如果不需支持IE低版本，可去掉)
	// function creareXMLHttpRequest () {
	// 		var request = false;
	// 		//  一般先判断非IE浏览器
	// 		//  window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
	// 		if (window.XMLHttpRequest) {
	// 			request = new XMLHttpRequest();  //  非IE以及IE7，IE8以上浏览器
	// 			if (request.overrideMimeType) {
	// 				request.overrideMimeType("type/xml");  //  重置mime类型
	// 				//  window对象中有ActiveXobject属性存在就是IE浏览器的低版本
	// 			} else if (window.ActiveXobject) {
	// 				var versions = ['Microsoft.XMLHTTP',
 //                       'MSXML.XMLHTTP',
 //                       'Msxml2.XMLHTTP.7.0',
 //                       'Msxml2.XMLHTTP.6.0',
 //                       'Msxml2.XMLHTTP.5.0', 
 //                       'Msxml2.XMLHTTP.4.0', 
 //                       'MSXML2.XMLHTTP.3.0', 
 //                       'MSXML2.XMLHTTP'];//各种IE浏览器创建Ajax对象时传递的参数
 //                    for(var i=0; i<versions.length; i++){
	//                     try{
	//                          request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同
	//                        if(request){
	//                              return request;
	//                          }
	//                     }catch(e){
	//                          request=false;
	//                     }
 //                	}
 //         		}
 //         		return request;
	// 		}
	// }
	//  请求用法
	var a = new XAjaxRequester();
	a.get('/url', {name: 'yzs', age: 12}, function (res) {
		//成功回调
	}, function (res) {
		//  失败回调
	});
</script>
</body>
</html>

、

愤怒的小青春
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
原生xhr对象请求 ，数据交换， json 以及axios的概念及应用
m0_66430536的博客
01-19 1639
原生xhr对象请求 ，数据交换， json 以及axios的概念及应用
使用原生js写ajax实例(推荐)
10-19
以下是一个使用原生JS封装的AJAX函数的详细解释。 首先，我们需要创建一个`createXHR()`函数，用于创建兼容不同浏览器版本的XMLHttpRequest对象。在非IE6浏览器中，我们可以直接创建新的XMLHttpRequest对象。对于IE...
xhr简单封装ajax
weixin_小白鼠的博客
04-18 352
xhr简单封装ajax // 设置默认值 const defaults = { type: "get", url: "", async: true, data: {}, header: { ​ "Content-Type": "application/x-www-form-urlencoded", }, success: function () {}, error: function () {}, }; function dealParams(d
关于在原生js中的几种发送请求的方式，XHR，Fetch ，Axios，EventSource，长连接
最新发布
weixin_72915006的博客
04-11 725
**POST 请求参数传递**：需要将参数作为 send 方法的参数传递，通常需要使用 FormData 对象来构造参数。这些是原生 JavaScript 中常用的几种请求方式以及它们的 GET 和 POST 请求参数传递的方法。- **GET 请求参数传递**：可以直接将参数附加在 URL 后面，形成查询字符串。EventSource不支持自定义配置，如果有可以参考这个。主要是讲fetch的方法。
封装XHR对象
Lz_King的博客
11-28 474
封装XHR对象     function getXhr() {         // 声明XMLHttpRequest对象         var xhr = null;         // 根据浏览器的不同情况进行创建         if (window.XMLHttpRequest) {             // 表示除IE外的其他浏览器          
根据XHR封装一个自己的Ajax
benlalagang的博客
08-03 171
封装自己的AJAX函数
原生xhr
diannengpi2154的博客
01-11 100
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // I...
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
10-17
（2）后端js代码保持不变3、jQuery中的$.ajax()jQuery的$.ajax()方法提供了更为简便的方式来处理Ajax请求，它封装了大部分原生Ajax操作，使得代码更加简洁易读。以下是一个$.ajax()的基本用法示例： $.ajax({ type:...
简单封装Ajax
03-16
【简单封装Ajax】这篇文章主要探讨的是如何在JavaScript中对原生的XMLHttpRequest对象进行简单的封装，以便于在实际开发中更方便地进行异步数据请求。在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种...
第34章 项目1-博客前端：封装库--引入Ajax1
08-03
在本章的学习中，我们将探讨如何在前端项目中封装并引入Ajax技术，以优化与服务器的交互，提高用户体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下更新...
my-ajax-imitate-jq_ajax_JQ_
09-30
下面我们将深入讲解如何封装原生的XMLHttpRequest对象来实现这一目标。 1. **创建自定义函数** 首先，我们需要定义一个函数，例如我们可以命名为`myAjax`。这个函数应该接受与$.ajax()类似的参数，如URL、type...
xhr-cache:使用 Nuxt.js 缓存 api 资源并将其作为静态资源提供
07-24
XHR缓存模块 v3.2.2 缓存 application/json api 资源并将其作为静态资源提供 开始使用 设置 yarn add @dewib/xhr-cache # yarn npm i @dewib/xhr-cache # npm 执照
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
11-24
虽然jquery的较新的api已经很好用了， 但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，减少了ajax请求，多多少少也能帮助我们提高网页的性能。本文介绍我自己关于这两方面问题的做法，欢迎交流和指正。 点击 代码下载 （注：因为用到了ajax，所以不能在file协议下运
关于Ajax原生封装
weixin_67318211的博客
04-13 1380
接上文，我们已经对原生的Ajax有了一个基础的了解，但是在我们日常工作中，不可能每次需要用到时在用原生写一遍，所以本文针对后续工作需要，对Ajax进行封装，主要演示其封装过程，实际工作根据需求封装。 ...
Ajax封装
lihefei_coder的博客
07-11 146
服务器端响应结果XHR 对象属性说明 属性名 说明 responseText ...
Ajax ajax原生-xhr对象的属性和方法、xhr对象的创建
weixin_43294560的博客
12-22 667
Ajax模块在处理网络请求时包括以下四个步骤 创建Xhr对象 构建Xhr对象的属性和方法 发出HTTP请求 通过Xhr对象的方法接收服务器回传的数据 xhr对象属性/方法 onreadystatechange 指向一个回调函数，当页面加载状态发生改变时调用 xhr.onreadystatechange=function(){}; 作用:监听请求是否发送成功 read...
ajax如何封装XHR,JavaScript_用原生JS对AJAX做简单封装的实例代码，首先，我们需要xhr对象。这对 - phpStudy...
weixin_36239866的博客
08-06 337
用原生JS对AJAX做简单封装的实例代码首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");} catch (e1) { try { //非IE浏览器 xhr = new XML...
原生Ajax-封装Ajax
weixin_34150503的博客
09-05 92
一、XMLHTTPRequest 　　Ajax技术核心是XMLHTTPRequest对象（简称XHR），是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。 　　Ajax，是Asynchronout JavaScript+XML的简写。这种技术能够向服务器请求额外的数据而无需卸载/刷新页...
2021.09.13 xhr请求缓存问题
一只白猫罢了
09-13 688
在XMLHttpRequest请求时，浏览器会对比请求与缓存的地址，如果相同就会直接返回上一次的内容，不会重复请求。造成验证码不能更换的问题。 时间戳后缀 　　　　if(url.indexOf("?")>=0){//判断url中是否已经带有参数 url = url + "&t=" + (new Date()).valueOf(); }else{ url = url + "?t=" +
用promise封装原生ajax, 实现axios
06-08
好的，下面是用 Promise 封装原生 Ajax 实现 Axios 的代码： ```javascript function axios(config) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(config.method, config.url, true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject(xhr.statusText); } }; xhr.onerror = function() { reject(xhr.statusText); }; if (config.headers) { Object.keys(config.headers).forEach(function(key) { xhr.setRequestHeader(key, config.headers[key]); }); } var params = config.params; if (params && typeof params === 'object') { params = Object.keys(params).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); } xhr.send(params); }); } ``` 这个函数接受一个配置对象，包含以下属性： - `method`：请求方法，如 `'GET'`、`'POST'` 等。 - `url`：请求地址。 - `headers`：请求头，一个键值对对象，如 `{ 'Content-Type': 'application/json' }`。 - `params`：请求参数，一个键值对对象，如 `{ username: 'john', password: 'doe' }`。 这个函数返回一个 Promise 对象，成功时返回响应数据，失败时返回错误信息。在函数内部，我们使用原生 XMLHttpRequest 对象发送 Ajax 请求，并根据响应状态来决定 Promise 对象的状态。同时，我们也支持设置请求头和请求参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愤怒的小青春

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值