2012-01-05 55 views
1

我使用HTML和JavaScript製作了一個簡單的REST Web服務使用者。下面的代碼:爲什麼聲明xmlhttp.onreadystatechange導致此程序只能工作一次?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script language="javascript"> 
    var xmlhttp; 

    function getdetails() { 
     var empno = document.getElementById("empno"); 
     var url = "http://localhost:8080/TestWS1/rest/hello/" + empno.value; 

     xmlhttp = new XMLHttpRequest(); //@slaks: i put it here 

     xmlhttp.open('GET',url,true); 
     xmlhttp.send(null); 

     xmlhttp.onreadystatechange = function() { 

       var empname = document.getElementById("empname"); 
       var age = document.getElementById("age"); 
       if (xmlhttp.readyState == 4) { 
        //alert(xmlhttp.status); 
        if (xmlhttp.status == 200) { 
         var det = eval("(" + xmlhttp.responseText + ")"); 
         if (det.age > 0) { 
          empname.value = det.name; 
          age.value = det.age; 
         } 
         else { 
          empname.value = ""; 
          age.value =""; 
          alert("Invalid Employee ID"); 
         } 
       } 
       else 
         alert("Error ->" + xmlhttp.responseText); 
       } 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <h1>Call Employee Service </h1> 
    <table> 
    <tr> 
     <td>Enter Employee ID : </td> 
     <td><input type="text" id="empno" size="10"/> <input type="button" value="Get Details" onclick="getdetails()"/> 
    </tr> 
    <tr> 
     <td>Enter Name : </td> 
     <td><input type="text" readonly="true" id="empname" size="20"/> </td> 
    </tr> 

    <tr> 
     <td>Employee Age : </td> 
     <td><input type="text" readonly="true" id="age" size="10"/> </td> 
    </tr> 
    </table> 
    </body> 
</html> 

當按下getDetail按鈕的代碼只在HTML文本框中的REST Web服務顯示員工姓名和年齡。該參數是員工編號(empNo)。

主要問題是,爲什麼這段代碼只能工作一次?

例如,如果我將1放在empNo文本框中,並且我只按第一次getDetail按鈕,它將根據我之前輸入的員工編號顯示員工的姓名和年齡。但對於第二或第三我按getDetail按鈕,它不再工作。我試圖給出一些警告來幫助我調試該代碼,但結果是xmlhttp.onreadystatechange = function()僅在第一次按下getDetail按鈕時有效。

有誰知道如何解決這個問題?真的卡在這裏..感謝了很多幫助我..

FYI:這裏是我的web服務代碼:

package com.webservices.TestWS1; 

import javax.ws.rs.GET; 
import javax.ws.rs.Path; 
import javax.ws.rs.PathParam; 
import javax.ws.rs.Produces; 
import javax.ws.rs.core.MediaType; 

//@Path("/hello") 
@Path("/hello/{empno}") 
public class Hello {   
    @GET // this method process GET request from client 
    @Produces("application/json") // sends JSON 
    public String getJson(@PathParam("empno") int empno) { // empno represents the empno sent from client 
     switch(empno) { 
      case 1 : 
       return "{'name':'George Koch', 'age':58}"; 
      case 2: 
       return "{'name':'Peter Norton', 'age':50}"; 
      default: 
       return "{'name':'unknown', 'age':-1}"; 
     } // end of switch 
    } // end of 
} 

回答

1

將這個腳本標籤

function getdetails() { 
     xmlhttp = new XMLHttpRequest(); 
     var empno = document.getElementById("empno"); 
     var url = "http://localhost:8080/TestWS1/rest/hello/" + empno.value; 
     xmlhttp.open('GET',url,true); 
     xmlhttp.send(null); 
     xmlhttp.onreadystatechange = function() { 

       var empname = document.getElementById("empname"); 
       var age = document.getElementById("age"); 
       if (xmlhttp.readyState == 4) { 
        //alert(xmlhttp.status); 
        if (xmlhttp.status == 200) { 
         var det = eval("(" + xmlhttp.responseText + ")"); 
         if (det.age > 0) { 
          empname.value = det.name; 
          age.value = det.age; 
         } 
         else { 
          empname.value = ""; 
          age.value =""; 
          alert("Invalid Employee ID"); 
         } 
       } 
       else 
         alert("Error ->" + xmlhttp.responseText); 
       } 
     } 
    } 
+0

感謝您的答案petar,但它仍然不適合我..該代碼只能運行一次..任何其他建議? – 2012-01-05 04:21:31

+0

ajax正在工作,究竟是什麼錯誤 – 2012-01-05 04:33:18

+0

問題是一樣的petar。例如:第一次,我把「1」放在empNo文本框中,然後按下getDetail按鈕。它會顯示名稱:employeeA和年齡:35。對於第二個,我把「2」放在empNo文本框中,然後我按下getDetail按鈕。它會顯示名稱:employeeB和年齡:40。對於第三次嘗試,我會像前一個一樣做同樣的事情>>在empNo文本框中放置「1」。這一次沒有來自服務器的響應。這一次的名字和年齡仍然是空的。我試圖提供一些警報調試,它被證明xmlhttp.onreadystatechange =函數不被調用(第三我嘗試) – 2012-01-05 04:40:13

2

你不能再使用XMLHttpRequest秒。
您需要爲每個請求創建一個新的XMLHttpRequest

擺脫您的init()功能。

+0

謝謝您的回答slaks的,我想你的建議,但它仍然相同..適用於只在第一次..任何其他的建議? – 2012-01-05 04:12:49

+0

請編輯您的問題,以顯示您的嘗試 – SLaks 2012-01-05 04:13:15

+0

我編輯了代碼..請給我一些建議..謝謝 – 2012-01-05 04:19:18

0

有點晚了這個答案之間,但人可能關注...

一個需要分配回調函數發送一個請求之前。 所以應該喜歡這個

 var url = "http://localhost:8080/TestWS1/rest/hello/" + empno.value; 
     xmlhttp.open('GET',url,true); 
     xmlhttp.onreadystatechange = function() { 
      ... some code here 
      } 
     xmlhttp.send(null); 
相關問題