JavaScriptMVC模式制作自定义控件的步骤
JavaScriptMVC模式制作自定义控件的步骤
前面我们讲了表现层的制作，接下来是数据层了。我们可以把它看成是一个仓库，需要的时候就调用方法，当然在这之前我们要初始化他。
下面是数据层的代码：
//JavaScriptDocumentMVC-M
//soap连接加dom分析
//要加入"ajaxrequest.js"
functionassessmentListData(userName,assessmentID){
//构造
varajaxobj=false;
this.userName=userName;
this.assessmentID=assessmentID;
varObjSelf;
ObjSelf=this;
this.callbackdata=function(cbobj){return;}
//
ajaxobj=newAJAXRequest;//创建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();
}
//
functionparseData(str){
//生成xml
varxmlDoc=newActiveXObject("microsoft.xmldom");
xmlDoc.async=false;
xmlDoc.loadXML(str);
varxmlElement=xmlDoc.documentElement.getElementsByTagName("NewDataSet");
//得到newdataset
varstatisticalInfo=xmlElement.item(0);
varresultArray=newArray();
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);
}
}
}
returnresultArray;
}
//soap连接加dom分析
//要加入"ajaxrequest.js"
functionassessmentListData(userName,assessmentID){
//构造
varajaxobj=false;
this.userName=userName;
this.assessmentID=assessmentID;
varObjSelf;
ObjSelf=this;
this.callbackdata=function(cbobj){return;}
//
ajaxobj=newAJAXRequest;//创建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();
}
//
functionparseData(str){
//生成xml
varxmlDoc=newActiveXObject("microsoft.xmldom");
xmlDoc.async=false;
xmlDoc.loadXML(str);
varxmlElement=xmlDoc.documentElement.getElementsByTagName("NewDataSet");
//得到newdataset
varstatisticalInfo=xmlElement.item(0);
varresultArray=newArray();
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);
}
}
}
returnresultArray;
}
在这里我用了一个别人写好的 ajax调用webservice的类，他的名字是AJAXRequest。使用方法很简单。ajaxobj.callback事件就是在得到结果时调用的。同样我们将这个事件映射到assessmentListData.callbackdata的事件上。
接着我们就可以测试这个类是否正常。测试htm：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><!--加入webservice连接--><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>v2</title><scriptlanguage="javascript"src="assessmentListData.js"></script><!--数据层类--><scriptlanguage="javascript"src="ajaxrequest.js"type="text/javascript"></script><!--ajaxwebservice连接类-->
<scriptlanguage="javascript"type="text/javascript">
functioninit(){
vardata=newassessmentListData("test01","86");data.callbackdata=function(xmlobj){alert(xmlobj);
}}
</script></head><bodyonload="init()"><div>测试成绩单数据层</div><div></div></body></html>ajaxrequest.js 在blueidea上下载http://www.blueidea.com/download/product/2006/3993.asp