AJAX i obiektowy JavaScript

0

Idąc krok dalej (i oczywiście napotykając nowe błędy) postanowiłem zająć się obiektowym JS dołączając do niego AJAX i tak oto przepisałem kod z książki który oczywiście nie zadziałał... :( literówki sprawdzone, co mogłem zauważyć z moją mała wiedzą to zauważyłem, ale nadal nie zostaje wyświetlona żadna informacja na ekranie, dziś ostatni raz proszę o pomoc - wydaje mi się że wszystkie te błędy wynikają ze zmęczenia :)

PS: Debuger w google chrome nie pokazuje żadnych błędów tak jak dodatek FireBug w Firefox'ie

Oto pliki:

xhr.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="xhr.js"></script>
  </head>
  <body>
    <div id="test">
    </div>
    <script>
        XmlHttp
        ({url:'async.TXT',
          complete: function(xhr, reposne, status){
            document.getElementById("test").innerHTML = response;
          }
        });
    </script>
    </body>
</html>

Oraz xhr

//Konstruktor obiektu XmlHttp potrafiacy pobierac ustawienia zadania:
//url - adres URL servera
//contentType - rodzaj zawartosci zadania
//type - sposob realizacji zadania (domyslnie metoda GET)
//data - opcjonalnie parametr zadania
//async - czy zadanie ma byc realizowane asynchronicznie (domyslna wartosc true)
//showErrors - wyswietlaj komunikaty o bledach
//complete - funkcja zwrotna wywolywana po zakonczeniu realizacji zadania

function XmlHttp(settings){
    //Przechowuje obiekt klasy settings we wlasciwosci klasy
    this.settings = settings;

    //Nadpisuje domyslne ustawienia tymi, ktore zostaja przekazane w postaci argumentu konstruktora
    //Domyslny adres URL wskazuje na bierzaca strone
    var url = location.href;
    if(settings.url)
        url = settings.url;

    //Domyslny rodzaj zawartosci jest rodzajem wlasciwym dla formularzy
    var contentType = "application/x-www-form-urlencoded";
    if(settings.contentType)
        contentType = settings.contentType;

    //Zadanie jest realizowane domyslnie za pomoca metody GET
    var type = "GET";
    if(settings.type)
        type = settings.type;

    //Domyslnie nie przesyla zadnych parametrow
    var  data = null;
    if(settings.data){
        data = settings.data;
        //Jesli zadanie jest realizowane przy uzyciu metody GET, trzeba odpowiednio zmodyfikowac adres URL
        if(type == "GET")
            url = url + "?" + data;
    }

    //Domyslnie odpowiedz realizowana jest asynchronicznie
    var async = true;
    if(settings.async)
        async = setting.async;

    //Domyslnie wyswietlane sa wszystkie komunikaty o bledach infrastruktury
    var showErrors = true;
    if(settings.showErrors)
        showErrors = settings.showErrors;

    //Tworzy obiekt klasy XmlHttpRequest
    var xhr = XmlHttp.create();

    //Ustawia wlasciwosci odpowiedzi
    xhr.open(type, url, async);
    xhr.readyonstatechange = onreadystatechange;
    xhr.setRequestHeader("Content-Type", contentType);
    xhr.send(data);

    //Funkcja odpowiedzialna za wyswietlanie bledow
    function displayErrors(message){
        //Ignoruje blad jesli zmienna showErrors przyjmuje wartosc false
        if(showErrors){
            //Wyswietla komunikat o bledzie
            alert("Wystapil blad:\n"+message);
        }
    }

    //Funkcja odczytujaca odpowiedz servera
    function readResponse(){
        try{
            //Pobiera zawartosc odpowiedzi
            var contentType = xhr.getResponseHeader("Content-Type");
            //Tworzy obiekt json, jesli odpowiedz tego wymaga
            if(contentType == "application/json"){
                response = JSON.parse(xhr.responseText);
            }
            //Pobiera element obiektu DOM, jesli odpowiedz zapisana jest w formacie XML
            else if(contentType == "text/xml"){
                response = xhr.responseXML;
            }
            //Domyslnie pobiera odpowiedz w postaci pliku tekstowego
            else{
                response = xhr.responseText;
            }

            //Wywoluje funkcje zwrotna jesli taka istnieje
            if(settings.complete)
                settings.complete(xhr, response, xhr.status);
        }
        catch(e){
            displayError(e.toString());
        }
    }

    //Funkcja wywolywana w chwili zmiany statusu zadania
    function onreadystatechange(){
        //Gdy metoda readyState zwraca wartosc 4, odczytuje odpowiedz z servera
        if(xhr.readyState == 4){
            //Odczytuje odpowiedz tylko wtedy, gdy status zadania HTTP potwierdza jego pomyslna realizacje
            if(xhr.status == 200){  
                try{
                    //Odczytuje odpowiedz z servera
                    readResponse();
                }
                catch(e){
                    //Wyswietla komunikat o bledzie
                    displayError(e.toString());
                }
            }
            else{
                //Wyswietla komunikat o bledzie
                displayError(xhr.statusText);
            }
        }
    }
}

    //Statyczna metoda zwracajaca nowy obiekt klasy XMLHttp
    XmlHttp.create = function(){
        //Bedzie przechowywac odwolanie do obiektu klasy XmlHttpRequest
        var xmlHttp;

        try{
            //Przy zalozeniu ze strona jest wyswietlana w IE7 lub nowszej
            xmlHttp = new XMLHttpRequest();
        }
        catch(e){
            //Przy zalozeniu ze strona jest otwierana w IE6 lub starszej
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
            }
            catch(e){}
        }

        if(!xmlHttp)
            alert("Podczas tworzenia obiektu klasy XmlHttpRequest wystapil blad");
        else
            return xmlHttp;
    }

Jeżeli to błahy błąd to z góry przepraszam człowieka który go postanowi szukać, dziś zaprzestaje zabawy z AJAX'em, miejmy nadzieje że na wieczór ogarnę troszkę więcej niż teraz :)

0

jak to debuger nie pokazuje błędów
debugery nie pokazują błędów - służą do przeanalizowania krok po kroku co się dzieje żeby błąd wyłapać i to powinieneś zrobić

i odpuść sobie to już i zajmij się jQuery, bo ideę już chyba załapałeś
ewentualnie naucz się jeszcze korzystać z debuggera, bo teraz zdaje się tak nazywasz konsolę błędów

a jak przejrzysz źródła jQuery to się złapiesz za głowę ile przypadków nie masz szans przewidzieć samemu

przykładowo:
// IE - #1450: sometimes returns 1223 when it should be 204

lub:

// Firefox throws exceptions when accessing properties
                        // of an xhr when a network error occured
                        // http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
0

Czy jak otwierasz tę stronę to w pasku adresu masz file://... czy też http://...? Jeśli to pierwsze, to nic dziwnego, że ajax nie działa.

Co pokazuje firebug w zakładce network? Widać to żądanie? Proponuję też dodanie w kluczowych miejscach console.log(obiekt).

0

Jak błędy wynikają ze zmęczenia, to odpocznij, zamiast truć na forum. Sądząc po postach, masz problemy z debugowaniem. MUSISZ opanować debugowanie. Bez tego nie będziesz programistą na rozsądnym poziomie. To powinien być dla Ciebie priorytet.

Rozumiem, że masz zapał i że chcesz jak najwięcej zrobić -- chwała Ci za to. Paradoksalnie, czasem najlepiej NIC nie robić, tzn. odpocząć, zająć się czymś innym. Przespać, jeśli nie śpisz wystarczająco dużo. I po przerwie ponownie spróbować, samemu.

Masz w kodzie pewne błędy logiczne, np. tego typu konstrukcje:

        var async = true;
        if(settings.async)
                async = setting.async;

Nie da się ustawić w settingsach, żeby flaga async była false. Bo jeśli podasz settings.async = false, to warunek if (settings.async) nie zostanie spełniony i zmienna async nie otrzyma wartości fałszywej, czyli będzie wciąż miała domyślną wartość prawdziwą. Jeśli podasz settings.async = true, to wtedy warunek przejdzie, ale ustawi zmienną async na true, czyli tak, jak było. Czyli nic nie zrobi.

Wszystko przez to, że wyrażenie przy ifie nie sprawdza, czy w ustawieniach jest pole settings. Tylko czy pole to ma wartość prawdziwą. Jeśli pole istnieje, ale ma wartość fałszywą, to się nie liczy i warunek nie przechodzi.

Powinieneś zastosować np. któryś z poniższych warunków -- wszystkie sprawdzają, czy w ustawieniach podano pole async:

if (typeof settings.async !== "undefined") // to uwzględnia również ew. prototypy settings, tj. ustawienia jakoś "odziedziczone"
...

if ("async" in settings) // j/w
...

if (settings.hasOwnProperty("async")) // to nie uwzględnia prototypów
...
0

@nav

Czy jak otwierasz tę stronę to w pasku adresu masz file://... czy też http://...? Jeśli to pierwsze, to nic dziwnego, że ajax nie działa.
Co pokazuje firebug w zakładce network? Widać to żądanie? Proponuję też dodanie w kluczowych miejscach console.log(obiekt).

Otwieram stronę przez protokół HTTP, w network widać że plik został wysłany asynchronicznie

@gdfsgsdg

i odpuść sobie to już i zajmij się jQuery, bo ideę już chyba załapałeś
ewentualnie naucz się jeszcze korzystać z debuggera, bo teraz zdaje się tak nazywasz konsolę błędów

Odpuszczę jak przeczytam całą książkę, jestem w połowie i zbytnio nie jestem przyzwyczajony do przerywania czegoś w trakcie pracy. Co do konsoli błędów, być może ja źle przekazałem zwoje zamiary, chodziło mi o to że debuger nie zgłosił żadnego błędu/ostrzeżenia/informacji w konsoli, nie wiedziałem że aż tak wnikliwie trzeba pisać na forum ^^
chciałbym się przerzucić na jQuery, ale chcę też przeczytać książkę do końca :)

służą do przeanalizowania krok po kroku co się dzieje żeby błąd wyłapać i to powinieneś zrobić

ale jeżeli już błąd się wyłapie to chyba w konsoli błędów debugera się pokaże?

@bswierczynski
Odpoczynek się przydał niestety dziś idę do pracy także będzie mnie stać tylko na odpisanie posta, powiem Ci że ten fragment kodu to przykład z książki wiec dobrze by było go na razie zostawić w takiej formie jakiej jest, chodź twoje rozwiązanie przeanalizowałem i wydaje się być lepsze :)
Chodzi o to by to zadziałało, ponieważ potrzebuję tego do dalszej pracy (wiadomo, jest później wyjaśnienie co i jak krok po kroku), ale jak można pracować normalnie jeśli książka zawiera błędy, nawet pobrałem pliki z Helion'a, z tymi łatwiejszymi sobie poradziłem, ale teraz mam problem bo nie działa, jestem w połowie książki a na stronie nie ma tego przykładu do pobrania...

Fakt książka dość oporna, przykłady zawierają błędy, chodź wyjaśnienia wydają się logiczne

Przede wszystkim dziękuje że chociaż chcecie mi pomóc i zająć się tą sprawą,
Dlatego jeszcze raz proszę o pomoc, tak jak już pisałem chciałbym żeby to zadziałało abym mógł dalej korzystać z książki :( chodź chyba już nikomu jej nie polecę...
PS: Tak to jest kupować książki zagranicznych autorów a w dodatku nie sprawdzając na necie opinii :(

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0