Blog webdeveloperski Patryk yarpo Jar

Wygodny obiekt dla Ajax

Jak pewnie zdążyłeś zauważyć, często dążę do sytuacji, w której operuję na interfejsie obiektu, a nie polegam na implementacji.

Przykładowo, dużo bardziej podoba mi się podejście do Ajaksa w jQuery, niż z wykorzystaniem natywnego kodu JS.

Jednak czy `jQuery.ajax' rozwiązuje wszystkie nasze problemy? Uważam, że nie. Jesteśmy świadkami wojny między różnymi frameworkami. Być może za 2-3 lata nikt nie będzie używać jQuery - a może nikt nie będzie używać niczego innego . Dzisiaj trudno to określić. Natomiast wiadomo jedno - strony, które tworzysz, zawsze mają być dobre i działać należycie. Ubierzmy zatem już naprawdę przyjemne `jQuery.ajax' w coś jeszcze bardziej abstrakcyjnego. Abstrakcja ta pozwala na późniejsze ograniczenie rozmiarów zmian w kodzie.

Kod wywołania Ajaksowego

var oAjax = yAjax();
oAjax.url('test.txt');
oAjax.data.add('a', 'wartość 1');
oAjax.data.add('b', 3);
oAjax.success(function(response) { alert(response) });
oAjax.send();

Po co coś takiego?

Być może kiedyś okaże się, że jest dużo lepsza biblioteka od jQuery. Wtedy zamiast zmieniać wszystkie skrypty, czyli około pierdyliard linii, w których wywołujesz `$.ajax(...)' starczy zmienić jedną funkcję w jednym pliku... Przydatne? A owszem .

Spytasz - "no ok, ale co z GET/POST oraz co z typem zwracanym?" Spokojnie - są to wartości domyślne: 'POST' oraz 'text'. Jeśli chciałbyś zmienić te ustawienia należy wykorzystać:

oAjax.method('POST'); // może być 'GET'/'get'/'post'
oAjax.type('text'); // może być 'json', 'xml', itp.

Aby pobrać wartość jakiegoś ustawienia używamy:

alert(oAjax.method());

Pełny interfejs:

yAjax = {
     data, // obiekt yVarsObj
     method, // getter/setter dla typu żądania 'POST'/'GET'
     success, // getter/setter dla callback sukcesu
     error, // g/s dla callback błędu
     before, // g/s dla funkcji wywoływanej zawsze przez requestem
     complete, // g/s dla funkcji wywoływanej zawsze po success/error
     url, // g/s dla adresu requestu
     send, // metoda wywołująca reuqest
     response, // metoda zwracająca obiekt po odebraniu odpowiedz z serwera
     reset, // przywraca ustawienia domyślne
     type, // g/s typu danych oczekiwanych z serwera
     async // g/s asynchroniczności requestu
 };

Dla `yAjax.data' istotny jest interfejs obiektu `yVarsObj':

yVarsObj = {
    add, // doddaj kolejną zmienną: string nazwa, mixed wartość
    get, // pobierz zmienną o podanym kluczu: string klucz
    del, // usuń zmienną: string klucz
    clear, // usuń wszystkie zmienne
    all, // pobierz wszystkie zmienne
    exists, // sprawdź, czy istnieje zmienna: string nazwa
 };

Kod

Publikuję pełen kod mojego obiektu:

• http://yarpobject.googlecode.com/svn/trunk/ajax/yAjax/yajax.js

var yVarsObj = function()
{
	var oVars = {};

	function fGet(n)
	{
		return oVars[n];
	}
	function fDel(n)
	{
		var val = oVars[n];
		delete oVars[n];
		return val;
	}
	function fClear()
	{
		oVars={};
	}
	function fKeyExists(n)
	{
		return ('undefined' === typeof oVars[n]) ? false : true;
	}
	function fAdd(n,v)
	{
		if ('undefined' === typeof n || 'undefined' === typeof v)
		{
			return false;
		}
		oVars[n] = v;
		return true;
	}
	function fAll(o)
	{
		if ('object' === typeof o)
		{
			oVars=o;
		}
		return oVars;
	}

	return {
		add:fAdd,
		get:fGet,
		del:fDel,
		clear:fClear,
		all:fAll,
		exists:fKeyExists,
	};
};

var yAjax = function()
{
	var sMethod = 'POST',
		sPath = '',
		sDataType = 'text',
		bAsunc = false,
		bCache = false,
		oParam = yVarsObj();

	var fBefore = null,
		fComplete = null,
		fError = null,
		fSuccess = null,
		oResponse = null;

	function fMethod(m)
	{
		sMethod = (m) ? m.toUpperCase() : sMethod;
		return sMethod;
	}

	function fUrl(u)
	{
		sPath = u || sPath;
		return sPath;
	}
	function fDataType(d)
	{
		sDataType = d || sDataType;
		return sDataType;
	}
	function fAsync(s)
	{
		if (false === s || true === s)
		{
			bAsunc=s;
		}
		return bAsunc;
	}
	function fSetSuccess(f)
	{
		fSuccess = f;
	}
	function fSetError(f)
	{
		fError = f;
	}
	function fSetComplete(f)
	{
		fComplete = f;
	}
	function fSetBefore(f)
	{
		fBefore = f;
	}
	function fSend()
	{
		oResponse = $.ajax({
			async : bAsunc,
			type : sMethod,
			url : sPath,
			cache : bCache,
			data : oParam.all(),
			dataType : sDataType,
			success : fSuccess,
			error : fError,
			beforeSend : fBefore,
			complete : fComplete
		});

		return oResponse;
	}
	function fResponse()
	{
		return oResponse;
	}
	function fReset()
	{
		sMethod = 'POST';
		sPath = '';
		oParam.clear();
		bAsunc = bCache = false;
		fBefore = fComplete = fError = fSuccess = oResponse = null;
		sDataType = 'text';
	}

	return {
		data   : oParam,
		method : fMethod,
		success: fSetSuccess,
		error  : fSetError,
		before : fSetBefore,
		complete: fSetComplete,
		url  : fUrl,
		send : fSend,
		response : fResponse,
		reset : fReset,
		type : fDataType,
		async: fAsync
	};
};

Pobierz działający przykład.

Nad czym warto popracować?

1. Można wyrzucić w ogóle jQuery i wykorzystać "niskopoziomowy" kod JS
2. Można zastosować wzorzec łańcuchowy
3. Stworzyć wersje zminimalizowaną

Warto przeczytać:

• http://www.yarpo.pl/2011/03/06/ajax-kompedium-wiedzy/