JavaScript按照MVC模式制作自定义控件（2）

  前面我们讲了表现层的制作，接下来是数据层了。我们可以把它看成是一个仓库，需要的时候就调用方法，当然在这之前我们要初始化他。

  下面是数据层的代码：

//  JavaScript Document MVC-M
// soap连接加dom分析
// 要加入"ajaxrequest.js" 
function  assessmentListData(userName,assessmentID){
     // 构造
     var  ajaxobj  =   false ;
     this .userName  =  userName;
     this .assessmentID = assessmentID;
     var  ObjSelf;
    ObjSelf = this ;
     this .callbackdata = function (cbobj) { return ;}
     //
    ajaxobj  = new  AJAXRequest;     //  创建AJAX对象
    ajaxobj.method = " POST " ;    //  设置请求方式为GET
     // 参数
    ajaxobj.content = " userName= " + userName  + " &assessmentID= " + assessmentID + "" ;
    ajaxobj.url = " 你的web服务地址/WebService.asmx/GetResultInfo "
     //  设置回调函数，输出响应内容
    ajaxobj.callback = function (xmlobj) {
         ObjSelf.callbackdata(parseData(xmlobj.responseText));
    }
    ajaxobj.send();  
}
//
function  parseData(str){
     // 生成xml
     var  xmlDoc  =   new  ActiveXObject( " microsoft.xmldom " );
    xmlDoc.async  =   false ;
    xmlDoc.loadXML(str);
    
     var  xmlElement  =  xmlDoc.documentElement.getElementsByTagName( " NewDataSet " );
     // 得到newdataset
     var  statisticalInfo  =  xmlElement.item( 0 );
     var  resultArray  =   new  Array();
     if (statisticalInfo != undefined){
         for (i = 0 ;i < statisticalInfo.childNodes.length;i ++ ){
             if (statisticalInfo.childNodes.item(i).nodeName == " Table1 " ){
            resultArray.push(statisticalInfo.childNodes.item(i).childNodes.item( 1 ).text);
            }
        }
    }
     return  resultArray;
}

 在这里我用了一个别人写好的 ajax调用webservice的类，他的名字是AJAXRequest。使用方法很简单。ajaxobj.callback事件就是在得到结果时调用的。同样我们将这个事件映射到assessmentListData.callbackdata的事件上。

接着我们就可以测试这个类是否正常。测试htm：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
<!-- 加入webservice连接 -->
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > v2 </ title >
< script  language ="javascript"  src ="assessmentListData.js" ></ script > <!-- 数据层类 -->
< script  language ="javascript"  src ="ajaxrequest.js"  type ="text/javascript" >   </ script > <!-- ajax webservice连接类 -->
< script  language ="javascript"  type ="text/javascript" > ...
function init()...{
var data = new assessmentListData("test01","86");
data.callbackdata = function (xmlobj)...{
alert(xmlobj);
}
}

</ script >
</ head >

< body  onload ="init()" >
< div > 测试成绩单数据层 </ div >
< div ></ div >
</ body >
</ html >

 

ajaxrequest.js 在blueidea上下载http://www.blueidea.com/download/product/2006/3993.asp