【下载文档:  自己动手封装的 ajax.txt 】

---

自己动手封装的 ajax
以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等等，但都是开源封装好的AJAX框架。从没真正用过纯正的AJAX，故参照prototyp面向对象思想自己封装了一个AJAX框架。希望能给读者参考、帮助、评价。 复制代码 代码如下: /* * 自己封装的ajax * * * @author 姜松 * @version 1.00 $date:2009-07-02 * * history: * */ Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; }; Object.extend(String.prototype, { include: function(pattern) { return this.indexOf(pattern) > -1; }, startsWith: function(pattern) { return this.indexOf(pattern) == 0; }, endsWith: function(pattern) { return this.lastIndexOf(pattern) == (this.length - pattern.length); }, empty: function() { return /^\s*$/.test(this) || this == undefined || this == null; } }); Object.extend(Array.prototype, { each: function(iterator) { try { for (var i = 0, length = this.length; i < length; i++) { iterator(this[i]); } } catch (e) { if (e != 'break') { throw e }; } }, clear: function() { this.length = 0; return this; }, first: function() { return this[0]; }, last: function() { return this[this.length - 1]; }, indexOf: function(object) { for (var i = 0, length = this.length; i < length; i++) { if (this[i] == object) {return i}; } return -1; }, size: function() { return this.length; }, include: function(object) { var found = false; this.each(function(value) { if (value == object) {found = true; throw 'break';} }); return found; } }); function $(element) { if(arguments.length > 1) { for(var i = 0, elements = [], length = arguments.length; i < length; i++) { elements.push($(arguments[i])); } return elements; } if(typeof element == 'string') { element = document.getElementById(element); } return element; }; var ajax = { transport: new Object(), options: new Object(), getTransport: function() { if(window.ActiveXObject) { try { return new ActiveXObject('Msxm12.XMLHTTP'); } catch(e) { try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) {} } } else if(window.XMLHttpRequest) { try { return new XMLHttpRequest(); } catch(e) {} } }, setOptions: function(options) { ajax.options = { method: 'get', asynchronous: true, contentType: 'application/x-www-form-urlencoded', encoding: 'utf-8', parameters: '' }; Object.extend(ajax.options, options); ajax.options.method = ajax.options.method.toUpperCase(); }, request: function(url, options) { ajax.transport = ajax.getTransport(); ajax.setOptions(options); this.method = ajax.options.method; var params = ajax.options.parameters; if (!['GET', 'POST'].include(this.method)) { this.method = 'GET'; } if (this.method == 'GET') { url = ajax.setParameters(url, params); } try { ajax.transport.open(this.method, url, ajax.options.asynchronous); ajax.transport.onreadystatechange = ajax.stateChange; ajax.setRequestHeaders(); this.body = this.method == 'POST' ? params : null; ajax.transport.send(this.body); } catch (e) {} }, stateChange: function() { try { var readyState = ajax.transport.readyState; if(readyState == 4) { var status = ajax.transport.status, transport = ajax, json = ajax.evalJSON(); if(status == 200) { ajax.options['onSuccess'](transport, json); } else { ajax.options['onFailure'](transport, json); } } } catch (e) {} }, setParameters: function(url, params) { if (params && typeof params == 'string') { url += (url.include('?') ? '&' : '?') + params; } else if (params && typeof params == 'object') { for(var param in params) { url += (url.include('?') ? '&' : '?') + param + '=' + params[param]; } } return url; }, setRequestHeaders: function() { var headers = { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/xml, text/xml, text/html, text/javascript, application/javascript, application/json, text/javascript, text/plain, */*', 'If-Modified-Since': 'Thu, 01 Jan 1970 00:00:00 GMT' }; this.method = ajax.options.method; if (this.method == 'POST') { headers['Content-type'] = ajax.options.contentType + (ajax.options.encoding ? '; charset=' + ajax.options.encoding : ''); if (ajax.transport.overrideMimeType && (navigator.userAgent.match(/Gecko\/(\d{4})/) || [0,2005])[1] < 2005) { headers['Connection'] = 'close'; } } for (var name in headers) { ajax.transport.setRequestHeader(name, headers[name]); } }, evalJSON: function() { try { return eval('(' + ajax.transport.responseText + ')'); } catch (e) {} } }; var Form = { serialize: function(element) { var elements = $(element).all; var queryComponents = []; for(var i = 0; i < elements.length; i++) { var parameter = null, method = elements[i].tagName.toLowerCase(); if(['input', 'select', 'textarea'].include(method)) { parameter = Form.Serializers[method](elements[i]); } if(parameter != null && parameter.constructor == Array) { var key = encodeURIComponent(parameter[0]); var value = encodeURIComponent(parameter[1]); queryComponents.push(key + '=' + value); } } return queryComponents.join('&'); }, request: function(options) { var params = this.toQueryParams(options.parameters); options.parameters = this.serialize(this.form); if(params) { options.parameters = options.parameters.concat('&' + params); } if($(this.form).method) { options.method = $(this.form).method; } return new ajax.request($(this.form).action, options); }, toQueryParams: function(params) { var queryComponents = []; if (params && typeof params == 'string') { queryComponents.push(encodeURIComponent(params)); } else if (params && typeof params == 'object') { for(var param in params) { var key = encodeURIComponent(param); var value = encodeURIComponent(params[param]); queryComponents.push(key + '=' + value); } } return queryComponents.join('&'); } }; Form.Serializers = { input: function(element) { switch(element.type.toLowerCase()) { case 'checkbox': case 'radio': return this.inputSelector(element); default: return this.textarea(element); } }, inputSelector: function(element) { if(element.checked) { return [element.name, element.value]; } }, textarea: function(element) { return [element.name, element.value]; }, select: function(element) { return this[element.type == 'select-one' ? 'selectOne' : 'selectMany'](element); }, selectOne: function(element) { var value = null, option, index = element.selectedIndex; if(index >= 0) { option = element.options[index]; value = option.value == (undefined || '') ? option.text : option.value; } return [element.name, value]; }, selectMany: function(element) { var value = []; for(var i = 0; i < element.length; i++) { var option = element.options[i]; if(option.selected) { var optvalue = option.value == (undefined || '') ? option.text : option.value; value.push(optvalue); } } return [element.name, value]; } }; function $F(element) { this.form = element; } Object.extend($F.prototype, Form); /************************************************************** * 测试函数 */ function onTest() { //get提交方法 var params = new Object(); params.ss = '张三'; new ajax.request('ajax.do?method=doGet', { onSuccess: function(transport) { alert(transport.evalJSON().xx) }, parameters: params }); //post form提交方法 var params = new Object(); params.idd = 1000; params.names = '张三' new $F('form').request({ onSuccess: function(transport) { alert(transport.evalJSON().xx); }, parameters: params }); }