处理多个XMLHttpRequest调用f

时间:2013-03-27 19:44:35

标签: ajax xmlhttprequest-level2

注意:我有两个xmlHttp.open请求,其中包含两个不同的url字符串和两个onreadystatechange函数。我有一个html表单,有4个文本框和一个提交按钮。用户将数据输入文本框1(id)& 2(类型),我的这些框的onchange函数发出xmlHttp.open(“GET”,url,true);使用类似“getQuestion.php?id = 12345& type = ABC”的网址。然后我的statechange函数获取返回的xml响应并将响应放入第3个文本框。所有这一切都很棒!我输入文字和文字弹出一个框,问我一个问题。

现在我尝试做的是填写第4个文本框并单击提交按钮后,我希望提交功能再次使用xmlHttp.open。这一次,有一个新网址,在& answer =“XXXX”的网址行上还有一个参数,其中XXXX是输入第4个框的内容。第二个url调用是因为调用了新的statechange函数。但是响应始终为空,我看到“回答是。”。我认为这必须与多个网址有关,我没有正确设置,但我无法从“多个xmlHttpRequest”的网络搜索中找到任何内容。我已经附加了我的HTML和javacode块,它启动了失败的服务器请求和它的状态转换功能。我究竟做错了什么? 还有一件事,如果我用参数直接调用我的第二个url(php脚本),我会得到我期望的响应。

<script language="Javascript">
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
var attempts = 0;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function CheckAnswer() {
  var myId = document.getElementById("FilerID").value;
  var myType = document.getElementById("FilerType").value;
  var myQuestion = document.getElementById("QuestionID").value;
  var myAnswer = document.getElementById("AnswerID").value;

  if (myId == "" || myType == "" || myQuestion == "" || myAnswer == "")
  {
      alert("You must fill in all boxes before submitting this request.");
      return;
  }

  // Build the URL to connect to
  var url = "getAnswer.php?id=" + encodeURI(myId) + "&type=" + encodeURI(myType) + "&answer=" + encodeURI(myAnswer);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = AnswerState;

  // Send the request
  xmlHttp.send(null);
}

function AnswerState() {
  if (xmlHttp.readyState == 4) {
    var response2 = xmlHttp.responseText;
        alert("answer was " + response2+".");
        switch (response2)
    {
        case "pdwLIMBO":
            alert("There was an error while trying to reset your password.");
            break;
        case  "pdwFALSE":
            alert("Answer was incorrect.");
            attempts = attempts +1;
            if (attempts == 3)
            {
                /*is there a way to kill it right now?*/
            }
            else
                document.getElementById("AnswerID").focus();
            break;
        case "pdwTRUE":
            alert("answer was " + response);
            alert("Your new password will be emailed to you.  Please check your email.");
            break;
        default:
            alert("nothing!");
            break;
    }

  }
}
<table width="98%" border="0" align="center" height="280" background="/images/DSCF0308_B.gif">
<tr>
<td align="center">
<h2 align="center" class="style26">Reset Service</h2>
<!--<form name="resetMe" action="SecretQuestion3.php" method="post" onsubmit="return CheckInput();">-->
<form  >
  <TABLE cellspacing=0 cellpadding=5 border=0 width="90%"> <!---this color is light blue in sign in box--->
      <tr id="FilerIDRow">
      <TD align="right" class="RptStd"><b>Filer ID:</b></TD>
      <TD align="left" class="RptStd"> <input type="text" id="FilerID" name="FilerID" nowrap size=8/ onChange="callForQuestion();"></td>
    </tr>
    <tr >
    <TD align="right" class="RptStd" ><b>Filer Type: </b></TD>
    <TD align="left" class="RptStd">
       <select name="FilerType" id="FilerType" onChange="callForQuestion();">
        <option value="COH">COH: Candidate/Officeholder (Non-Judicial)</option>
        <option value="JCOH">JCOH: Judicial Candidate/Officeholder </option>
       </select></TD>
    </tr>
    <tr id="QuestionRow">
    <TD align="right" class="RptStd"><b>Secret Question:</b></TD>
    <TD align="left" class="RptStd"> <input type="text" id="QuestionID" name="QuestionID" nowrap size="50"></td>
    </tr>
    <tr id="AnswerRow">
    <TD align="right" class="RptStd"><b>Your Answer:</b></TD>
    <TD align="left" class="RptStd"> <input type="text" id="AnswerID" name="AnswerID" nowrap size="50" onChange="checkAnswer();"></td>
    </tr>
    <TR>
    <TD align="center" colSpan=2><br><INPUT type="button" value="  Reset  " name="btn_submit" class="RptBtn" onClick="CheckAnswer()">&nbsp;&nbsp;
    <INPUT type="button" value=" Clear " name="btn_clear" class="RptBtn" onClick="ClearForm()"></TD>
    </TR>
</table>
</form> 
</td>
</tr>
</table>

2 个答案:

答案 0 :(得分:5)

+1 Jacob Tobias在参考Rob W的解决方案时提出的建议。我已经重申了Rob W的建议,Jacob也在联系/提及:

使用var来定义xmlHttp:

更改此内容

xmlHttp = new XMLHttpRequest();

到此:

var xmlHttp = new XMLHttpRequest();

Rob W的解释:目前,您将xmlHttp指定为全局变量。因此,您只能有一个名为xmlHttp ...

的变量

如果在变量之前使用var,则变量在本地范围内定义,允许您多次重新定义变量。

答案 1 :(得分:3)

尝试改变:

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

为:

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  var xmlHttp = new XMLHttpRequest();
}

我遇到了类似的问题,this link帮了我