Ajax, проблема с "hello, World!"

Тема в разделе "Web 2.0, AJAX, Ruby, RSS технологии", создана пользователем Flying, 5 июн 2008.

  1. Flying

    Flying Гость

    Собственно, начал часов 10 назад изучение ajax, написал свое первое аякс-приложени: смена числа на другое случайное число при нажатии на кнопку. Функцию, которая отправляет запрос ксерверному скрипту, содрал из книги "Изучаем Ajax" (Бретт Маклафлин), в этой части всё правильно, своего кода там килобайт-другой... Скрипт этот работает в эксплоере, а вот в опере и мозилле - нет :D, над этими строчками изрядно посидел, но никак не пойму в чем дело. Почему оно не работает в моих любимых браузерах? Помогите, кому не лень!

    Вот привожу код:

    1) клиентская часть:
    Код (Text):
    <html>
    <head>
    <title>Test</title>
    <script language="Javascript">
    function createRequest() {
    request = null
    try {
    request = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
    request = null;
    }
    }
    }

    if (request == null)
    alert(" :-( ___ Error creating request object! ");

    return request;

    }

    function refreshRandNumber() {
    request = createRequest();
    var url = "ajax/randNumber.php";
    request.open("GET", url, true);
    request.onReadyStateChange = updateRandNumber;
    request.send(null);
    }

    function updateRandNumber() {
    if (request.ReadyState == 4) {
    document.getElementById("randNum").innerHTML = request.responseText;
    }
    }
    </script>
    </head>
    <body>

    <br><br><br>
    <h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
    <input type="button" value="REFRESH!" onclick="refreshRandNumber();">
    <br><br><br>

    </body>
    </html>
    2) серверная :)
    Код (Text):
    <?= rand(0,100); ?>
    Создает запрос кроссбраузерная функция, запрос не null, но дальше не работает...


    ЗЫ: в подключение фреймворков прошу носом меня не тыкать, т.к. с азами не разобрался
     
  2. etc

    etc Гость

    Что такое "не работает"?
     
  3. Flying

    Flying Гость

    "не работает" - это значит, что при нажатии кнопки "REFRESH!" надпись "still empty!" не меняется на случайное число... в Internet Explorer работает ("работает" - значит при нажатии кнопки "REFRESH!" надпись "still empty!" меняется на какое-то число, а при последующих нажатиях в 99% случаев это число меняется на новое число из диапазона от 0 до 100).

    Вот в Internet Explorer работает, а в других - нет, почему :) ? Вроде бы объект request создается во всех браузерах (функция createRequest() возвращает не null), хотя нужного результата нет
     
  4. etc

    etc Гость

    Как узнали?
     
  5. Flying

    Flying Гость

    после строчки
    Код (Text):
        request = createRequest();
    добавил
    Код (Text):
        alert(request);
    мозилла показывает алерт с надписью "[Object XMLHttpRequest]"
     
  6. etc

    etc Гость

    Теперь добавте ее-же перед
    Код (Text):
    if (request.ReadyState == 4) {
    в callback'е что произойдет?
     
  7. Flying

    Flying Гость

    добавлял, везде добавлял... в браузерах, где не работает, до callback-функции вообще не доходит т.к. алерты в ней не срабатывают. Но вот почему в этом скрипте функция updateRandNumber вообще не вызывается, я не пойму...
     
  8. etc

    etc Гость

    ну вот, пойдем дальше ... раз пока не понимаете, то сразу после
    Код (Text):
    <script language="Javascript">
    вставте вот такое -
    Код (Text):
    var request = null;
    , как изменилось поведение?
     
  9. Flying

    Flying Гость

    да вроде никак не изменилось,

    Код (Text):
        alert(request);
    request = createRequest();
    alert(request);
    сначала request нулл, потом объект... алерты в callback по-прежнему не работают
     
  10. etc

    etc Гость

    Показывайте весь код.
     
  11. Flying

    Flying Гость

    Код (Text):
    <html>
    <head>
    <title>Test</title>
    <script language="Javascript">

    var request = null;

    function createRequest() {
    request = null
    try {
    request = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
    request = null;
    }
    }
    }

    if (request == null)
    alert(" :-( ___ Error creating request object! ");

    return request;

    }

    function refreshRandNumber() {
    request = createRequest();
    var url = "ajax/randNumber.php";
    request.open("GET", url, true);
    request.onReadyStateChange = updateRandNumber;
    request.send(null);
    }

    function updateRandNumber() {
    alert("Yeah!");
    if (request.ReadyState == 4) {
    document.getElementById("randNum").innerHTML = request.responseText;
    }
    }
    </script>
    </head>
    <body>

    <br><br><br>
    <h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
    <input type="button" value="REFRESH!" onclick="refreshRandNumber();">
    <br><br><br>

    </body>
    </html>
    вот и весь незамысловатый код

    Усли переменной var url = "ajax/randNumber.php" назначать абсолютный путь, то это ничего не меняет...
     
  12. etc

    etc Гость

    Код (Text):
    function createRequest() {
    if (request != null)
    return;

    try {
    request = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
    request = null;
    }
    }
    }

    if (request == null)
    alert(" :-( ___ Error creating request object! ");

    request.onReadyStateChange = updateRandNumber;
    }

    function refreshRandNumber() {
    createRequest();
    var url = "ajax/randNumber.php";
    request.open("GET", url, true);
    request.send(null);
    }
    так поменяйте эти методы.

    ой а зачем request.send(null);? просто request.send();

    и
    request.open("GET", url, true);
    на
    request.open("GET", url, false);
     
  13. Flying

    Flying Гость

    вот такое по-прежнему в ИЕ работает, в опере - нет. Может карма не в порядке...

    Код (Text):
    <html>
    <head>
    <title>Test</title>
    <script language="Javascript">

    request = null;

    function createRequest() {
    if (request != null)
    return;

    try {
    request = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
    request = null;
    }
    }
    }

    if (request == null)
    alert(" :-( ___ Error creating request object! ");

    request.onReadyStateChange = updateRandNumber;
    }

    function refreshRandNumber() {
    createRequest();
    var url = "ajax/randNumber.php";
    request.open("GET", url, false);
    request.send();
    }

    function updateRandNumber() {
    alert("Yeah!");
    if (request.ReadyState == 4) {
    document.getElementById("randNum").innerHTML = request.responseText;
    request = null;
    }
    }
    </script>
    </head>
    <body>

    <br><br><br>
    <h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
    <input type="button" value="REFRESH!" onclick="refreshRandNumber();">
    <br><br><br>

    </body>
    </html>
    в ИЕ и число меняется, и алерт выдается, в опере - ничего не происходит

    ЗЫ: прочитал добавление, сейчас попробую... менять true на false пробовал уже, кстати, сейчас нулл убрать попробую

    ЗЗЫ: и опять не работает
     
  14. etc

    etc Гость

    где var?
    быть того не может, ошибку пишет или нет?
     
  15. Flying

    Flying Гость

    var добавил, все равно не работает | не работает без ошибок, просто при нажатии на кнопку "РЕФРЕШь!" ничего не происходит

    сейчас какой-нить браузер другой поставлю... ХЗ что это...

    В еще одной мозилле не работает *wall*
    не судьба, звезды не так лягли, луна не в той фазе или тупо руки кривые...

    ----
    надо заново с ajax начать, по-другому как-нить
     
  16. etc

    etc Гость

    request.onReadyStateChange = updateRandNumber;
    на
    request.onreadystatechange = updateRandNumber;

    тут не в этом дело, просто во первых это скрипт, во вторых разница в реализаций, ну а в третьих :) как правило все пользуют какиенить библиотеки готовые, и поэтому на такие вещи внимание особо не обращаешь.


    Но писать надо сразу правильно, поэтому то, надо и var писать и все вот такие мелочи.
     
  17. Flying

    Flying Гость

    омг, помогло в какой-то степени :), теперь в опере вызывается функция updateRandNumber (алерты, расположенные в ней, работают), в моззиле все также, как и было... зато значение request.responseText в опере всегда равно 28 ;). Ну и ужас, onreadystatechange должно быть в нижнем регистре, а responseText по-верблюжьи, имхо это нелогично

    в общем это ужас: в одном браузере так, в другом этак, в третьем вообще свои дебильные "особенности"... уж лучше сразу какой-нить фреймворк осваивать, который работает на 100%, prototype почему-то мне кажется подходящим, по отзывам распространен и доки на русском есть
     
  18. etc

    etc Гость

    В программировании вообще, а в "скриптовом" особенно, логику искать весьма проблематично. :rolleyes:
    Ага, советую ajax.asp.net ;), только вот 100% никто не гарантирует.
     
  19. Flying

    Flying Гость

    etc, спасибо за помощь

    Все-таки сделал я, чтоб оно работало в трех браузерах:

    Код (Text):
    <html>
    <head>
    <title>Test</title>
    <script language="Javascript">

    var request = null;

    function createRequest() {
    if (request != null)
    return;

    try {
    request = new XMLHttpRequest();
    } catch (trymicrosoft) {
    try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
    try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
    request = null;
    }
    }
    }

    if (request == null)
    alert(" :-( ___ Error creating request object! ");

    }

    function refreshRandNumber() {
    createRequest();
    var url = "ajax/randNumber.php?q=1";
    request.onreadystatechange = updateRandNumber;
    request.open("GET", url, true);
    request.send(null);
    }

    function updateRandNumber() {
    if (request.readyState == 4) {
    document.getElementById("randNum").innerHTML = request.responseText;
    request = null;
    }
    }
    </script>
    </head>
    <body>

    <br><br><br>
    <h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
    <input type="button" value="REFRESH!" onclick="refreshRandNumber();">
    <br><br><br>

    </body>
    </html>
    эт точно:

    1. Если request.send(), то не работает в мозилле, с request.send(null) работает
    2. Если url = "ajax/randNumber.php?q=1" изменить на url = "ajax/randNumber.php", то опера будет кэшировать этот запрос, вообще для 100% пробивания кэша над делать с Date().egtTime()...
    3. onreadystatechange должно быть в нижнем ркгистре, иначе в опере и мозилле не работает
    4. request.open("GET", url, true), false - не работает в мозилле, хотя хз почему так
     
  20. etc

    etc Гость

    у меня работает request.send() везде.
    Все нормальные браузеры будут кэшировать. И вообще кэширование для этого и создано, а вот программист должен смотреть если его функционал должен в любом случае посылать апрос, то надо делать соотв действия. Правда у нас часто делают это когда надо и когда нет.
    Хм... лень искать, но вроде это именно в мозилле баг, она не умеет работать в асинхронном режиме, за что и отвечает 3 параметер.
    По крайней мере опять же у меня работает только с false.

    Упс ... я имею ввиду под мазилой - FireFox (у меня сейчас 2.0.0.14), а вы?
     
Загрузка...
Похожие Темы - Ajax проблема hello
  1. aameno2
    Ответов:
    1
    Просмотров:
    491
  2. solomonec
    Ответов:
    1
    Просмотров:
    1.432
  3. Сергей74
    Ответов:
    1
    Просмотров:
    1.048
  4. АВаТаРчег
    Ответов:
    1
    Просмотров:
    1.048
  5. obnal24
    Ответов:
    0
    Просмотров:
    890

Поделиться этой страницей