Ajax Framework Encapsulation

Encapsulates an AJAX framework of its own. Hope to give readers reference, help, evaluation.

Since the proposed WEB2.0 rich customers Ajax technology is now more and more popular, to replace the potential of the CS desktop program. Many AJAX-enabled technologies such as Ext,prototype,jquery and so on have been developed in the past, but they are all open source encapsulated Ajax frameworks. Never really used pure Ajax, so you encapsulate an AJAX framework with reference to Prototyp object-oriented thinking. Hope to give readers reference, help, evaluation.

/*
* Own encapsulation of Ajax
*
*
* @author Jsong
* @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 to new ActiveXObject (' msxm12.xmlhttp ');
catch (e) {
try {
Return to 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, 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);

/**************************************************************
* Test function
*/
function OnTest () {

Get Commit method
var params = new Object ();
PARAMS.SS = ' John ';
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 = ' John '
New $F (' form '). Request ({
Onsuccess:function (transport) {
Alert (Transport.evaljson (). xx);
},
Parameters:params
});
}