我該如何改進這個Ajax腳本？

Question

我已經爲管理員編寫了PHP和javascript的組合，以無縫地給用戶提供沒有頁面重新加載的點數。這是我第一次真正使用Ajax，所以我想提一些關於改進代碼的提示。我怎樣才能讓它更安全/更高效？順便說一句，這段代碼在html源代碼中是可見的。

P.S：如果有關於這類事情的最佳實踐，請讓我知道併發布您對該主題的任何鏈接。

// First pass: add the points 
function addBonus() 
{ 
    document.getElementById('response').innerHTML = '<img src=images/loading2.gif></img>'; // Show that process is taking place 
    var xmlHttp = getXMLHttp(); 

    xmlHttp.onreadystatechange = function() 
    { 
    if(xmlHttp.readyState == 4) 
    { 
     verifyPoints(); // Check if points have actually been given 
    } 
    } 
// Generated by templating system 
// Triggers call to PHP page that gives bonus points to user 
    var url="page.php?id=2&a=bonus"; 


    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
} 

---

// Second pass: check the points have been given 
function verifyPoints(){ 
    var xmlHttp = getXMLHttp(); 

    xmlHttp.onreadystatechange = function() 
    { 
    if(xmlHttp.readyState == 4) 
    { 
     HandleResponse(xmlHttp.responseText); 
    } 
    } 

    url="GetPoints.php?i=2"; // Generated by templating system 

    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
} 

---

function HandleResponse(response) 
{ 
    var oldPoints = parseInt(document.getElementById('numPoints').innerHTML); 
    var currentPoints = parseInt(response); 

    if(currentPoints == (oldPoints + 150)){ 
     document.getElementById('response').innerHTML = '<img src=images/tick.png></img>'; // Bonus points added: show tick icon 
    } else { 
     document.getElementById('response').innerHTML = '<img src=images/cross.png></img>'; // Bonus points not added: show red cross icon 
    } 

    document.getElementById('numPoints').innerHTML = currentPoints; // Update points display 
} 

Answer 1

如何page.php?id=2&a=bonus知道，一個真正的管理是一個給予加分？

您是否想過XSRF？換句話說，用戶可以在他們的網站上放置一些東西，這樣如果一個管理員在訪問它時登錄，就會發送一個請求，並附帶管理員的Cookie，這些Cookie會不經意地累積點數。

你不應該使用GET請求來改變東西，比如分配點。 從http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

實現者應該知道，軟件代表了他們對互聯網的交互用戶，並且應該小心，讓用戶知道他們可能會可能有意外意義的任何行動他們自己或他人。

特別是，該慣例已經確定，GET和HEAD方法不應該具有采取檢索以外的其他操作的意義。這些方法應該被認爲是「安全的」。這允許用戶代理以一種特殊的方式表示其他方法，例如POST，PUT和DELETE，以便使用戶意識到正在請求可能不安全的操作的事實。

任何導致服務器狀態更改的應該使用非冪等HTTP方法之一。可能是POST。順便說一句，一個冪等運算就是在重新應用到它的輸出時產生相同的結果。所以f是，如果f(x) == f(f(x)) == f(f(f(x))冪等

最後

url="GetPoints.php?i=2" 

樹立了一個全局變量。你可能想要一個var在前面。