LoSoft Blog

Niewielka sprawa, jednak zabrala mi troche czasu. Ten przypadek wymagal dociagania skryptow JS w zaleznosci od zaladowanego kontentu (On Demand JS) lecz dostarczane obiekty mialy nazywac sie identycznie. Wazne bylo, aby metoda getAnswer obiektu Question zwracala odpowiednio sformatowane dane, w zaleznosci od wyswietlonego kontentu. Silnik ladowany byl po wejsciu na strone wraz z zawartoscia zawierajaca obiekty JS, logiczne wiec, ze parser je wczytal i zarejestrowal. Wymienny kontent zawieral override’y zaladowanych obiektow, ktore niestety nie rejestrowaly sie automatycznie.

Mamy wiec cos podobnego

Question = function()
{
	this.answer = null;
	{ body }
};
 
Question.prototype.getAnswer = function()
{
	if (this.answer != null) {
		return this.answer;
	} else {
		{ body }
	}
};

w kazdej dynamicznie dostarczanej zawartosci z ta roznica, ze { body } roznie formatowalo dane

Aby dzialalo to poprawnie, nalezy po wczytaniu kontentu AJAX’em zarejestrowac wczytane obiekty, a mozna to zrobic tak

function reloadScripts(id) {
	// pobieramy obiekt zawierajacy override'y
	var obj = document.getElementById(id);
	if (obj) {
		// wyciagamy tagi potencjalnie zawierajace skrypty JS
		var scripts = obj.getElementsByTagName("script");
		for (var i = 0; i < scripts.length; i++) {
			script = scripts[i].innerHTML;
			// rejestrujemy JS'y
			eval(script);
		}
	}
};

lub tak, jezeli dostarczamy jedynie JS’y

eval(ajax.xmlHttp.responseText);

Jak masz inny pomysl na rozwiazanie tego problemu … nie krepuj sie, daj komentsa

Back-end aplikacji webowej, mozna kontrolowac przegladajac raporty i logi, lecz nijak ma sie to do front-endu wyswietlanego po stronie klienta. Nie dowiemy sie czy i kiedy wystapi blad, dopoki jakis nawiedzony klient nie zwymysla nam do sluchawki, chyba, ze mamy 105 srodowisk testowych, na ktorych mozemy sprawdzic kazda funkcjonalnosc aplikacji.

I tutaj nasuwa sie pytanie, czy nie ma innej mozliwosci?
Sa, a to jedna z nich, dzieki asynchronicznym zapytaniom, raport o bledzie klienta trafi do back-endu, i zapisany zostanie, do bazki czy pliku logow.

Przechwytywanie bledow

1. Dodajemy wymagane pliki bibliotek

<script type="text/javascript" src="http://www.losoft.org/blog/download/ajax/loajax_v1.1.js"></script>

plik mozna pobrac z dzialu Download, albo zamiast klasy loAJAX, linkujemy wlasnego wrappera ajax.

2. Tworzymy metode akcyjna zdarzenia window.onerror

// on/off powiadomienie klienta o bledzie
var suppressErrors = true;
// nowy obiekt ajax
var ajax = new loAJAX(this, "http://www.losoft.org/blog/examples/ajax/errorreport.php", null, AJAX_POST);
// akcja zdarzenia onerror
function errorReport(msg, url, lineNumber)
{
	ajax.reset();
	ajax.addParam("msg", msg);
	ajax.addParam("url", url);
	ajax.addParam("lineNumber", lineNumber);
	ajax.request();
 
	if (suppressErrors) {
		return true;
	}
	alert("Error occurred: " + msg + "\nURL: " + url + "\nLine Number: " + lineNumber);
};

3. Podpiecie akcji

window.onerror = errorReport;

Jak mamy juz gotowa metode, to teraz … czytaj dalej

Ajax jest najlepszym sposobem na podniesienie wydajnosci, plynnosci statycznych stron. Dynamiczna wymiana tresci strony bez potrzeby jej przeladowywania przypomina juz zaawansowane aplikacje typu RIA.

Niby nic, niby technologia wiekowa a nadal ciezko spotkac prosty skrypt upraszczajacy korzystanie z niej. Dlatego tez, stworzymy prosty wrapper umozliwiajacy wykonywanie zapytan do serwera w celu wysylania i pobrania tresci.

Wstepnie tworzymy klase o nazwie loAJAX zawierajaca obiekt xmlHttp.

loAJAX = function()
{
	this.xmlHttp = null;
};

Nastepnie dodajemy metode inicjujaca obiekt xmlHttp.

loAJAX.prototype.init = function()
{
	if (window.navigator.appName == "Microsoft Internet Explorer") {
		try {
			this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
				this.xmlHttp = new XMLHttpRequest();
			}
		}
	} else {
		this.xmlHttp = new XMLHttpRequest();
	}
};

Tak, wiem o czy myslisz try..catch, try..catch. Majac dosc spore doswiadczenie uwazam, ze zaden kawalek kodu nie jest bezpieczny jezeli mamy do czynienia z obiektami MS’a . To co w przypadku innych przegladarek wyglada prosto XMLHttpRequest(); w IE i innych podobnych tworach korzystajacych z axka roznie to wyglada.

Wiec zostawiamy kwestie po co, dlaczego i dolaczymy do naszego obiektu metode generujaca zapytanie.

loAJAX.prototype.request = function(url, ajaxListener)
{
	this.xmlHttp.abort();
	this.xmlHttp.open("GET", url, true);
	this.xmlHttp.onreadystatechange = ajaxListener;
	this.xmlHttp.send(null);
};

Nowy obiekt ajaxListner ma za zadanie nasluchiwac i gdy otrzyma czytaj dalej