запрос xmlhttp не работает - PullRequest
0 голосов
/ 01 июля 2010

Я пытаюсь создать базовый чат-сайт и иметь четыре файла: 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);

Так что я полагаю, что это должна быть функция send () в scripts.js.После изменения типа запроса на GET мне больше не повезло, поэтому я выкладываю эту версию.Что не так с моим кодом?

Ответы [ 3 ]

1 голос
/ 01 июля 2010

происходит ли событие?начните помещать в них несколько console.logs и диагностируйте, вызывается ли ваша функция.

edit - подождите, если имя вашего скрипта не совпадает с тем, что есть в теге.

1 голос
/ 01 июля 2010

Несколько вещей:

  1. Если ваш PHP использует $_POST, тогда AJAX open(), который указывает на этот скрипт, также должен быть POST.Аналогично, если ваш PHP использует $_GET, ваш open() должен использовать GET.
  2. Используйте консоль браузера, чтобы проверить, что на самом деле устанавливается в params.Эта строка должна быть в конце вашего URL в GET-запросе [править: под этим я подразумеваю, что вы должны иметь возможность поместить ее в конец вашего адреса в браузере] и продолжать работать.Если это не так, убедитесь, что каждый элемент, входящий в params, имеет URL-кодировку.
  3. Я знаю, что это не является частью вопроса, но, как и сейчас, ваши запросы к БД широко открыты дляАтаки 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.");
  };
1 голос
/ 01 июля 2010

Вызов XMLHttpRequest напрямую похож на использование тега blink: ничего хорошего из этого не выйдет.

Используйте библиотеку!

  • Вы хотите сделать много Javascript?Затем попробуйте большую библиотеку, такую ​​как JQuery или YUI.
  • Если вы просто хотите минимум, вы можете использовать mooTools или другие небольшие библиотеки.
  • Google обслуживает самые популярные библиотеки из их CDNСеть доставки контента).См http://code.google.com/apis/ajaxlibs/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...