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ářů(26)
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
Miguzese - 2017-10-23  04:43:35
 Acheter Cialis Original En Ligne [url=http://cheapcheapvia.com]viagra[/url] Propecia Indications 1 Mg
Miguzese - 2017-10-15  02:31:23
 Keflex And High Blood Pressure Acheter Kamagra Gel Cyproheptadine Tablets [url=http://costofcial.com]buy cialis[/url] Levitra En Horaire Zithromax Online With Mastercard
Miguzese - 2017-10-09  16:59:50
 Cephalexin Dosage Doge Viagra E Cocaina [url=http://cialtobuy.com]cialis price[/url] Viagra Aus Deutschland Online Levitra Comment Le Prendre Ordinare Cialis
Jeffpoonia - 2017-10-07  15:54:38
 Keflex Treat Urinary Tract Infection Dosage Comprar Cialis Super Active [url=http://cialtobuy.com ]cialis online[/url] Fedex Pyridium Cod Low Price With Ove
ight Delivery
Miguzese - 2017-10-06  23:14:47
 Cialis Viagra Preisvergleich Discount Zithromax [url=http://cheapestcial.com]online pharmacy[/url] Comprar Priligy 30 Mg Entrega Rapida Cheapest Pharmacy For Viagra Viagra American Distrubution
Miguzese - 2017-10-06  23:14:46
 Cialis Viagra Preisvergleich Discount Zithromax [url=http://cheapestcial.com]online pharmacy[/url] Comprar Priligy 30 Mg Entrega Rapida Cheapest Pharmacy For Viagra Viagra American Distrubution
Miguzese - 2017-10-06  23:14:45
 Cialis Viagra Preisvergleich Discount Zithromax [url=http://cheapestcial.com]online pharmacy[/url] Comprar Priligy 30 Mg Entrega Rapida Cheapest Pharmacy For Viagra Viagra American Distrubution
Miguzese - 2017-10-06  23:14:44
 Cialis Viagra Preisvergleich Discount Zithromax [url=http://cheapestcial.com]online pharmacy[/url] Comprar Priligy 30 Mg Entrega Rapida Cheapest Pharmacy For Viagra Viagra American Distrubution
Miguzese - 2017-10-04  04:29:07
 410 Online Meds Without Scripts Propecia En Parafarmacias [url=http://buyvarden.com]40 mg levitra pills on line for sale[/url] Renovables A Propecia Zithromax Online Canada 1286 Avanafil Cost
Miguzese - 2017-10-04  04:29:06
 410 Online Meds Without Scripts Propecia En Parafarmacias [url=http://buyvarden.com]40 mg levitra pills on line for sale[/url] Renovables A Propecia Zithromax Online Canada 1286 Avanafil Cost
Miguzese - 2017-10-04  04:29:04
 410 Online Meds Without Scripts Propecia En Parafarmacias [url=http://buyvarden.com]40 mg levitra pills on line for sale[/url] Renovables A Propecia Zithromax Online Canada 1286 Avanafil Cost
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.