利用Ajax对客户端页面的动态增删改查

前两天在做一个网站的后台,我做成员管理一块,发现我负责的这一块有很大的发挥空间,在web2.0时代客户的体验已经被提为最重要的议程,因此网页的流畅度将是网页能够给人带来快捷体验的一个有效途径,利用Ajax实现对数据的增删改查,效果很好....

在客户端脚本在winload时间添加函数初始化xmlHTTP:

function ajaxFunction()
 {

 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
 xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4)
  {
   back_check();
  }
  
 }
 }

这样就可以保证在每次使用xmlHTTP时都有对象可用(就是这个意思~~~可能有点乱)然后在每次使用完xmlHTTP之后都调用一次Ajaxfunction就可以了呵呵.

在表格控制方面,利用dom对象对表格的处理.在单击修改按钮时,调用一下函数,并弹出隐藏的层,将数据加载到层中:

function info_update_input(index,id)
{
 state=0;
 //弹出隐藏的层
  document.getElementById("middle").style.display="block";
  document.getElementById("info_add").style.display="block";
  document.getElementById("info_add").style.left="30";
  document.getElementById("info_add").style.top="50";
  document.getElementById("hidden").value=id;//使数据的id添加到层的隐藏域中,以便以后使用...
  for(var i=0;i<=3;i++)//将表格中的数据加载到层中
 {
   
   
    document.getElementById("input_"+i).value=document.getElementById("tb_"+id).cells[i+1].innerHTML;
 }
 }

单击层中的确定按钮后一下函数被调用,数据被返回到服务器,对数据进行修改:

function info_add_post(index,id)
{
 if(state==0)
 {
  alert(state);
  index=2;
  id=document.getElementById("hidden").value;
 }
 var str="test.php?index="+index+"&id="+id;
 for(var i=0;i<=3;i++)
 {
   
    str+="&d_"+i+"="+document.getElementById("input_"+i).value;
    info[i]=document.getElementById("input_"+i).value;
 }
 alert(str);
 xmlHttp.open("GET",str);
 xmlHttp.send(null);
 }
 function end_add()
 {
  document.getElementById("middle").style.display="none";
  document.getElementById("info_add").style.display="none";
  document.getElementById("mem_manager").insertRow(document.getElementById("mem_manager").rows.length).innerHTML="<td>hang</td>";
  }

服务器处理完后,返回处理的id值(由于这是我的源码扒下来的呵呵,所以还有操作索引值.index,以确定是增删改查的那一项)

function back_check()
{
 
 var reStr=xmlHttp.responseText;
 //document.write(reStr);
 var index=reStr.charAt(0);
 alert(reStr);
 if(index=="1")
 {
 document.getElementById("mem_manager").deleteRow(document.getElementById("tb_"+document.getElementById("hidden").value).rowIndex);
  }
   else if(index=="2")
   {
  
 info_update();
 //alert(document.getElementById("tb_"+reStr.charAt(2)).cells[0].innerHTML);
 }
 
 else if(index=="3")
 {
  end_add();
  }
 
 ajaxFunction();
 }
function info_update()
{
 document.getElementById("middle").style.display="none";
 document.getElementById("info_add").style.display="none";
 document.getElementById("mem_manager").deleteRow(document.getElementById("tb_"+document.getElementById("hidden").value).rowIndex);
 //document.getElementById("mem_manager").rows[2].innerHTML="sdfsdfsdfsdf";
 //alert(document.getElementById("mem_manager").rows[2].innerHTML);
 var new_row=document.getElementById("mem_manager").insertRow(document.getElementById("mem_manager").rows.length-1);
 //new_row.style.height="10px";
 //new_row.innerHTML="<td><input type='text' size=5 maxlength=5 /></td>";
 new_row.id="tb_"+document.getElementById("hidden").value;
 new_row.style.backgroundColor="#D7EBFF";
 new_row.insertCell(0).innerHTML="<input type='checkbox'/>";
 for(var i=1;i<5;i++)
 {
  new_row.insertCell(i).innerHTML=info[i-1];
  }
 new_row.insertCell(5).innerHTML="<input type=/"button/" value=/"删除/" οnclick=/"info_check(1,"+document.getElementById("hidden").value+")/"/>";
 new_row.insertCell(6).innerHTML="<a href='#' οnclick=/"info_update_input(2,"+document.getElementById("hidden").value+")/">修改</a>";
 //new_row.innerHTML="<td>df</td>";
 }

这样整个修改过程就算结束啦,由于是我临时写的,而且我水平并不高,所以代码看着有点乱,希望能对用的找的朋友一些启发.想要源码可以留言我发给你呵呵~~~