自己动手封装的 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
});
}

时间: 2024-08-01 20:03:30

自己动手封装的 ajax_AJAX相关的相关文章

简单介绍不用库(框架)自己写ajax_AJAX相关

平常会使用ajax来请求数据,加载一个库(框架),或许仅仅maybe就使用了它的ajax部分. 写个ajax,一来可以经历一下处理问题的过程,提升技术能力,二来工作中有时真的用不着这么大的一个库(框架),用自己写的,何乐不为呢. 先来看看流行的jQuery是怎样调用ajax的 $.ajax({ url: 'test.php', //发送请求的URL字符串 type: 'GET', //发送方式 dataType: 'json', //预期服务器返回的数据类型 xml, html, text, j

甩掉ashx和asmx使用jQuery.ajaxWebService请求WebMethod简练处理Ajax_AJAX相关

在WebForm下 开发ajax程序,需要借助于一般处理程序(*.ashx)或web服务(*.asmx),并且每一个ajax请求,都要建一个这样的文件,如此一来,如果在一个项目中ajax程序多了,势必会产生一堆的.ashx或.asmx,虽然于程序本身无碍,但那一堆文件看上去总觉得有伤大雅.那么可不可以丢掉这些.ashx和.asmx,选择一种更简练的方式来做ajax程序呢. 答案是肯定的,那就是:WebMethod .(此方法是在.net3.5版本下调试的,在.net2.0下有问题) 首先在asp

关于ajax网络请求的封装实例_AJAX相关

实例代码: // 封装的ajax网络请求函数 // obj 是一个对象 function AJAX(obj){ //跨域请求 if (obj.dataType == "jsonp") { //在这里 callback 必须是全局变量 保证函数消失的时候 这个变量不可以被销毁 //处理一下函数名(防止多个网络请求 函数名字相同 出现紊乱的情况) var hehe = "callBack" + "_" + new Date().getTime() +

AJAX初级教程之初识AJAX_AJAX相关

从刚刚接触B/S开发,就耳闻AJAX技术,但一直处于模棱两可的状态,大道理明白,一到动手就傻眼了. AJAX仿佛就是深不可测的技术,成为B/S学习过程中的一个阴影. 直到前些日子,小菜才真正开始AJAX实践,真正动手了才发现,AJAX并没有那么困难,如果不考虑AJAX的变型应用,只考虑AJAX基本应用,它还是相当简单的,过于复杂的理论阻碍了我们动手的积极性. 因此,本系列教程将从实用的角度出发,以最快的速度让读者掌握基本的AJAX应用,以最直接的方式展示AJAX技术. 为了更好的阅读本系列教程,

ajax的工作原理以及异步请求的封装介绍_AJAX相关

Ajax原理: 客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求,当服务器返回响应时,会调用先前注册的回调函数,在回调函数中可以使用javascript操作DOM来更新页面,异步请求不会阻塞客户端的操作,达到页面无法刷新就可以更新数据的效果. 异步请求的封装: 复制代码 代码如下: var xhr=false; //step1:创建一个兼容浏览器各个版本的XMLHttpRequest对象 if (window.XMLHttpRequest) { //IE7+, Firefox

自己动手封装的 ajax

以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等等,但都是开源封装好的AJAX框架.从没真正用过纯正的AJAX,故参照prototyp面向对象思想自己封装了一个AJAX框架.希望能给读者参考.帮助.评价. 复制代码 代码如下: /* * 自己封装的ajax * * * @author 姜松 * @version 1.00 $date:2009-07-02 * * history: * */ Object.extend = function(destination, s

四步学会 Ajax_AJAX相关

复制代码 代码如下: //第一步 : 创建XMLHttpRequest对象 var http_request; try {     http_request = window.ActiveXObject("Microsoft.XMLHTTP"); }catch(e) {     try     {         http_request = new XMLHttpRequest();     }catch(e)     {         alert("你的浏览器不支持XM

什么是Ajax_AJAX相关

我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬, 关于ajax,什么是ajax 重点: ajax不是一种语言,而是多种技术组合在一起使用,ajax只是这几种技术组合的代名词网上有很多教程文章这样解释ajax: Asynchronous JavaScript And XML 中文即是:异步的JavaScript与XML我觉得这种解释很笼统,会让新手摸不着头脑. 我想对上面的这种解释做点补充,我的ajax开发经验告诉我.利用javascr

XMLHttpRequest of ajax_AJAX相关

调用 function(Url) {  var XML = new XMLHttpRequest();  XML.onreadystatechange = function() {    if (XML.readyState == 4)    {      if (XML.status == 200)      {        //XML.responseText      }      else      {        //XML.statusText      }    }    el