用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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
解析php取整的几种方式
2013/06/25 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
深入理解Node module模块
2018/03/26 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
jupyter实现重新加载模块
2020/04/16 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
员工工作表扬信范文
2014/01/13 职场文书
员工拓展培训方案
2014/02/15 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
电视节目策划方案
2014/05/16 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
房屋买卖协议样本
2014/11/16 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
横空出世观后感
2015/06/09 职场文书
总经理致辞
2015/07/29 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL