用JS写的一个Ajax库(实例代码)


Posted in Javascript onAugust 06, 2016

myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单。

一、发送GET请求:

myajax.get({
<span style="white-space:pre">	</span>data: {}, //参数
	url: "", //请求地址
	//发生错误是调用
	error: function(data) {
	},
	//请求成功调用
	success: function(data){		
<span style="white-space:pre">	</span>//eval(data); 将字符串转换成json
	}
});

二、发送POST请求:

myajax.post({
	data: {}, //参数
	url: "", //
	//发生错误是调用
	error: function(data) {
	},
	//请求成功调用
	success: function(data){
	//eval(data); 将字符串转换成json
	}
});

三、发送JSONP请求:

myajax.getJSONP({
//参数
data: {
},
url: "", //请求地址
//请求成功调用
success: function(data) {
},
//发生错误时调用
error: function() {
}
});

源码:

var myajax = {

	post: function(params){
		var xmlhttp = this.createXMLHttpRequest();
		if (xmlhttp != null)
		{
			var async = true;
			if (typeof params.async != "undefined")
				async = params.async;
			var data = null;
			if (typeof params.data != "undefined")
				data = params.data;
			var url = "";
			if (typeof params.url != "undefined")
				url = params.url;
			if (url == null || url.length == 0)
				return;
			xmlhttp.open("POST", url, async);
			if (async){
				xmlhttp.onreadystatechange = function(){
				
					if (this.readyState==4){
						if (this.status==200){

							if (typeof params.success != "undefined") {
								params.success(xmlhttp.responseText);
							}
						}
						else {
							if (typeof params.error != "undefined") {
								params.error(xmlhttp.status + xmlhttp.statusText);
							}
							console.error(url + ": " + xmlhttp.status);
						}
					}
				};
			}
			
			xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var param = "";
			for (var prop in data) {
				param += prop + "=" + data[prop] + "&";
			}
			param = param.substring(0, param.length - 1);
			xmlhttp.send(param);
			if (!async) {
				
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
		
					if (typeof params.success != "undefined") {
						params.success(xmlhttp.responseText);
					}
				else {
					if (typeof params.error != "undefined") {
						params.error(xmlhttp.status + xmlhttp.statusText);
					}
					console.error(url + ": " + xmlhttp.status);
				}
				
			}
		}
	},
	get: function(params){
		var xmlhttp = this.createXMLHttpRequest();
		if (xmlhttp != null)
		{
			var async = true;
			if (params.async != undefined)
				async = params.async;
			var url = "";
			if (params.url != undefined)
				url = params.url;
			if (url == null || url.length == 0)
				return;
			if (params.data != null) {
				var data = params.data;
				var paramPrefix = url.indexOf("?") == -1 ? "?" : "&";
		
				url = url + paramPrefix;
				for (var prop in data) {
					url += prop + "=" + data[prop] + "&";
				}
				url = url.substring(0, url.length - 1);
			}
			xmlhttp.open("GET", url, async);
			if (async){
				xmlhttp.onreadystatechange = function(){
					if (this.readyState==4){
						if (this.status==200){
							if (typeof params.success != "undefined") {
								params.success(xmlhttp.responseText);
							}
						}
						else {
							if (typeof params.error != "undefined") {
								params.error(xmlhttp.status + xmlhttp.statusText);
							}
							console.error(url + ": " + xmlhttp.status);
						}
					}
				};
			}

			xmlhttp.send(null);
			if (!async) {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
					if (typeof params.success != "undefined") {
						params.success(xmlhttp.responseText);
					}
				else {
					if (typeof params.error != "undefined") {
						params.error(xmlhttp.status + xmlhttp.statusText);
					}
					console.error(url + ": " + xmlhttp.status);
				}
						
				
			}
		}
	},
	createXMLHttpRequest: function(){
		if (window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
		//code for IE5 and IE6
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		return null;
	},
	getJSONP: function(params) {

		var url = null;
		if (typeof params.url != "undefined") {
			url = params.url;
		}
		if (url == null) {
			return;
		}
		
		var ff = "" + new Date().getTime() + (parseInt(Math.random() * 10000000000));
		eval("jsonpCallback_" + ff + "=" + function(data){
	
			if (typeof params.success != "undefined") {
				params.success(data);
			}
		});

		//根据url中是否出现过 "?" 来决定添加时间戳参数时使用 "?" 还是 "&" 
		var paramPrefix = url.indexOf("?") == -1 ? "?" : "&";

		url = url + paramPrefix + "jsonpCallback=" + "jsonpCallback_" + ff;
		var param = "";

		if (typeof params.data != "undefined" && params.data != null) {
		
			var data = params.data;
			for (var prop in data) {
				param += prop + "=" + data[prop] + "&";
			}
			param = param.substring(0, param.length - 1);
		}
		if (param.length > 0)
		url = url + "&" + param; 
		var script = document.createElement("script"); 
		document.body.appendChild(script); 
		script.src = url; 
		script.charset ="UTF-8";
		// for firefox, google etc.
		script.onerror = function() {
			if (typeof params.error != "undefined") {
				params.error();
			}
			
	 	}
		script.onload = function() {

		document.body.removeChild(script); 
		} 
		// for ie 
		script.onreadystatechange = function() { 
		  if (this.readyState == "loaded" || this.readyState == "complete") { 
		    document.body.removeChild(script);
		  } 
		}
	}

};

以上这篇用JS写的一个Ajax库(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
vue的基本用法与常见指令
Aug 15 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
使用JavaScript破解web
Sep 28 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 #Javascript
JS获取和修改元素样式的实例代码
Aug 06 #Javascript
原生js获取元素样式的简单方法
Aug 06 #Javascript
浅析Node.js实现HTTP文件下载
Aug 05 #Javascript
JS中对Cookie的操作详解
Aug 05 #Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 #Javascript
js实现精确到毫秒的倒计时效果
Aug 05 #Javascript
You might like
php Try Catch异常测试
2009/03/01 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
网上抓的一个特效
2007/05/11 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
学python安装的软件总结
2019/10/12 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
汽车广告策划方案
2014/05/31 职场文书
现役军人家属慰问信
2015/03/24 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书