jQuery pro začátečníky. Ajax - (část 5)

 2012-02-05 00:00:00
 Dmitry Burobin

Představují Vám pátý článek ze série jQuery pro začátečníky. Tentokrát zkusim povědět něco o realizaci Ajax požadavků.

Co je Ajax si myslim není nutné vyprávět, jelikož s příchodem Web 2.0 už nemusíme čekat na znovunačtení stránky a s jQuery se realizace velice zjednodušila.

jQuery(..).load

Začneme nejjednodušším - načtením HTML kódu do potřebného DOM prvku na stránce. Pro tento úkol se nám bude hodit metoda load. Tato metoda může mít následující parametry:

  • url požadované stránky
  • odesílaná data (volitelný parametr)
  • funkce, které bude odeslán výsledek (volitelný parametr)
Zde mate příklad:


$(document).ready(function(){              // když se stránka načte
    
$('#example-1').click(function(){      // kliknutím na prvek s id = example-1
        
$(this).load('ajax/example.html'); // načíta se HTML kód ze souboru example.html
    
})
});
Příklad HTML kódu (soubor example.html):

Example<br/>
Data Loaded By AJAX<br/>
Bye-Bye

Ukázka!

jQuery.ajax

Toto je základní metoda, a všechny následující metody jsou jenom obálky pro metodu jQuery.ajax. Tato metoda má jen jeden vstupní parametr - objekt obsahující všechna nastavení, dál jsou parametry, které je vhodné pamatovat:

  • async - požadavky jsou asynchronní, výchozí hodnota true
  • cache - zap./vyp. caching dat prohlížeči, výchozí hodnota true
  • contentType - výchozí nastavení "application/x-www-form-urlencoded"
  • data - odesílaná data (řádek nebo objekt)
  • dataFilter - filtr vstupních dat
  • dataType - typ dat vrácejících se do callback funkce (xml, html, script, json, text, _default)
  • global - je odpovědný za použití globálních Ajax Eventů, výchozí nastavení true
  • ifModified - kontroluje zda nastala nějaká změna v odpovědi serveru, aby neposílal další požadavek, výchozí nastavení false
  • jsonp - přepnout jméno callback funkce pro práci s JSONP
  • processData - vytváři objekt z odesílaných dat a posíla jako "application/x-www-form-urlencoded", jestli nutné, jinak zakazuje
  • scriptCharset - kódování - aktuálni pro JSONP
  • timeout - časový limit v ms
  • type - GET nebo POST
  • url - url požadované stránky

Lokální AJAX Eventy:

  • beforeSend - zapína se před odesláním požadavku.
  • error - jestli nastala chyba
  • success - jestli chyby nejsou
  • complete - zapína se po ukončení požadavku

Pro organizaci HTTP autorizace:

  • username - login
  • password - heslo

Příklad:


$.ajax({
    
url'/ajax/example.html',             // ukazujeme URL a
    
dataType "json",                     // typ odesílaných dat
    
success: function (datatextStatus) { // funkce success zpracovává data
        
$.each(data, function(ival) {    // zpracovávání přijatých dat
            /* ... */
        
});
    }
});

jQuery.get

Načíta stránku, používa proto GET požadavek. Může mít následující parametry:

  • url požadované stránky
  • odesílaná data (volitelný parametr)
  • callback funkce, které bude odeslán výsledek (volitelný parametr)
  • typ dat vrácejících se do callback funkce (xml, html, script, json, text, _default)

jQuery.post

Tato metoda je obdobná te předchozí, jen odesílaná data budou odesláná prostřednictvím POST. Může mít následující parametry:

  • url požadované stránky
  • odesílaná data (volitelný parametr)
  • callback funkce, které bude odeslán výsledek (volitelný parametr)
  • typ dat vrácejících se do callback funkce (xml, html, script, json, text, _default)

Příklad:


$(document).ready(function(){                          // když je stránka načtena
    
$('#example-3').click(function(){                  // kliknutím na prvek s id = example-3
        
$.post('ajax/example.xml', {}, function(xml){  // se načte XML ze souboru example.xml
            
$('#example-3').html('');
            $(
xml).find('note').each(function(){       // zaplňujeme DOM prvek daty z XML
                
$('#example-3').append('To: '   + $(this).find('to').text() + '<br/>')
                               .
append('From: ' + $(this).find('from').text() + '<br/>')
                               .
append('<b>'    + $(this).find('heading').text() + '</b><br/>')
                               .
append(           $(this).find('body').text() + '<br/>');
            });
        }, 
'xml');                                     // ukazujeme přesně typ dat
    
})
});

Soubor example.xml:


<note>
    <
to>Tove</to>
    <
from>Jani</from>
    <
heading>Reminder</heading>
    <
body>Don\'t forget me this weekend!</body>
</note>

Ukázka!

jQuery.getJSON

Načíta data ve formátu JSON (obdobný formát jako XML). Může mít tyto parametry:

  • url požadované stránky
  • odesílaná data (volitelný parametr)
  • callback funkce, které bude odeslán výsledek (volitelný parametr)

Příklad:


$(document).ready(function(){                            // když je stránka načtena
    
$('#example-4').click(function(){                    // kliknutím na prvek s id = example-4
        
$.getJSON('ajax/example.json', {}, function(json){  // se načte JSON ze souboru example.json
            
$('#example-4').html('');
                                                         
// zaplňujeme DOM prvek daty z XML
            
$('#example-4').append('To: '   json.note.to '<br/>')
                           .
append('From: ' json.note.from '<br/>')
                           .
append('<b>'    json.note.heading '</b><br/>')
                           .
append(           json.note.body '<br/>');
        });
    })
});

example.json


{
    
note:{
        
to:'Tove',
        
from:'Jani',
        
heading:'Reminder',
        
body:'Don\'t forget me this weekend!'
    
}
}

Ukázka!

jQuery.getScript

Tato funkce načíta a provádi lokální JavaScript. Může mít tyto parametry:

  • url požadované stránky
  • callback funkce, které bude odeslán výsledek (volitelný parametr)

Příklad:


$(document).ready(function(){                          // když je stránka načtena
    
$('#example-5').click(function(){                  // kliknutím na prvek s id = example-5
        
$.getScript('ajax/example.js', function(){     // načteme JavaScript ze souboru example.js
            
testAjax();                                // provádime načtený JavaScript
        
});
    })
});

Soubor example.js


function testAjax() {
    $(
'#example-5').html('Test completed');  //měnime prvek s id = example-5
}

Ukázka!

Odesílání formuláře

Pro odesílání formuláře prostřednictvím jQuery je vhodná jakákoliv z uvedených variant, ale pro pohodlné sbírání dat z formulářů je lepší použit plugin jQuery From nebo metody serialize a serializeArray.

Odesílání souborů

Pro odesílání souborů prostřednictvím jQuery můžete použit plugin Ajax File Upload.

Spolupráce s PHP

Pro organizaci príce s PHP používam knihovnu jQuery-PHP, vhodná jestli máte rádi jQuery-).

Události

Pro pohodli, na AJAX požadavcích visí několik eventů, můžete je zadávat pro každý AJAX požadavek jednotlivě a nebo globálně. Na všechny eventy můžete pověsit funkci. Příklad pro zobrazení prvku s id=loading při provádění nějakého AJAX požadavku:


$("#loading").bind("ajaxSend", function(){
    $(
this).show(); // zobrazuje prvek
}).bind("ajaxComplete", function(){
    $(
this).hide(); // schovává prvek
});
Pro lokální udalosti provedéme změny v metodě ajax():

$.ajax({
    
beforeSend: function(){
        
// Handle the beforeSend event
    
},
    
complete: function(){
        
// Handle the complete event
    
}
    
// ...
});

A seznam eventů:

  • ajaxStart - Tato metoda se volá když se zpustil AJAX požadavek, a žádný jiný požadavek není
  • beforeSend - Provádi se do odeslání požadavu, umožňuje editovat XMLHttpRequest
  • ajaxSend - lokální požadavek - Provádi se do odeslání požadavu, obdobně jako beforeSend
  • success - Provádi se po vrácení odpovědi, když nejsou žádné chyby
  • ajaxSuccess - lokální požadavek - Provádi se po vrácení odpovědi, obdobně jako success
  • error - Provádi se jestli nastané chyba
  • ajaxError - lokální požadavek - Provádi se jestli nastané chyba
  • complete - Provádi se po dokončení současného AJAX požadavku (s chybou nebo bez - provádi se vždy)
  • ajaxComplete - lokální požadavek - obdobně jako complete
  • ajaxStop - tato metoda se volá když už nejsou aktivní požadavky

Pro dnešek je to vše. Děkuji za pozornost. V dalším článku se podívame detailně do selektorů.

Systém Orphus
Napište komentář.
Celkem komenrářů(0)