当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 自己动手封装的 ajax

AJAX技术
自己动手封装的 ajax
Ajax 对象 包含post和get两种异步传输方式
Ajax 超时检查脚本
AJAX 简介及入门实例
ajax 开发守则 10条说明
Ajax 返回字符串的过滤实现代码
Ajax 程序开发中常见问题
AJAX 验证框架13个
ajax 入门基础之 XMLHttpRequest对象总结
基于AJAX的分页类实现代码
如何在Asp.net中使用HtmlArea编辑器
使用 jQuery 简化 Ajax 开发
ASP.NET 与 Ajax 的实现方式
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程,详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据

AJAX技术 中的 自己动手封装的 ajax


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 44 ::
收藏到网摘: n/a

过完年后项目开发比较紧张,好长时间没写文章了。好在项目进入测试实施后期,可以有时间总结一些自己最近项目的心得了。自从提出WEB2.0富客户以后AJAX技术现在是越来越流行,有待代替CS桌面程序之势。 以前开发用了很多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
});
}