Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.