1. Уважаемые участники и гости, 19 октября codeby будет работать в режиме "Только чтение". Регистрация новых участников будет закрыта. 20 октября портал продолжит работу в прежнем режиме.

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

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

  1. Flying

    Flying Гость

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

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

    1) клиентская часть:
    Код:
    <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) серверная :)
    Код:
    <?= rand(0,100); ?>
    Создает запрос кроссбраузерная функция, запрос не null, но дальше не работает...


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

    etc Гость

    Репутация:
    0
    Что такое "не работает"?
     
  3. Flying

    Flying Гость

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

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

    etc Гость

    Репутация:
    0
    Как узнали?
     
  5. Flying

    Flying Гость

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

    etc Гость

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

    Flying Гость

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

    etc Гость

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

    Flying Гость

    Репутация:
    0
    да вроде никак не изменилось,

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

    etc Гость

    Репутация:
    0
    Показывайте весь код.
     
  11. Flying

    Flying Гость

    Репутация:
    0
    Код:
    <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 Гость

    Репутация:
    0
    Код:
    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 Гость

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

    Код:
    <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 Гость

    Репутация:
    0
    где var?
    быть того не может, ошибку пишет или нет?
     
  15. Flying

    Flying Гость

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

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

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

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

    etc Гость

    Репутация:
    0
    request.onReadyStateChange = updateRandNumber;
    на
    request.onreadystatechange = updateRandNumber;

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


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

    Flying Гость

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

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

    etc Гость

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

    Flying Гость

    Репутация:
    0
    etc, спасибо за помощь

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

    Код:
    <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 Гость

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

    Упс ... я имею ввиду под мазилой - FireFox (у меня сейчас 2.0.0.14), а вы?
     
Загрузка...

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