2012-01-05 3 views
1

私はHTMLとJavaScriptを使って簡単なREST Webサービスコンシューマーを作っています。ここでのコードは次のとおりです。getDetailボタンが押されたときのコードはHTMLのみテキストボックスに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> 

。パラメータは従業員番号(empNo)です。

主な問題は、なぜこのコードは1回だけ動作するのですか?

例えば、私がempNoテキストボックスに1を入れて、初めてgetDetailボタンを押すと、前に入力した従業員番号に基づいて従業員の名前と年齢が表示されます。しかし、2番目または3番目のgetDetailボタンを押すと、もう動作しません。私はそのコードをデバッグするための助けにいくつかの警告を出そうとしましたが、結果はxmlhttp.onreadystatechange = function()はgetDetailボタンを初めて押したときに1回しか機能しません。

誰もがこの問題を解決する方法を知っていますか?本当にここで立ち往生..私を助けてくれてありがとうたくさん..

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のおかげでありがとう、しかしそれはまだ私のために動作しません..そのコードは一度実行することができます..他の提案? –

+0

ajaxが動作していますが、正確には何かエラーがあります –

+0

問題は同じペタです。例えば、最初はempNoテキストボックスに "1"を入れ、getDetailボタンを押します。従業員Aと年齢35の名前が表示されます。 2番目のものは、empNoテキストボックスに "2"を入れ、getDetailボタンを押します。従業員Bと年齢:40の名前が表示されます。 3回目の試行では前のものと同じことをする>> empNoテキストボックスに "1"を入れる。今回はサーバーからの応答はありません。この時代の名前と年齢はまだ空でした。私はデバッグの警告を出そうとしましたが、xmlhttp.onreadystatechange =関数が呼び出されていないことが証明されました(第3回試してみます) –

2

あなたはXMLHttpRequest Sを再使用することはできません。
要求ごとに新しいXMLHttpRequestを作成する必要があります。

init()機能を削除してください。

+0

おかげで好きでなければなりません、私はあなたの提案を試みたが、それはまだ同じ...初回のみ。..他の提案のために働きます? –

+0

あなたの質問を編集してください – SLaks

+0

私はコードを編集しました..私にいくつかの提案をお願いします..ありがとう –

0

少し遅れて、この答えの間、それは... 1が要求を送信する前にコールバック関数を割り当てるために

一つの必要性を各位にこれを入れてください。 だから、それはあなたの答えのslaksため、この

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