用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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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
模仿OSO的论坛(二)
2006/10/09 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
Python阶乘求和的代码详解
2020/02/14 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
安全生产月标语
2014/10/07 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
售后服务质量承诺书
2015/04/29 职场文书
新郎结婚感言
2015/07/31 职场文书
考试后的感想
2015/08/07 职场文书
实用求职信模板范文
2019/05/13 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫