xmlhttp請求不起作用

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就像使用眨眼標簽一樣：沒什么好用的。

使用圖書館！

您想做很多Javascript嗎？ 然后嘗試使用更大的庫，例如JQuery或YUI。
如果只需要最小數量，則可以使用mooTools或其他小型庫。
Google提供了CDN（內容交付網絡）中最受歡迎的庫。 請參閱http://code.google.com/apis/ajaxlibs/

Answer 2

事件被解雇了嗎？ 開始在其中放置一些console.logs並診斷是否正在調用您的函數。

編輯-等待，是您的腳本名稱與標記中的名稱不匹配。

Answer 3

幾件事：

如果您的PHP使用$_POST則指向該腳本的AJAX open()也應為POST 。 同樣，如果您的PHP使用$_GET ，則open()應該使用GET 。
使用瀏覽器控制台檢查params實際設置的內容。 該字符串應該能夠在GET請求中位於URL的末尾[編輯：通過這個，我的意思是您應該能夠將其置於瀏覽器中地址的末尾]，並且仍然可以使用。 如果不是，請確保進入params每個元素都經過URL編碼。
我知道這不是問題的一部分，但是就目前而言，您的數據庫查詢對SQL注入攻擊大為開放。 確保您轉義了將要進入數據庫的每個值。 另外，如果您可以將time存儲為數字而不是字符串，則查詢速度將大大提高。 當只有幾百或幾千條記錄時，使用字符串的性能代價永遠不會在開發過程中顯示出來，但是當數據庫開始填充時，使用它的性能代價就不會出現。

我不明白為什么有那么多人反對推出您自己的XHR請求。 使用庫消除了早期構建AJAX應用程序的許多謎團，但是如果您使用的方法錯誤（POST而不是GET），那么使用庫將無濟於事，調試實際上會更加困難，因為您需要挖掘通過大量代碼來查看失敗的地方。 實際上，這實際上並沒有什么困難，您自己做可以幫助您了解請求的生命周期。 下面是一個常見的跨瀏覽器代碼段。 這將使XMLHttpRequest甚至在早期的IE瀏覽器中也可用：

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

xmlhttp請求不起作用

問題描述

3 個解決方案

解決方案1
1 2010-07-01 00:45:04

解決方案2
1 2010-07-01 00:50:32

解決方案3
1 2010-07-01 01:05:23

xmlhttp請求不起作用

問題描述

3 個解決方案

解決方案1 1 2010-07-01 00:45:04

解決方案2 1 2010-07-01 00:50:32

解決方案3 1 2010-07-01 01:05:23

解決方案1
1 2010-07-01 00:45:04

解決方案2
1 2010-07-01 00:50:32

解決方案3
1 2010-07-01 01:05:23