prototype框架与最原始的AJAX写法

来源:互联网 发布:ios11怎么卸载软件 编辑:程序博客网 时间:2024/04/30 00:04

前些天在做项目的过程中遇到一个问题,外网申报的时候,鼠标经过审批事项的时候,要列出含有大类属性的听事项,为了省去写Document.get××××()方法,我就使用了AJAX的prototype框架,结果大类属性的事项是列出来了,但是位置不对,没有达到我想要的效果。故采用最原始的写法。

代码如下:

//显示大类属性 add by huangshuidan@gmail.com 2009-12-15
 function show(obj,itemcode,serviceunid,servicename,deptunid){
  //alert("itemcode:"+itemcode);

 //ajax最原始的写法
  var url1="selectSort.jsp?itemcode="+itemcode;
  var xmlhttp1=new ActiveXObject("Msxml2.XMLHTTP.4.0");
    xmlhttp1.Open("POST", url1, false);
     xmlhttp1.Send("");
     var xmlobj = xmlhttp1.responseXML;
     //alert("xmlobj:"+xmlobj);
     //var myoid = xmlobj.documentElement.text;
     var resp=xmlobj.getElementsByTagName("resp");
     //alert("myoid:"+myoid);
     //alert("resp:"+resp.length);
  //获得div的引用
        var mydiv=document.getElementById("sortdiv");
        var child=mydiv.getElementsByTagName("TABLE");
        for(i=0;i<child.length;i++){
         mydiv.removeChild(child[i]);//删除前一次创建的table
        }  
  //获得sortdiv的引用
        var mybody=document.getElementById("sortdiv");
        //创建一个<table></table>元素
        var mytable = document.createElement("TABLE");
        //创建一个<TBODY></TBODY>元素
        mytablebody = document.createElement("TBODY");
        // 创建行列
        //for(j=0;j<3;j++) {
        for(var j=0;j<resp.length;j++){
         var re=resp[j]; 
      var unid=re.getElementsByTagName("res")[0].firstChild.data;
      var name=re.getElementsByTagName("res")[1].firstChild.data;
   //创建一个<TR></TR>元素
            mycurrent_row=document.createElement("TR");
            for(i=0;i<1;i++) {
       //创建一个<TD></TD>元素<tr align="center" bgcolor="#DFF8FF">
                mycurrent_cell=document.createElement("TD");
    //创建一个文本元素
                currenttext=document.createTextNode(name);
              
                //创建一个<A></A>元素
           current_a=document.createElement("A");
           //把文本元素增加到<A></A>元素上
           current_a.appendChild(currenttext);
           current_a.setAttribute("href","handleServiceSort.jsp?serviceunid="+serviceunid+"&servicename="+servicename+"&deptunid="+deptunid+"&getchild="+unid);
           current_a.setAttribute("target","_blank");
           //设置样式 add by huangshuidan@gmail.com 2009-12-17
           //current_a.setAttribute("style","text-decoration:none");
           current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";
                //把<A></A>元素添加到单元TD上
                mycurrent_cell.appendChild(current_a);
                //设置td属性
                if(j%2==1){
                 mycurrent_cell.setAttribute("bgColor","#FBFEFF");
                }else{
                 mycurrent_cell.setAttribute("bgColor","#DFF8FF");
                }               
                mycurrent_cell.setAttribute("align","center");
                // appends the cell TD into the row TR
                //把单元TD添加到行TR上
                mycurrent_row.appendChild(mycurrent_cell);
               
            }
   //把行TR添加到TBODY上
            mytablebody.appendChild(mycurrent_row);
        }
        //创建一个<TR></TR>元素
         mycurrent_row=document.createElement("TR");
         //创建一个<TD></TD>元素
         mycurrent_cell=document.createElement("TD");
         //创建一个文本元素
         currenttext=document.createTextNode("关闭");
         //创建一个<A></A>元素
         current_a=document.createElement("A");
         current_a.appendChild(currenttext);
         current_a.setAttribute("href","javascript:hiddenDiv();");
         //设置样式 add by huangshuidan@gmail.com 2009-12-17
         current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";
         mycurrent_cell.appendChild(current_a);
         //把单元TD添加到行TR上
         mycurrent_row.appendChild(mycurrent_cell);
         //把行TR添加到TBODY上
         mytablebody.appendChild(mycurrent_row);
        // 把 TBODY 添加到 TABLE
        mytable.appendChild(mytablebody);
        // 把 TABLE 添加到 BODY
        mybody.appendChild(mytable);
        // 把mytable的border 属性设置为2
        mytable.setAttribute("border","0");  
        mytable.setAttribute("bgColor","#C1F0FF");
        mytable.setAttribute("width","194");
        mytable.setAttribute("height","101");
        mytable.setAttribute("cellPadding","0");
        mytable.setAttribute("cellSpacing","1");  
     document.all.sortdiv.style.display="block";  
     obj.style.background="#FF9933";
     document.all.sortdiv.style.left=event.x-210;  
  document.all.sortdiv.style.top=event.y+5;
  
 }

<div id="sortdiv" style="position:absolute;display:none;">
 <table width="194" height="101" border="0" cellpadding="0" cellspacing="1" bgcolor="#C1F0FF">
  <tr align="center" bgcolor="#DFF8FF">
   <td><input type="button" name="clobtn" value="关闭"> </td>
  </tr>
 </table>
</div>

注意的几点:

1.通过Document来设置<td>的背景色时"bgColor"如果写成"bgcolor"就没有起作用了。(本人当时就犯了这种弱智的错误)

2.通过Document来设置按钮的事件,点击是没有反应的,所有这里我改成用<a href的点击事件。

3.设置<a href的样式必须用obj.style.cssText="要设置的样式";如:current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";

原创粉丝点击