xmlhttp_request.onreadystatechange = function() 
...{
// JavaScript代码段
};
if (http_request.readyState == 4) 

...{ // 收到完整的服务器响应 }

else ...{ // 没有收到完整的服务器响应 } 

第一:引用封装好的XmlHttp.js,这个包含了创建XMLHttpRequest对象,以及发送请求与加载回调方法的函数,前端开发人员只需要传递简单的几个参数就可以实现异步调用,代码如下:

点击展开
//------------------------------------------------------------------------------------------
//封装XMLHTTP的Request类的代码
var Request = new Object();
//定义一个XMLHTTP的数组
Request.reqList = [];
//创建一个XMLHTTP对象,兼容不同的浏览器
function getAjax() 
...{
var ajax=false;
try 
...{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) 
...{
try 
...{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) 
...{
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined') 
...{
ajax = new XMLHttpRequest();
}
return ajax;
}
//封装XMLHTTP向服务器发送请求的操作
//url:向服务器请求的路径;method:请求的方法,即是GET还是POST;callback:当服务器成功返回结果时,调用的函数
//data:向服务器请求时附带的数据;urlencoded:url是否编码;callback2;当服务器返回错误时调用的函数
Request.send = function(url, method, callback, data, urlencoded, callback2) 
...{
var req=getAjax(); //得到一个XMLHTTP的实例
//当XMLHTTP的请求状态发生改变时调用
req.onreadystatechange = function() 
...{
// 当请求已经加载
if (req.readyState == 4) 
...{
// 当请求返回成功
if (req.status < 400) 
...{
// 当定义了成功回调函数时,执行成功回调函数
if(callback)
callback(req,data);
}
// 当请求返回错误
else 
...{
//当定义了失败回调函数时,执行失败回调函数
if (callback2)
callback2(req,data);
}
//删除XMLHTTP,释放资源

try ...{
delete req;
req = null;
} catch (e) ...{}
}
}
//如果以POST方式回发服务器
if (method=="POST") 
...{
req.open("POST", url, true);
//请求需要编码
if (urlencoded)
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
Request.reqList.push(req);
}
//以GET方式请求
else 
...{
req.open("GET", url, true);
req.send(null);
Request.reqList.push(req);
}
return req;
}
//全部清除XMLHTTP数组元素,释放资源
Request.clearReqList = function() 
...{
var ln = Request.reqList.length; 
for (var i=0; i<ln; i++) ...{
var req = Request.reqList[i];
if (req) 
...{
try 
...{
delete req;
} catch(e) ...{}
}
}
Request.reqList = [];
}
//进一步封装XMLHTTP以POST方式发送请求时的代码
//clear:是否清除XMLHTTP数组的所有元素;其他参数的意义参见Request.send
Request.sendPOST = function(url, data, callback, clear, callback2) 
...{
if (clear)
Request.clearReqList();
Request.send(url, "POST", callback, data, true, callback2);
}
//进一步封装XMLHTTP以GET方式发送请求时的代码
Request.sendGET = function(url,args, callback,clear, callback2) 
...{
if (clear)
Request.clearReqList();
return Request.send(url, "GET", callback, args, false, callback2);
}第二:引用一个工具js:CommJM.js,一般是为了代码共享而引入的。
点击展开
var controleID="";
var innerHtml="";
//给控件赋值
function $$(controleID ,innerHtml ) 
...{
var _controleID=$(controleID );
_controleID .innerHTML=innerHtml ;
}
//隐藏控件
function hideObject(controleID) 
...{
var _controleID=$(controleID );
_controleID.style.display = "none";
}
//显示控件
function showObject(controleID) 
...{
var _controleID=$(controleID );
_controleID.style.display = "block";
}
var controlsID="";
//by minjiang 07-11-02
function $(controlsID) 
...{
return document .getElementById (controlsID );
}第三:创建ajax请求页面:ajax_promotion.aspx,把这个页面的HTML代码除了<%@ Page Language="C#"这行之外,全部删除。
第四:在ajax_promotion.aspx页面的后台代码中写相关业务操作。

点击展开
//取得奖品ID
string giftID = "";
//当前促销活动方案ID
string currentTarget = "";
xmlProvider _xmlProvider = null;
protected void Page_Load(object sender, EventArgs e) 
...{
this.action();
}
private void action() 
...{
//业务处理类型
string sAction = "";
if (Request.QueryString["action"] != null && Request.QueryString["action"] != "") 
...{
sAction = Request.QueryString["action"].Trim();
}
switch (sAction) 
...{
case "getInput":
//判断用户选择的礼品是否需要录入联系方式
this.getInput();
break;
case "getDescription":
this.getDescription();
break;
}
}
/// <summary>
/// 判断是否需要录入联系方式
/// </summary>
private void getInput() 
...{
}
/// <summary>
/// 取某一奖品的详细说明信息
/// </summary>
private void getDescription() 
...{
}
第四:在前端页面中实现异步调用。
第一:页面头部代码。

点击展开
//引入相关js文件
<script language ="javascript" type ="text/javascript" src ="XmlHttp.js"></script>
<script language ="javascript" type ="text/javascript" src ="CommJM.js" ></script>
<script language ="javascript" >
//奖品ID
var giftID=1;
//根据奖品ID读取奖品的描述信息
function getDescription(giftID) 
...{
var sUrl="ajax_promotion.aspx?id="+giftID+"&i="+Math.random()+"&action=getDescription";
Request.sendGET(sUrl,null,getCallBack,true,null);
}
//根据奖品ID读取奖品的描述信息的回调方法
function getCallBack(req,data) 
...{
//alert("进入回调方法");
var strResult=req.responseText;
//alert(strResult);
if(strResult!="") 
...{
$$("jl01_layer",strResult);
}
}
//根据奖品ID取得这奖品是否需要录入用户的联系方式
function getInput(giftID) 
...{
var sUrl="ajax_promotion.aspx?id="+giftID+"&i="+Math.random()+"&action=getInput";
//alert(sUrl);
Request.sendGET(sUrl,null,getInputCallBack,true,null);
}
//getInput回调方法
function getInputCallBack(req,data) 
...{
//alert("进入回调方法");
var strResult=req.responseText;
//alert(strResult);
if(strResult=="true") 
...{
showObject("<%= this .BlkBlackTabcontent_11 .ClientID %>");
}
else 
...{
hideObject("<%= this .BlkBlackTabcontent_11 .ClientID %>")
}
}
</script>
第二:页面代码:
总结:从整个过程来看,对于开发员来说代码量并不大,如果有了上面两个封装好的js文件,以后的开必就轻松多了,只关心复杂业务逻辑的处理以及页面效果,页面效果倒是需要额外的工作,最好具备一定的js能力。我们可以从其它js框架了抽取自己需要的部分放入自己的公用类库中,这样就形式了一套适合自己的js框架,方便又实用。
补充:这篇文章并不在于技术有多深,而在于一种工作模式,做适合自己项目的框架,远比用些看起来功能特别强大的框架来的方便。据园友的问题我想说明几点:
1:从性能上来讲,有的框架十来个js文件,而且还是压缩的,在网络传输时会有一定影响;
2:具体项目能调用的功能占整个框架功能的百分比。如果只是整个框架功能的10%,或者更少,引入框架值得吗?
3:自己开发脚本库时间长了,不也成了一个框架了吗?和其它的框架有什么区别呢?
第一:当然会成为一个框架;
第二:自己写的框架怎么会和别人写的框架一样呢?
<1>:自己的框架是自己根据具体项目具体需求来写的,很多框架中不实用的功能并不会引进来;
<2>:在调试上,自己的框架当然占优势,自己写的东西肯定能第一时间知道问题的出处。
4:自己开发框架,时间长了不也锻炼了自己的js能力吗?
5:本文并不是排斥框架,也不是说在项目中不能用框架,而是希望从实际项目考虑,全面比较框架在项目中优劣性。
6:不要过分依赖框架,试想下在没有框架前,你的工作怎么办?用框架永远在别人之后。
7:ajax框架支持很多特别复杂的动画效果,这是手工完成难度特别大的地方,而且框架对程序员要求相对要抵,而且容易形成统一的代码风格,理性分析利弊再决定是否用框架。
8:自己写脚本,并不代表每个项目或者是每个页面都需要自己把所有方法都重写一次,当然会考虑到代码复用了,谁会在每个页面中都写 documemt.getelememtById啊,你不觉得烦,别人看起来也烦,如果封闭一个$()方法,不更好?而且这种方式都是从框架中学来的,要消化成自己的。
9:自己写脚本的目的:吸取多个框架的特点,取长补短,做适合自己的,如果你的项目中对动画什么的没有要求,那么就不会引入这些额外的没用的js,无论怎么写,肯定不能都自己写,需要借助已有成熟的产品,但不能拿来主义。