ajax加載圖像

Question

我有一個頁面，檢查表單進行驗證，主要的檢查是如果電子郵件或用戶名已經在數據庫中。我有這個工作正常，但我無法弄清楚如何添加加載圖像...當用戶更改用戶名或電子郵件時，它正在檢查。

歪歪函數來檢查用戶名下方，其類似的檢查電子郵件

function check_username(username) 
{ 
var httpRequest; 
make_request() 
function stateck() 
    { 

    if(httpxml.readyState==4) 

     { 
     if (httpxml.responseText.indexOf ("Username Ok") >= 0) 
     { 
      document.getElementById("username").style.backgroundColor = "green"; 
      document.getElementById("username").style.color = "white"; 
      document.getElementById("username_div").style.display = 'none'; 
      usernameok = true; 

     } 

     else 
     { 
      document.getElementById("username").style.backgroundColor = "red"; 
      document.getElementById("username_div").style.visibility = 'visible'; 
      document.getElementById("username_div").innerHTML=httpxml.responseText; 
      usernameok = false; 

     } 
     checkCanSubmit();   
     } 


    } 

httpxml.onreadystatechange=stateck; 
user_url="check_username.php?username=" + username.value; 
httpxml.open("GET",user_url,true); 
httpxml.send(null); 
} 

我已經嘗試過jQuery庫，我更喜歡這種方式。

Answer 1

ajaxload.info確實工作正常，但您不需要打擾div和background-image。只需創建一個<img>，使用使用document.createElement，然後將圖像的src，然後將其添加到您的文檔：

var img = document.createElement('img'); 
img.src = '<the URL of your loading image>'; 
function stateck() { 
    ... 

現在你可以插入新創建的img到您的文檔，然後在stateck刪除它（ ）。