日期:2014-05-16  浏览次数:20467 次

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