怎么自己封装ajax,自己动手封装的 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

});

}