0

我正在编写代码来制作一个基本的聊天室。我的代码将行输入到输入文本框中，然后使用 Ajax 写入随机文件名，然后我每秒使用 setInterval 从文本文件加载和显示 javascript 循环。

在用户使用填充 MySQL 数据库的信息登录后，我希望在进入聊天时将基本欢迎消息自动保存到文本文件中。为此，我使用用户名作为“主机”调用我的 saveData 函数，然后调用在变量中声明的欢迎消息。

将登录信息发送到数据库的函数和保存欢迎消息的函数都在 login() 函数下调用。提交信息表单后调用 login() 函数。

问题是：在 login() 下调用时，我无法让函数 saveLogin() 和 saveData() 都完全执行。如果我注释掉一个而不是另一个，该功能将正常工作。所以他们独立工作，而不是一起工作。如果调用这两个函数，则 saveData() 工作正常，但 saveLogin() 不会。我不知道为什么。

我能够将问题缩小到 saveLogin() 函数下的“XMLHttpRequestObject.send”事件。该函数的其余部分似乎已执行。我想这可能是变量名或其他什么问题，所以我尝试了一些变化，但没有解决这个问题。

<script language = "javascript">

// loads XML HTTP per browser type
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }

//create random string
function randomString(len, charSet) {
charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var randomString = '';
for (var i = 0; i < len; i++) {
    var randomPoz = Math.floor(Math.random() * charSet.length);
    randomString += charSet.substring(randomPoz,randomPoz+1);
}
return randomString;
}
rString = randomString(128);
filename = rString;

 // loads chat lines from file using POST method with timer
 function getData(geturl) 
 { 
   if(XMLHttpRequestObject) {       
    geturl = "getdata.php";
    XMLHttpRequestObject.open("POST", geturl);
    XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    XMLHttpRequestObject.onreadystatechange = function() 
    { 
      if (XMLHttpRequestObject.readyState == 4 && 
        XMLHttpRequestObject.status == 200) { 

         document.formChat2.textarea1.value = XMLHttpRequestObject.responseText; 
      } 
    } 

    XMLHttpRequestObject.send("filename=" + filename);
   }
 }

 // saves new chat line to file
 function saveData(filename, username, newline) 
 { 
   if(XMLHttpRequestObject  && document.formChat1.txtLine.value != "" || username == "Host") {
    var url = "savedata.php"; 
    XMLHttpRequestObject.open("POST", url); 
      XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    XMLHttpRequestObject.onreadystatechange = function() 
    { 
      if (XMLHttpRequestObject.readyState == 4 && 
        XMLHttpRequestObject.status == 200) { 

      } 
    } 

    XMLHttpRequestObject.send("filename=" + filename + "&username=" + username + "&newline=" + newline); 
    document.formChat1.btnDisplay.click();
    document.formChat1.txtLine.value = "";
   }
 }

 // saves login info to database
 function saveLogin(filename, username, email, phone, weburl) 
 { 
   if(XMLHttpRequestObject) {
    var loginurl = "login.php"; 
    XMLHttpRequestObject.open("POST", loginurl); 
      XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    XMLHttpRequestObject.onreadystatechange = function() 
    { 
      if (XMLHttpRequestObject.readyState == 4 && 
        XMLHttpRequestObject.status == 200) { 

      } 
    } 
    XMLHttpRequestObject.send("filename=" + filename + "&username=" + username + "&email=" + email + "&phone=" + phone + "&weburl=" + weburl); 
   }
 }

function login(divID) {
    username = document.formLogin.txtLogin.value;
    email = document.formLogin.txtEmail.value;
    phone = document.formLogin.txtPhone.value;
    weburl = document.formLogin.txtURL.value;
    saveLogin(filename, username, email, phone, weburl);

    var obj = document.getElementById(divID); 
    obj.innerHTML = "<div id='targetDiv'><form name='formChat1' method='POST' onSubmit='return false;'><input type='text' name='txtLine' id='txtLine' size='30'><input type='button' name='btnDisplay' value='Display Message' onclick=\"setInterval('getData(filename)', 1000);\"><input type='button' name='btnSave' value='Send Message' onclick='saveData(filename, username, txtLine.value)'></form><form name='formChat2'><textarea name='textarea1' id='textarea1' rows='10' cols='50'></textarea></form></div>";
    welcome = "Welcome to the chat.";
    saveData(filename, 'Host', welcome);
    }


</script>


<div id="targetDiv">
    <form name="formLogin" method="POST">
    Please enter your info:<br>
    <input type="text" name="txtLogin" id="txtLogin" size="50" value="Name (Required)" onfocus="document.formLogin.txtLogin.value=''"><br>
    <input type="text" name="txtEmail" id="txtEmail" size="50" value="Email Address (Required)" onfocus="document.formLogin.txtEmail.value=''"><br>
    <input type="text" name="txtPhone" id="txtPhone" size="50" value="Phone Number (Optional)" onfocus="document.formLogin.txtPhone.value=''"><br>
    <input type="text" name="txtURL" id="txtURL" size="50" value="Website URL (Optional)" onfocus="document.formLogin.txtURL.value=''"><br>
    <input type="button" name="btnLogin" value="Login"
        onclick="login('targetDiv');">
</form>
</div>
4

1 回答 1

0

您需要使用不同的 XHR 对象，以便获得两个响应，因为您同时发送两个 AJAX 请求。

编写如下函数：

function getXHR() {
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return XMLHttpRequestObject;
}

然后在执行 AJAX 请求的每个函数中调用它，使用：

var XHRObject = getXHR();

并在函数中使用它。

于 2013-05-25T18:38:05.890 回答