Question

我正在尝试构建一个基本的聊天网站，并有四个文件：chat.html，scripts.html，load.php和send.php。

他们是：

chat.html：

<html>
    <head>
        <title>Josh's Python Chat Website</title>
        <script type="text/javascript" src="chatscripts.js">
        </script>
    </head>
    <body>
        <div id="divUsername" style="
            position: absolute;
            padding: 0px;
            margin: 0px;
            top: 10px; 
            left: 10px; 
            height: 26px; 
            width: 400px;">
            Username: <input type="text" id="username" />
        </div>

        <div id="display" style="
            border-style: solid;
            border-width: 1px;
            overflow:auto; 
            position: absolute;
            padding: 0px;
            margin: 0px;
            top: 46px;
            left: 10px;
            height:400px; 
            width:400px;">
        </div>

        <div id="divLineInput" style="
            position: absolute;
            padding: 0px;
            margin: 0px;
            top: 456px;
            left: 10px;
            height: 26px;
            width: 400px;">
            <input type="text" id="line" size="50" onkeydown="if(event.keyCode==13) send()" />
            <input type="button" id="sendbutton" value="Send" onclick="send()" />
        </div>
    </body>
</html>

scripts.js中：

function load(){
    var xmlhttp = new XMLHttpRequest();
    var params="";
    xmlhttp.open("GET", "load.php", true);
    // xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var display = document.getElementById("display");           
            display.innerHTML = xmlhttp.responseText;
            display.scrollTop = display.scrollHeight;
        }
    }
    xmlhttp.send(params);
}

function send(){
    var xmlhttp = new XMLHttpRequest();
    var url="send.php";
    var d = new Date();
    var username = document.getElementById("username");

    if (username.value==null || username.value==""){
        alert("Please enter a username.");
        username.focus();
        return false;
    }

    var line = document.getElementById("line");
    var params= "time=" + d.getTime().toString() + "&user=" + username.value + "&line=" + line.value;
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function(){}
    xmlhttp.send(params);

    document.getElementById("line").value = "";

    load();
    line.focus();
}

load();
setInterval("load()", 3000);

load.php：

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$dbname = "website";

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);

$query = "select * from chat";
$result = mysql_query($query);
$num = mysql_numrows($result);

$response = "";
$i = 0;
while($i < $num){
    $response .= "<p>" . mysql_result($result, $i, "user") . ": " . mysql_result($result, $i, "line") . "</p>";
    $i++;
}

mysql_free_result($result);
mysql_close($conn);

echo $response;
?>

最后，send.php：

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "password";
$dbname = "website";

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);

$query = "insert into chat (time, user, line) values ('" . $_GET['time'] . "', '" . $_GET['user'] . "', '" . $_GET['line'] . "')";
mysql_query($query);
mysql_close($conn);
?>

网站加载我使用命令行客户端插入mysql数据库的聊天项。 send.php也适用，因为我打电话

localhost/send.php?time=12345&user=Herrturtur&line=HelloWorld

在浏览器的地址栏中，“Herrturtur：HelloWorld”会在重新加载时显示在聊天窗口中。

创建数据库的脚本如下：

create table chat (time INT(16), user VARCHAR(256), line TEXT);

所以我认为它必须是scripts.js中的send（）函数。在将请求类型更改为GET后，我没有比这更好的运气了，所以我发布了这个版本。我的代码出了什么问题？

Answer 1

直接调用XMLHttpRequest就像使用blink标签一样：没有任何好处来自它。

使用图书馆！

你想做很多Javascript吗？然后尝试更大的库，如JQuery或YUI。
如果您只想要最小值，可以使用mooTools或其他小型库。
Google通过其CDN（内容分发网络）提供最受欢迎的图书馆。请参阅http://code.google.com/apis/ajaxlibs/

Answer 2

是被解雇的事件？开始在theres中放入一些console.logs并诊断你的函数是否被调用。

编辑 - 等待，是您的脚本名称与标记中的名称不匹配。

Answer 3

有几件事：

如果您的PHP使用$_POST，则指向该脚本的AJAX open()也应为POST。同样，如果您的PHP使用$_GET，则您的open()应使用GET。
使用浏览器控制台检查params中实际设置的内容。这个字符串应该能够在GET请求中到达URL的末尾[编辑：我的意思是你应该能够将它放在浏览器地址的末尾]并且仍然可以工作。如果没有，请确保进入params的每个元素都是URL编码。
我知道这不是问题的一部分，但就像现在一样，你的数据库查询对SQL注入攻击是开放的。确保转义将进入数据库的每个值。此外，如果您可以将time存储为数字而不是字符串，那么您的查询将会大大加快。当您只有几百或几千条记录时，使用字符串的性能成本永远不会显示在开发期间，但是当您的数据库开始填满时它将会显示。

我不明白为什么这么多人反对滚动你自己的XHR请求。使用库在早期构建AJAX应用程序时会带来许多谜团，但是如果你使用错误的方法（POST而不是GET）它将无法帮助你，并且调试实际上可能更难，因为你需要挖掘通过 lot 代码来查看失败的地方。它实际上甚至不是很困难，而且自己动手可以帮助您理解请求的生命周期。下面是一个常见的跨浏览器代码段。即使在早期的IE浏览器中，这也会使XMLHttpRequest可用：

if (typeof XMLHttpRequest === "undefined")
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) {}
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
    throw new Error("This browser does not support XMLHttpRequest.");
  };

xmlhttprequest无法正常工作

3 个答案: