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 :)