Susipažinkime su AJAX
Parašė SofteriZ 2011 gegužės 5 21:05:42

---

Taigi AJAX technologijos naudojamos daugiau stilizavimui, tiek formoms tiek įvairioms navigacijoms ir panašiai, manau ne kartą esate susidūrę su panašiais variantais.




[b]01: Sukurti API[/b]

Na nedelskim ir pradėkim, žemiau pateikta funkcija nurodo kokius metodus mes atlikinėsime.

$('#formos-elementas').ajaxify(
{
method : 'post',
action : 'procesas.php',
onSuccess : function() {},
onSubmit : function() {},
onError : function() {}
}

Taigi pažiūrėkime ir panagrinėkime ką čia mes čia parašėme.

method - Šis variantas gali būti 'POST', 'GET', arba blank, tai yra tuščias.

action - Nurodomas URL veiksmui atlikti, duomenims perkelti ir panašiai, jei bus paliktas tuščias tada pluginas kreipsis į formą ieškant atributu.

onSuccess, onError - Ši dalis patikrina ar forma buvo užpildyta, ar ne tuščia.

onSubmit - Šis veiksmas veikia kai paspaudžiamas submit mygtukas (Siūsti) ir automatiškai pradeda veikti visi aukščiau išvardinti kriterijai. Jei jūs nepabrėžiate onSubmit kriterijaus funkcijoje ir buvo paspaustas siųsti mygtukas, tada automatiškai skriptas gražins true rezultatą.


[b]02: Nustatom pagrindus[/b]



Taigi čia labai panašus kodas kaip ir viršuje tad nebeaiškinsiu kas ką atlieka, čia tiesiog nustatome numatytuosius parametrus kad viskas teisingai veiktų.


(function($) {
$.fn.ajaxify = function(parametrai) {
var pagrindiniai = {
method : '',
action : '',
onSuccess : function() {},
onSubmit : function() { return true },
onError : function() {}
};
var opts = $.extend({}, pagrindiniai, parametrai);


Šis reiškinys yra masyvas, čia apibrėžiami vartotojo pasirinkimai.



[b]03: $.each apibrėžimas[/b]


Taigi nustatome parametrą submit mygtukui.

this.each(function() {
$(this).bind('submit', function(event) {



[b]04: Įrankio event parametras[/b]



Event parametras tikrai turi nemažai padaryti kad forma darytu tai ką ir priklauso jei daryti. Taigi pirmosios eilutės būtu tokios.

FORM = $(this);
event.preventDefault();


Toliau suteikiame vartotojui galimybe daryti pasirinkimą (onSubmit) tad turime nustatyti teiginį jog onsubmit'as gražintu true arba false jei formoje kažkas klaidinga.

if(!opts.onSubmit.call(FORM[0])) { return; }

Taigi toliau panaudojame 'call' metodą, kad iškviestume onSubmit handlerius.
Taip yra nes .call() metodas sugeba iškviesti 'this' funkciją. Faktiškai turi būti nustatyta (GET arba POST) ir veiksmų (paskirties URL) nes kitu atveju bus negerai...

var method = opts.method || FORM.attr('method') || 'GET';
var action = opts.action || FORM.attr('action');


[b]05: AJAX Pateikimas[/b]


jQuery perima visa darbą iš mūsų ajax'o, taip pat jei norėtumėt pasigilinti patarčiau pasiskaityti apie XMLHTTP basic'us.

$.ajax({
type : method,
url : action,
data : FORM.serialize(),
success : function(data) {
opts.onSuccess.call(FORM[0], data);
},
error : function() {
opts.onError.call(FORM[0]);
}
});

type - Nurodomos formos metodo atributas

url - Formos veiksmo atributas

data - Duomenų struktūros pateikimas, .seralize() metodas nurodo visas sėkmingas įvykdytas užklausas.

success - Jei buvo gražinta sėkminga formos užklausa.

error - Taip pat kaip ir aukščiau tik čia jei buvo gražinta klaidinga užklausa.


Na štai ir viskas pluginas beveik paruoštas darbui.


[b]06: Panaudojam Plug-In[/b]


Taigi pritaikome mūsų pluginui atitinkamus veiksmus:

$('#ajaxify').ajaxify({
onSubmit : jeiPateikta,
onSuccess : jeiSekmingai,
onError : jeiKlaidingai
});


Dabar apibrėžiame patį onSubmit metodą kurį nurodėme plugine. Čia jau prasideda daugmaž stilizavimas.
Įsidėmėkite jog antroje eilutėje yra var valid = true; taip gražinamas true rezultatas


function jeiPateikta() {
var FORM = $(this);
var valid = true;


FORM.find('input').css('border-color', '#F0F0F0');

FORM.find('input').each(function() {
if($(this).val() == '') {
$(this).css('border-color', 'red');
valid = false;
}
});
return valid;
}



Dabar apibrėžkime rezultatus jei sėkmingai ir klaidingai buvo priimta užklausa.

function jeiSekmingai(msg) {
alert("Serveris sako " + msg);
}
function jeiKlaidingai() {
alert("Neteisingai užpildyta!");
}