Question

我使用HTML和javascript创建一个简单的REST Web服务使用者。这是代码：

<!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）。

主要问题是，为什么这段代码只能运行一次？

例如，如果我在empNo文本框中输入1并且我按下了getDetail按钮，这是第一次，它将根据我之前输入的员工编号显示员工的姓名和年龄。但是对于第二个或第三个我按下getDetail按钮，它不再起作用了。我试图提供一些警告来帮助我调试该代码，但结果是xmlhttp.onreadystatechange = function（）仅在第一次按下getDetail按钮时才有效。

有谁知道如何解决这个问题？真的卡在这里..非常感谢帮助我..

仅供参考：这是我的网络服务代码：

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
}

Answer 1

您无法重复使用XMLHttpRequest 您需要为每个请求创建一个新的XMLHttpRequest。

摆脱init()功能。

Answer 2

将它放在脚本标记

之间

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);
              }
        }
    }

Answer 3

这个答案有点晚了，但可能与谁有关......

需要在发送请求之前分配回调函数。所以应该喜欢这个

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

为什么语句xmlhttp.onreadystatechange导致此程序只运行一次？

3 个答案: