javascript实现ajax请求基本功能
// 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); } }); }
