用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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
js数组去重的方法总结
Jan 18 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
yii的CURD操作实例详解
2014/12/04 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
javascript关于继承解析
2016/05/10 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
Python交换变量
2008/09/06 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
学习python需要有编程基础吗
2020/06/02 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
会展中心部门工作职责
2013/11/27 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
生日宴会主持词
2014/03/20 职场文书
学校安全生产承诺书
2014/05/23 职场文书
推广普通话标语
2014/06/27 职场文书
企业培训简报范文
2015/07/20 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS