[原创]我的AJAX XmlHttp通用类

擒兽 2007-12-18 06:49:45

//Class - Begin
function XmlHttp(){
this.objXmlHttp = this.CreateXmlHttpRequest();
//this.objDivReadyState = this.ShowReadyState();//创建状态输出DIV对象//依赖外部JS包(这个外部JS包是个过度特效包,各位可以不用,直接修改输出对象的style.display就行了)
}
//引用原型
XmlHttp.prototype = {
//创建对象 IE7 和 Firefox 已经统一了,不过还是有IE6用户,我只注重这两个浏览器,其他浏览器建议不要使用此类,或者在此处扩展
CreateXmlHttpRequest:function(){
var objXmlHttp = null;
if(window.XMLHttpRequest){
objXmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
throw "XmlHttp 异常!"
}
return objXmlHttp;
}
,
//URL提交
//参数:回调函数指针,URL,异步/同步,服务器帐号,服务器密码 (支持匿名访问的可以直接省略帐号密码参数,JavaScript就是爽,呵呵)
DoGet: function( objMethod, url, async, username, password ){
this.objXmlHttp.onreadystatechange = this.ClosureExecuteMethod( objMethod );
this.objXmlHttp.open( "GET", this.URLAddTimestamp(url), async, username, password );
this.objXmlHttp.setRequestHeader("If-Modified-Since","0");//避免缓存
this.objXmlHttp.send( null );
}
,
//Form提交
//参数:回调函数指针,URL,表单对象,异步/同步,服务器帐号,服务器密码 (支持匿名访问的可以直接省略帐号密码参数)
DoPostForm:function( objMethod, url, objForm, async, username, password ){
this.objXmlHttp.onreadystatechange = this.ClosureExecuteMethod( objMethod );
this.objXmlHttp.open( "POST", this.URLAddTimestamp(url), async, username, password );
this.objXmlHttp.setRequestHeader("If-Modified-Since","0");//避免缓存
this.objXmlHttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );//application/x-www-form-urlencoded 表示提交表单
this.objXmlHttp.send( this.TraversalForm(objForm) );
}
,
//状态事件执行回调函数的闭包
ClosureExecuteMethod:function( objMethod ){
var obj = this;
return function(){
obj.ExecuteMethod( objMethod );
}
}
,
//通过状态码执行回调函数
ExecuteMethod:function( objMethod ){
if( this.objXmlHttp.readyState == 4 ){
if ( this.objXmlHttp.status == 200 ) {
//this.ShowReadyState("OK");//依赖外部JS包
if( objMethod != null ){
objMethod( this.objXmlHttp.responseText )
}
}else{
//this.ShowReadyState("ERROR");//依赖外部JS包
}
}
}
,
//给URL添加时间标签,用正则表达式验证是否有参数,所以前台不用考虑是?号或&号,该意图主要是避免缓存
URLAddTimestamp:function(url){
if( (/\?.{1,}\=.{1,}/).test(url) ){
url = url + "×tamp=" + new Date().getTime();
}else{
url = url + "?Timestamp=" + new Date().getTime();
}
return url;
}
,
//遍历表单对象,组合body体(GET提交和FORM提交其实都是明文提交,可以参考HTTP请求与返回的模型)
TraversalForm:function( objForm ){
var params = null;
for( var i=0; i<objForm.length; i++ ){
if( objForm[i].type.toLowerCase()!="radio" || (objForm[i].type.toLowerCase()=="radio" && objForm[i].checked) ){
if( params==null ){
params = objForm[i].name + "=" + encodeURIComponent(objForm[i].value);
}else{
params = params + "&" + objForm[i].name + "=" + encodeURIComponent(objForm[i].value);
}
}
}
return params;
}
,
//状态输出,这个不用的情况下,在前面的方法体内注释掉就行,或者用全局变量开关来控制。
ShowReadyState:function(){
var obj = this;
switch( arguments[0] ){
case "OK":
this.objDivReadyState.innerHTML = "<div style=\"color:blue;\">数据交互完<div>";
setTimeout( function(){new DisplayGradualness( obj.objDivReadyState );} , 1000 );//依赖外部JS包
setTimeout( function(){window.document.body.removeChild(obj.objDivReadyState);} , 3000 );
break;
case "ERROR":
this.objDivReadyState.innerHTML = "<div style=\"color:red;\">交互已失败<div>";
setTimeout( function(){new DisplayGradualness( obj.objDivReadyState );} , 1000 );//依赖外部JS包
setTimeout( function(){window.document.body.removeChild(obj.objDivReadyState);} , 3000 );
break;
default:
var divReadyState = window.document.createElement("div");
divReadyState.style.position = "absolute";
divReadyState.style.filter = "Alpha(Opacity=100)";
divReadyState.style.top = "5px";
divReadyState.style.right = "5px";
divReadyState.style.border = "solid";
divReadyState.style.borderColor = "#808080";
divReadyState.style.borderWidth = "1px";
divReadyState.style.backgroundColor = "#FFFFCC";
divReadyState.style.fontSize = "12px";
divReadyState.style.padding = "3px";
divReadyState.style.display = "none";
divReadyState.innerHTML = "<div style=\"color:green;\">数据交互中<div>";
window.document.body.appendChild( divReadyState );
new DisplayGradualness( divReadyState );//依赖外部JS包
return divReadyState;
break;
}
}
}
//Class - End


强烈要求置顶,我铁了心混CSDN,呵呵。 今天很生气,一傻子跑去我blog说我的不是,说我不开源,说我只讲理论,有的人我就给,我就偏不给他开源,一个不注重编程思路的人,并要求别人开源的人是小人,居然还说我写JavaScript和练习打字没区别!

这个类建议在学习AJAX的短裤、星星、们,最好自己动手写一回。

68分,全部散了
...全文
1218 31 打赏 收藏 转发到动态 举报
写回复
用AI写文章
31 条回复
切换为时间正序
请发表友善的回复…
发表回复
tysy_hzh 2010-12-24
  • 打赏
  • 举报
回复
十 扌寺 , 丩攵 艹
又 臧
chuang7 2008-08-30
  • 打赏
  • 举报
回复
``````顶!!!!!
visulcer 2007-12-21
  • 打赏
  • 举报
回复
十 扌寺 , 丩攵 艹
又 臧
visulcer 2007-12-21
  • 打赏
  • 举报
回复
十 扌寺 , 丩攵 艹
又 臧
抱抱我的小猫 2007-12-21
  • 打赏
  • 举报
回复
支持,收藏。。。
hyowner 2007-12-21
  • 打赏
  • 举报
回复
顶 支持 开源盛世!!!
megerisin 2007-12-21
  • 打赏
  • 举报
回复
饿了,想吃饭勒。。。
擒兽 2007-12-20
  • 打赏
  • 举报
回复
<input type=button onclick="haha()">

你这种写法能免则免,尽量不要使用元素的明文事件绑定,对于WEB开发不便。通常我都会在代码页写个入口程序绑定所有元素的事件,方便WEB去改良,也方便自己去改良程序。

我的代码没问题,我的聊天室用的好好的,而且还不怎么占用客户端内存,呵呵。
braveboy 2007-12-20
  • 打赏
  • 举报
回复
学习下
wj539h 2007-12-20
  • 打赏
  • 举报
回复
我try catch完了之后报告ReferenceError: XmlHttp is not defined
其中test是servlet的url-pattern
web.xml里面是这样:
<servlet>
<servlet-name>test</servlet-name>
<servlet-class>wj.test.test</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>

我不是特别明白<input type=button onclick="haha()">这么写有什么不好
你说的入口程序绑定所有元素是什么意思呢?

ct_174880859 2007-12-20
  • 打赏
  • 举报
回复
学习学习
joincsdn 2007-12-20
  • 打赏
  • 举报
回复
楼主封装得很不错啊,以前一直专注与后台程序的开发,随着ajax的流行前台web端也越来越有挑战性了


还希望多跟楼主学习学习啊
tantaiyizu 2007-12-20
  • 打赏
  • 举报
回复

呵呵 ,楼主还是不错的说 ,我以前也是自己写类 ,自己去用

但自从知道了 jQuery ,我再也不这样做了

在jQuery中 ,好多东西就一句话,呵呵

比如你很艰难的写了好多我就一个 $.post 或者就搞定了


擒兽 2007-12-20
  • 打赏
  • 举报
回复
to yousite1

不知你想扩展什么。 我只是没测IE6,IE6就只需要注意XMLHttpRequest创建方法,其他代码均通用。

程序最好注重功能划分 分包 处理,太臃肿了反而不好扩展 不好维护。
擒兽 2007-12-20
  • 打赏
  • 举报
回复
to wj539h

你的test是servlet的配置,应该没问题,你加个 / 结尾看看。

如果是创建对象出错,我有有点怀疑你的浏览器。你用的啥。 你自己写最简单的创建对象,看看能否创建,或者把这个类里面的创建代码Copy到你的页面文件内,看看能不能创建对象,如果也不能创建那只能怀疑浏览器。
yousite1 2007-12-20
  • 打赏
  • 举报
回复
樓主為什麼不擴展一下,就是加些IF判斷而已。
一看注釋就沒信心了。說用IE6的不要使用此類。哈
yousite1 2007-12-20
  • 打赏
  • 举报
回复
To wj539h :
楼主的绑定事件不要写HTML元素里是为了方便维护.
在js的调用端用这样的方式进行事件绑定:
btnSendContent.onclick = function(){
new XmlHttp().DoPostForm( SendContent_AJAXBack, "ASHX/SendContentHandler.ashx", sendContentForm, true);
}


jQuery也是类似这样的写法.我觉得这样的写法确实很不错:
$('#btn').click(function (event) {
alert('test');
});
擒兽 2007-12-19
  • 打赏
  • 举报
回复

function haha() {
try{
new XmlHttp().DoGet(myHandler,"test",true); //我不明白你的test字符串是啥意思,这里DoGet的是一个URL才对。
}catch(e){
alert(e);
}
}


你还要注意代码文件自身的编码
擒兽 2007-12-19
  • 打赏
  • 举报
回复
楼上的,你在你的function内try一下,将Error 输出看看,如果是throw的异常,那肯定创建对象失败。

我自己只用Firefox和IE7测试过,IE6我还没测,呵呵。
wj539h 2007-12-19
  • 打赏
  • 举报
回复
<script language="javascript" src="bind-ajax.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function myHandler(responseText) {
var my = document.getElementById("my");
my.innerHTML = responseText;
}
function haha() {
new XmlHttp().DoGet(myHandler,"test",true);
}
</SCRIPT>


<body>
<form>
<input name=userName><br>
<input name=userPwd><br>
<input type=button onclick="haha()">
</form>
<div id="my"></div>
</body>

我说楼主啊?我用了你封装的东西之后为什么报错呢?
错误:'XmlHttp' 未定义
bind-ajax.js里面就是你的代码,难道有问题?
加载更多回复(11)

52,797

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧