How to encapsulate ajax
Editor to share with you how to encapsulate ajax, I hope you have something to gain after reading this article, let's discuss it together!
In the past, many AJAX technologies have been used, such as EXT,prototype,jQuery, etc., but they are all open source packaged AJAX frameworks. Never really used pure AJAX, so I encapsulated an AJAX framework according to the object-oriented idea of prototyp. Hope to give readers reference, help and evaluation.
The copy code is as follows:
/ *
* self-packaged ajax
*
*
* @ author Jiang Song
* @ 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; iTunes +) {
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)
/ *
* Test function
, /
Function onTest () {
/ / get submission method
Var params = new Object ()
Params.ss = 'Zhang San'
New ajax.request ('ajax.do?method=doGet', {
OnSuccess: function (transport) {
Alert (transport.evalJSON () .xx)
}
Parameters: params
});
/ / post form submission method
Var params = new Object ()
Params.idd = 1000
Params.names = 'Zhang San'
New $F ('form'). Request ({
OnSuccess: function (transport) {
Alert (transport.evalJSON () .xx)
}
Parameters: params
});
}
After reading this article, I believe you have a certain understanding of "how to encapsulate ajax". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
