php加速之js篇(2)

PHP之JS加速第二季

之前一發過一篇有關於JS加速的文章，說是用利JS來替代PHP完成大部分的工作。其實 就是想偷工減料，損害網友利益，用客戶機來分但伺服器的負擔而已，但果你伺服器夠牛B的話，這點效率根本不是問題，而接下來講的就更不是問題了。所以覺得 自己伺服器牛B的話，關閉此頁面吧。吼吼！（很多人問我吼吼是啥，我說是呵呵的升級版）
        言歸正傳，我相信很多人在認為做WEB開發就是select insert into  update delete
其實也基本是這些了，但這些裡面也有很多學問，這可我不探究PHP程式的效率問題，我是來探究，JS在這裡又能為我們做些什麼。
        舉個簡單的例子，一個簡單的部落格程式，在文章後面基本有評論功能，那多普通的做法就是評論提交後再重新整理此頁面。那麼這裡就有必要探究了，因為你會發 現，你重新整理後更新的只有剛剛加的評論資訊而已.其它的都是沒有必要再從資料庫裡重複讀取了，是不是會覺的浪費資源，影響效率呢？
那麼為什麼不用上JS呢，或許又有村友問了，不會是想用AJAX吧，其實AJAX也是JS的應用罷了，這裡不是討論AJAX的應用，有關AJAX的應用，村子裡相關文章太多了。
那麼看看我是如何想的如何?的吧，（看圖文）
1.這是一個普通的友鏈管理：

2.當我點擊添加的時候：

3.輸入相關資訊後:

4.添加後：

這全部是在一個頁面裡完成的，所謂的無重新整理吧
關鍵是3-4怎麼實現的，看代碼
點擊添加後，觸發了一個upLink()的JS函數:

CODE:[Copy to clipboard]function upLink(){
     if ($('ln').value=='' || $('lc').value=='' || $('lc').value==''){
                 alert("表單填寫完整");
                 return false;
         }
         var option={
                parameters:"action=addlink&ln="+$('ln').value+"&lu="+$('lu').value+"&lc="+$('lc').value,
                method:"get",
                onSuccess:function(transport){
                        var response=transport.responseXML;
                        var dataArray = response.getElementsByTagName('succes');
                        var lid =dataArray[0].getAttribute('id');
                        var tbarr    = new Array();
                        tbarr[1] = $('lu').value;
                        tbarr[2] = $('lc').value;*/
                        tbarr[0] = "<span id='ln"+lid+"'>"+$('ln').value+"</span>";
                        tbarr[1] = "<span id='lu"+lid+"'>"+$('lu').value+"</span>";
                        tbarr[2] = "<span id='lc"+lid+"'>"+$('lc').value+"</span>";
                        tbarr[3] = '<a style="cursor:pointer" onclick="editCat('+lid+')"><img src="/blog/templates/manage/images/edit.gif" alt="修改" width="11" height="15" border="0" /></a> <a href="?action=dellink&lId='+lid+'" onclick="return confirm(/'確認要刪除嗎？/')"><img src="/blog/templates/manage/images/del.gif" alt="刪除" width="13" height="13" border="0" /></a>';
                        obj=tb.insertRow();
                for(t=0;t<tb.rows(1).cells.length;t++){
                        cellobj=obj.insertCell();   
                cellobj.innerHTML=tbarr[t];
                        }
                        $('ln').value='';
                        $('lu').value='';
                        $('lc').value='';
                },
                onFailure:function(transport){
                alert ("提交失敗");
                }
        }
        var request=new Ajax.Request("manageajax.php",option);

關鍵是這段代碼

CODE:[Copy to clipboard]  obj=tb.insertRow();
  for(t=0;t<tb.rows(1).cells.length;t++){
       cellobj=obj.insertCell();   
      cellobj.innerHTML=tbarr[t];
  }
  $('ln').value='';
  $('lu').value='';
  $('lc').value='';

我並沒有從資料庫裡再次提取資料而是用JS+DHTML直接往表格裡加行加列
當然我提交部分用到了AJAX，不過不用也沒關係，你可以新開一個視窗，提交成功到關閉。本頁面再用JS+DHTML更新.
那麼這篇文章也就結束了，那麼好處在什麼地方呢，就是在提交資料後，不用再重新調資料庫重新整理頁面了。這樣應該可以提高不少效率，也能給人無重新整理的體驗快感吧！