在javascript函数中进行2次xmlhttp.open调用

Question

当我选择下拉列表1中的项目时，我有一个网站使用下面的javascript函数来填充列表2。我想要实现的是更新列表2和列表3。下面显示的功能分别适用于列表2和列表3但使用警报我可以看到它在第一次发送后停止，如果我将它们放在一起。我怎么能让他们一起工作？

这是调用函数 checkTeacherList 的Select，它正常工作。

<select name="department_list" id="department_list" selected="All" onchange="checkTeacherList(this.value, '<?php echo $user_login;?>');" >

eJavaScript函数 checkTeacherList

<script type="text/javascript">
function checkTeacherList(departmentName, schoolName) 
{
var xmlhttp;

//populating List 2

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("departmentTeachers").innerHTML=xmlhttp.responseText;
    }
  }

var d = new Date();

xmlhttp.open("GET","http://website/getTeachers1.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();


//populating List 3

alert("Is it getting this far?"); // this alert does not get reached

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("nondepartmentTeachers").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","http://website/getTeachers2.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
xmlhttp.send();
xmlhttp.send();

}
</script>

Answer 1

因为您正在调用“xmlhttp.send（）;”而未调用警报。两次。 第二次调用会产生错误。

Answer 2

这不是一个解决这个问题的好方法。我应该专注于设置ONE AJAX连接，脚本只需要一个连接。

使用此方法的主要优点是收集所有数据所需的时间。比它做两次快两倍。

但是，我不确定你是否可以修改php文件。

如果是，请编辑它。我注意到这两个请求都包含相同的参数。

在js;

// function to fill option
var fillOptions = function(data) {
   // use data to fill drop down boxes
   var teacher1 = data["teacher1"]; // get $teacher1 which is in 'teacher1'
   var teacher2 = data["teacher2"]; // get $teacher2 which is in 'teacher2'
}

// function to check teacher list
function checkTeacherList(departmentName, schoolName) 
{
  // create object by browser type
  var xmlhttp;
  // code for IE7+, Firefox, Chrome, Opera, Safari
  if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
  // for IE6, IE5
  else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  // event when request is done
  xmlhttp.onreadystatechange=function() 
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      // get data
      var data = JSON.parse(xmlhttp.responseText);
      // send to function to handle it
      fillOptions(data);
      }
  }
  // open link
  xmlhttp.open("GET","http://website/getAllTeachers.php?schoolName="+schoolName+"&departmentName="+departmentName+"&nocache="+d.getSeconds(),true);
  // send
  xmlhttp.send();
}

和getAllTeachers.php（一个新的php文件，但如果你愿意，你可以将你的两个php文件包装在一起）

$teacher1 = ... // teacher1 list
$teacher2 = ... // teacher2 list

// return with a JSON type
header('Content-Type: application/json');
// reply with json format
echo json_encode(array('teacher1' => $teacher1, 'teacher2' => $teacher2));

php文件将以JSON格式回复数据。在js中，您可以看到响应正在使用JSON.parse()函数处理并传递给fillOptions(data)函数。在那里，您可以访问由php提交的数据并使用相同的数据填写您的下拉框。

（我不知道回复内容，但

document.getElementById("nondepartmentTeachers").innerHTML = data["teacher2"];

应达到与预期相同的效果）

如果你想使用你的解决方案，你已经两次调用.send()函数，第二个函数将返回错误。