javascript实现ajax请求基本功能

基于考虑jquery太大了，其中ajax部分也占了不少体积的原因，所以还是自己来写个简单的类库，今天花了点时间，加上实现ajax请求模块，实现简单get、post提交、form表单提交功能：

	// ajax--start
	/**
	 * 实例化XmlHttpRequest的方法<br />
	 * 
	 * 返回对象具有如下属性：<br />
	 * responseBody 将回应信息正文以unsigned byte数组形式返回.只读<br />
	 * responseStream 以Ado Stream对象的形式返回响应信息.只读<br />
	 * responseText 将响应信息作为字符串返回.只读<br />
	 * responseXML 将响应信息格式化为Xml Document对象并返回，只读<br />
	 * status 返回当前请求的http状态码.只读<br />
	 * statusText 返回当前请求的响应行状态，只读<br />
	 * 
	 * 返回对象具有如下方法：<br />
	 * abort 取消当前请求<br />
	 * getAllResponseHeaders 获取响应的所有http头<br />
	 * getResponseHeader 从响应信息中获取指定的http头<br />
	 * open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)<br />
	 * send 发送请求到http服务器并接收回应<br />
	 * setRequestHeader 单独指定请求的某个http头
	 */
	var initXmlHttpRequest = window.ActiveXObject ?
	/*
	 * Microsoft failed to properly implement the XMLHttpRequest in IE7 (can't
	 * request local files), so we use the ActiveXObject when it is available
	 * Additionally XMLHttpRequest can be disabled in IE7/IE8 so we need a
	 * fallback.
	 */
	function() {
		if (window.location.protocol !== "file:") {
			try {
				return new window.XMLHttpRequest();
			} catch (xhrError) {
			}
		}

		try {
			return new window.ActiveXObject("MSXML2.XMLHTTP");// Msxml2.XMLHTTP是高版本,受msxml3.dll+支持
		} catch (activeError_MSXML2_XMLHTTP) {
			try {
				return new window.ActiveXObject("Microsoft.XMLHTTP");// Microsoft.XMLHTTP是低本,一般是msxml2.6以下版本使用
			} catch (activeError_Microsoft_XMLHTTP) {
			}
		}
	} :
	// 其他所有浏览器, 使用标准XMLHttpRequest对象
	function() {
		return new window.XMLHttpRequest();
	};

	var doAjax = function(url, method, callbacks, async) {
		var xhr = false;
		xhr = initXmlHttpRequest();

		if (!xhr)
			return false;

		if (!method || !url || !async)
			return false;
		xhr.open(method, url, async);
		if (method == "POST")
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

		xhr.onreadystatechange = function() {
			/**
			 * readyState 返回当前请求的状态，只读。定义如下：<br />
			 * 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）<br />
			 * 1 (初始化) 对象已建立，尚未调用send方法<br />
			 * 2 (发送数据) send方法已调用，但是当前的状态及http头未知<br />
			 * 3 (数据传送中)已接收部分数据，因为响应及http头不全，
			 * 这时通过responseBody和responseText获取部分数据会出现错误<br />
			 * 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据<br />
			 */
			if (xhr.readyState == 1) {// onLoadingInternal
				if (callbacks.onLoading != null)
					callbacks.onLoading();
			}
			if (xhr.readyState == 2) {// onLoadedInternal
				if (callbacks.onLoaded != null)
					callbacks.onLoaded();
			}
			if (xhr.readyState == 3) {// onInteractiveInternal
				if (callbacks.onInteractive != null)
					callbacks.onInteractive();
			}
			if (xhr.readyState == 4) {// onCompleteInternal
				if (callbacks.onComplete != null)
					callbacks.onComplete();
				if (xhr.status == 200) {
					if (callbacks.onSuccess != null)
						callbacks.onSuccess(xhr.responseText);
				}
			}
		}
		if (method == "POST")
			xhr.send(this.content);
		else
			xhr.send(null);

	};

	// 把form表单格式化为url格式
	var serializeForm = function(form) {
		var els = form.elements;
		var len = els.length;
		var queryString = "";
		this.addField = function(name, value) {
			if (queryString.length > 0) {
				queryString += "&";
			}
			queryString += encodeURIComponent(name) + "=" + encodeURIComponent(value);
		};
		for ( var i = 0; i < len; i++) {
			var el = els[i];
			if (!el.disabled) {
				switch (el.type) {
				case 'text':
				case 'password':
				case 'hidden':
				case 'textarea':
					this.addField(el.name, el.value);
					break;
				case 'select-one':
					if (el.selectedIndex >= 0) {
						this.addField(el.name, el.options[el.selectedIndex].value);
					}
					break;
				case 'select-multiple':
					for ( var j = 0; j < el.options.length; j++) {
						if (el.options[j].selected) {
							this.addField(el.name, el.options[j].value);
						}
					}
					break;
				case 'checkbox':
				case 'radio':
					if (el.checked) {
						this.addField(el.name, el.value);
					}
					break;
				}
			}
		}
		return queryString;
	};

	jMeteor.extend( { ajax : function(options) {
		var ajaxSettings = {};
		for (name in options) {
			ajaxSettings[name] = options[name];
		}

		if (options["form"] != null) {
			var theform = options["form"];
			if (ajaxSettings.url == null)// 如果只定义form，没定义url
				ajaxSettings.url = theform.action + "?" + serializeForm(theform);
			else {// 如果form和url同时定义，则已url为准//如果form和url同时定义，则已url为准
				var s = (ajaxSettings.url.indexOf("?") == -1) ? "?" : "&";
				ajaxSettings.url = ajaxSettings.url + s + serializeForm(theform);
			}

			if (ajaxSettings.type == null)// 如果form和type同时定义，则已url为准//如果form和type同时定义，则已type为准
				ajaxSettings.type = theform.method.toUpperCase();
		}

		ajaxSettings.callbacks = {};
		ajaxSettings.callbacks.onLoading = options['onLoading'];
		ajaxSettings.callbacks.onLoaded = options['onLoaded'];
		ajaxSettings.callbacks.onInteractive = options['onInteractive'];
		ajaxSettings.callbacks.onComplete = options['onComplete'];
		ajaxSettings.callbacks.onSuccess = options['onSuccess'];
		doAjax(ajaxSettings.url, ajaxSettings.type, ajaxSettings.callbacks, true);
	},

	get : function(url, callbacks) {
		return doAjax(url, "GET", callbacks, true);
	},

	post : function(url, callbacks) {
		return doAjax(url, "POST", callbacks, true);
	},

	form : function(form, callbacks) {
		var options = {};
		options["form"] = form;
		for (name in callbacks) {
			options[name] = callbacks[name];
		}
		return jMeteor.ajax(options);
	} });
	// ajax--end

调用方法：

function doAjaxGet() {
	$.get('http://localhost/test/testAjax.do', 
		{onSuccess:function(d) { alert("Success:"+d); }});
}
function doAjaxPost() {
	$.post('http://localhost/test/testAjax.do', 
		{onSuccess:function(d) { alert("Success:"+d); }});
}
function doAjaxForm() {
	$.form(document.searchFrm, 
		{onSuccess:function(d) { alert("Success:"+d); }});
}

function doAjaxAjax() {	
	$.ajax({
	  type: "GET",
	  url: "http://localhost/test/testAjax.do",	  
	  onLoading:function() { alert("Loading"); },
      onLoaded:function() { alert("Loaded"); },
      onInteractive:function() { alert("Interactive"); },
      onComplete:function() { alert("Complete"); },
      onSuccess:function(d) { alert("Success:"+d); }
	});	
}

// 如果form和url同时定义，则已url为准//如果form和url同时定义，则已url为准
// 如果form和type同时定义，则已url为准//如果form和type同时定义，则已type为准
function doAjaxAjaxForm() {	
	$.ajax({
	  type: "GET",
	  url: "http://localhost/test/testAjax.do?a=3",	  
	  form : document.searchFrm,	  
	  onLoading:function() { alert("Loading"); },
      onLoaded:function() { alert("Loaded"); },
      onInteractive:function() { alert("Interactive"); },
      onComplete:function() { alert("Complete"); },
    	onSuccess:function(d) { alert("Success:"+d); }
	});	
}

现在只是实现一些简单功能，以后再改进改进。 :lol: