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ářů(37)
Kamagra 100mg - 2018-03-30  02:09:31
 kamagra 100mg oral jelly in india
kamagra 100 mg
kamagra jelly kopen amsterdam
[url=http://kamagradxt.com/]kamagra kaufen[/url]
kamagra 100mg oral jelly how to use
http://kamagradxt.com/
kamagra oral jelly 100mg 1 week pack
Kamagra oral jelly amazon nederland co - 2018-03-28  23:04:58
 cheap kamagra uk reviews
kamagra 100mg oral jelly kako se uzima
kamagra 100mg tablets usage
[url=http://kamagradxt.com/]kamagradxt.com[/url]
kamagra forum uk
http://kamagradxt.com/
come si usa il kamagra oral jelly
Philiptarve - 2017-11-28  16:37:31
 ome people, especially those running on busy daily schedules tend to use the pills to help maintain weight since they can not afford to follow all the diet programs. This is not advised. It is recommended that one seek advice from a professional in this field before using the pills. This can save one from many dangers associated with the misuse.

The diet pills should always be taken whole. Some people tend to divide the pills to serve a longer period of time. This is not advised and can lead to ineffectiveness. If it is required that one takes a complete tablet, it means that a certain amount of the ingredients are required to achieve the desired goal. It is also recommended that one does not crush the pill and dissolve it in beverages. Chemicals found in beverages have the potential of neutralizing the desired nutrients in the pill thereby leading to ineffectiveness. The best way to take the tablets is swallowing them whole with a glass of water.

[url=https://www.cialissansordonnancefr24.com/acheter-tadalafil-20mg/]https://www.cialissansordonnancefr24.com/acheter-tadalafil-20mg/[/url]
Jeffpoonia - 2017-11-27  23:11:52
 Cephalexin Strenght Buy Now Tab Isotretinoin [url=http://cheapestcial.com ]cialis[/url] Cialis Dosierung Cytotec Pour Planning Familial Propecia Pvp
Jeffpoonia - 2017-11-27  23:11:50
 Cephalexin Strenght Buy Now Tab Isotretinoin [url=http://cheapestcial.com ]cialis[/url] Cialis Dosierung Cytotec Pour Planning Familial Propecia Pvp
Jeffpoonia - 2017-11-27  23:11:49
 Cephalexin Strenght Buy Now Tab Isotretinoin [url=http://cheapestcial.com ]cialis[/url] Cialis Dosierung Cytotec Pour Planning Familial Propecia Pvp
Jeffpoonia - 2017-11-27  23:11:47
 Cephalexin Strenght Buy Now Tab Isotretinoin [url=http://cheapestcial.com ]cialis[/url] Cialis Dosierung Cytotec Pour Planning Familial Propecia Pvp
Miguzese - 2017-11-25  00:30:43
 Generika Kamagra Rezeptfrei Bestellen [url=http://tadalafonline.com]cialis[/url] Zithromax Solubility Location Levitra 20mg Cialis Comprar Foro
Miguzese - 2017-11-25  00:30:41
 Generika Kamagra Rezeptfrei Bestellen [url=http://tadalafonline.com]cialis[/url] Zithromax Solubility Location Levitra 20mg Cialis Comprar Foro
Miguzese - 2017-11-25  00:30:40
 Generika Kamagra Rezeptfrei Bestellen [url=http://tadalafonline.com]cialis[/url] Zithromax Solubility Location Levitra 20mg Cialis Comprar Foro
Miguzese - 2017-11-25  00:30:38
 Generika Kamagra Rezeptfrei Bestellen [url=http://tadalafonline.com]cialis[/url] Zithromax Solubility Location Levitra 20mg Cialis Comprar Foro
RichardSwold - 2017-11-12  20:15:10
 Doctors have many challenges to face as they are perennially surrounded by patients, diseases, hospital duties and over-extended or odd shift timings. Universally, doctor is considered to be a noble profession and respectable one at that, but a doctor also has to work under immense pressures, emotional strains and other physical challenges.


A regular physician like most of us at some point face will have to deal with personal situations such as important family affairs, family holidays, sickness or pregnancy that may force them to abandon medical duties. At the same time, a hospital or a healthcare facility is also constantly faced with emergency situations that demand all hands on deck round-the-clock. Therefore, every hospital, clinic or nursing home is compelled to hire locum tenens or substitute doctor in order to keep the staffing under control at all times.


In fact, locum doctors are the most valuable asset for the medical community because they provide quality medical care and act as a helping-hand in emergency situations when the medical facilities need them the most.

Unlike regular or permanent doctors, locum doctor jobs are also ideal career options for medical inte
s and graduates because they offer a wide array of medical exposure in varied medical specialties, work cultures and healthcare systems. Locum jobs are challenging and flexible, thus an increasing number of medical professionals have benefitted from these jobs, so whether one is looking for a family physicians position or in a hospital or in a clinic, locum jobs for doctors are available at all levels and in different healthcare systems.


In addition, being a locum doctor gives a medical professional the control over their working hours, location of work and choice of area of specialisation. Technically, locum positions are not restricted to general physicians but they are also extended to other fields of medical specialisations such as cardiology, neurology and many more.

Travelling can be an integral part of locum jobs, and these distinctive features are a boon for many dedicated medical professionals who are eager to expand their medical careers with loads of multi-cultural medical experiences. The fact that locum agencies in the UK recruit tens of thousands of locums from across the globe in various NHS hospitals, private clinics, nursing homes and other public hospitals speaks volume of the popularity of locum jobs.


Locating or getting a locum tenens job is a simple task as long as you are registered with one of the many reputable locum agencies. These agencies act as the middle man between locum tenens and medical facilities, and they also look after all the details pertaining to travel for locum tenens, accommodation and the nature of locum work.

Thus, maintaining a healthy locum doctor-agency relationship benefits both the parties, and it also increases the probability of getting recommendable employment opportunities and businesses or vice-versa.
Miguzese - 2017-10-28  18:55:15
 Over The Counter Mediformin Viagra Pressione Alta Achat De Viagra Sans Ordonnance [url=http://orderlevi.com]levitra a precios baratos[/url] Canadian Pharmacy On Script Needed Water Pill Online Purchase Propecia Prix 2015
Miguzese - 2017-10-28  18:55:13
 Over The Counter Mediformin Viagra Pressione Alta Achat De Viagra Sans Ordonnance [url=http://orderlevi.com]levitra a precios baratos[/url] Canadian Pharmacy On Script Needed Water Pill Online Purchase Propecia Prix 2015
Miguzese - 2017-10-28  18:55:12
 Over The Counter Mediformin Viagra Pressione Alta Achat De Viagra Sans Ordonnance [url=http://orderlevi.com]levitra a precios baratos[/url] Canadian Pharmacy On Script Needed Water Pill Online Purchase Propecia Prix 2015
Miguzese - 2017-10-28  18:55:11
 Over The Counter Mediformin Viagra Pressione Alta Achat De Viagra Sans Ordonnance [url=http://orderlevi.com]levitra a precios baratos[/url] Canadian Pharmacy On Script Needed Water Pill Online Purchase Propecia Prix 2015
Miguzese - 2017-10-27  02:48:46
 Super Kamagra Cialis [url=http://bestviaonline.com]viagra[/url] Buy Silagra Online
Miguzese - 2017-10-23  04:43:39
 Acheter Cialis Original En Ligne [url=http://cheapcheapvia.com]viagra[/url] Propecia Indications 1 Mg
Miguzese - 2017-10-23  04:43:38
 Acheter Cialis Original En Ligne [url=http://cheapcheapvia.com]viagra[/url] Propecia Indications 1 Mg
Miguzese - 2017-10-23  04:43:36
 Acheter Cialis Original En Ligne [url=http://cheapcheapvia.com]viagra[/url] Propecia Indications 1 Mg
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.