AJAX aplikace pomocí jQuery a ASP.NET - první část
18. července 2007
O autorovi
Jan Aubrecht
.NET vývojář a konzultant IS/IT
honza@intellisoft.cz
Honza se zabývá vývojem webových aplikací od roku 2000. Rád používá ASP.NET 2.0 a je přímo posedlý neustálým zlepšováním svých aplikací.
Ve volném čase je jeho vášní dobré jídlo a pití. Nejraději se baví přípravou středomořských specialit a báječnými víny z Francie.
Soubory ke stažení
Zdrojové kódy použité v článku a další související soubory si můžete stáhnout zde:
Ukážeme si, jakým způsobem je možné vytvářet AJAX aplikace s využitím frameworku jQuery. Zároveň si vyzkoušíme několik způsobů AJAX komunikace se serverem a předvedeme si, jak AJAXové volání obsloužit pomocí ASP.NET.
Seznámení s jQuery
Pokud jste někdy pracovali s DOM elementy v JavaScriptu, asi víte, že implementace rozhraní DOM se v různých prohlížečích liší a práce s DOM objekty nebývá zrovna tou nejzábavnější činností.
Právě na to reaguje framework jQuery, který přináší dramatické zjednodušení práce s objektovým modelem dokumentu.
jQuery vám umožní velmi snadným a intuitivním způsobem nejenom vyhledávat DOM elementy v dokumentu, ale zároveň je umožňuje i snadno modifikovat nebo vytvářet nové.
Aby toho nebylo málo, jQuery obsahuje i spoustu dalších skvělých věcí. Mezi ně patří snadná registrace a obsluha událostí, podpora animací a AJAXu.
Právě na AJAX s využitím jQuery se v tomto článku zaměříme.
První AJAX aplikace
Pokud jQuery neznáte nebo jste s ním ještě nikdy nepracovali, určitě se podívejte, jak jQuery funguje a jak pracuje s DOM. Určitě to u příkladů v tomto článku využijete.
Příklady použití jQuery najdete na oficiálním webu nebo se podívejte na článek o jQuery na serveru Interval.cz.
Pojďme se ale podívat na první jednoduchou aplikaci, která používá jQuery a zároveň obsahuje i velmi jednoduchou ukázku AJAXu.
Aplikace nedělá nic jiného, než že se po načtení stránky pokusí získat data z jednoduchého AJAX handleru a zobrazí je v předem definovaném DIVu.
Ukázku aplikace si můžete prohlédnout zde.
Jak sami vidíte, příklad je to opravdu velmi jednoduchý a celá funkčnost je v podstatě reprezentována jedním řádkem kódu v jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#results').load('AjaxHandler1.aspx?Random=' + new Date().getTime());
});
</script>
<title>Sample 1</title>
</head>
<body>
<div id="results">
Nahrávám data...
</div>
</body>
</html>
Pomocí jQuery získáme DIV, ve kterém chceme zobrazit data z jiné stránky. Pak do něj pomocí metody load načteme obsah z požadovaného URL. Před odesláním ještě k URL připojíme údaj o aktuálním čase, aby stránka nebyla načtena z cache prohlížeče.
Serverový kód tohoto příkladu pouze vypíše aktuální čas na serveru a údaj o čase, který mu byl zaslán klientem.
Komplexnější příklad
Jak sami vidíte, první příklad byl opravdu velmi jednoduchý. Ve druhém příkladu si ukážeme, jak komunikovat se serverem pomocí AJAXu interaktivněji a jak zajistit obousměrnou výměnu dat mezi serverem a klientem.
Naše druhá aplikace bude zobrazovat jednoduché články uložené na serveru. Uživateli umožníme vybrat si požadovaný článek a zvolit si, zda-li ho bude chtít zobrazit celý nebo pouze jeho nadpis.
Aplikace bude tedy umožňovat odeslat údaje o vybraném článku pomocí AJAXu a zároveň zobrazí článek získaný ze serveru ve zvolené oblasti stránky.
Jak bude tato aplikace vypadat, si můžete prohlédnout zde.
Odeslání požadavku
Pojďme se nyní podívat, jak bude vypadat klientská část aplikace, která se postará o odeslání požadavku na server a zpracování jeho odpovědi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#articles').change(function()
{
loadArticle(this.value, $('#fullArticle')[0].checked);
});
$('#fullArticle').click(function()
{
loadArticle($('#articles')[0].value, this.checked);
});
function loadArticle(id, full)
{
$('#content').text('Nahrávám data...');
$.post('AjaxHandler2.aspx', {ArticleID: id, FullArticle: full}, function(data)
{
$('#content').html(data);
});
}
});
</script>
<title>Sample 2</title>
</head>
<body>
<label for="articles">Výběr článku:</label>
<select id="articles">
<option value="1">1. článek</option>
<option value="2">2. článek</option>
<option value="3">3. článek</option>
</select>
<input type="checkbox" id="fullArticle" /><label for="fullArticle">zobrazit celý článek</label>
<p id="content"></p>
</body>
</html>
V klientské části aplikace si nejdříve zaregistrujeme odběr událostí z formulářových prvků. V obsluze těchto událostí pak získáme aktuálně zvolené prvky ve formuláři a zavoláme metodu loadArticle, která se postará o odeslání AJAX požadavku a přijetí odpovědi ze serveru.
Kód této metody není nijak složitý. Metoda nejdříve zobrazí upozornění, že probíhá nahrávání dat. Pak odešle AJAX požadavek na server.
Pro asynchronní odeslání požadavku na server tentokrát použijeme metodu POST. Data tedy budou serveru předána stejným způsobem, jako kdyby uživatel odeslal běžný formulář.
Zpracování požadavku
Serverová část aplikace bude fungovat úplně stejně jako běžná ASP.NET aplikace.
Je to dáno tím, že data jsou na server zaslána úplně stejným způsobem, jako kdyby byly odeslány z běžného formuláře.
Podobně jednoduchý bude i výstup ze serveru, který odešle článek přímo ve formátu HTML. Článek se pak zobrazí pomocí jQuery v zadaném místě ve stránce.
V tomto příkladu se tedy nemusíme starat o transformaci dat z XML apod.
protected void Page_Load(object sender, EventArgs e)
{
//Get posted values.
string articleID = Request.Form["ArticleID"];
string fullArticle = Request.Form["FullArticle"];
if (!string.IsNullOrEmpty(articleID))
{
bool displayFull;
//Get the value indicating whether to display a full article.
if (!bool.TryParse(fullArticle, out displayFull))
displayFull = false;
//Get the path to the requested article.
string filePath = Path.Combine(Server.MapPath("~/Articles"), string.Format("Article{0}.txt", articleID));
if (File.Exists(filePath))
{
string content = File.ReadAllText(filePath);
//Crop the article text.
if (!displayFull)
content = content.Split('\n')[0];
Response.Write(content);
}
}
}
Ze zdrojového kódu je patrné, že stránka nejdříve přijme parametry získané od uživatele (ty byly pomocí jQuery zaslány asynchronním způsobem na server).
Po zpracování vstupních parametrů se pak stránka pokusí najít soubor, který obsahuje zvolený článek. Pokud soubor existuje, načte jeho obsah, který případně zkrátí na rozsah požadovaný uživatelem.
Získaný obsah článku pak odešle zpátky klientovi. Zde se pak opět dostává ke slovu jQuery, které přijatý obsah zobrazí v zadaném místě ve stránce.
Pár slov závěrem
Jak sami vidíte, vytvoření jednoduché AJAX aplikace pomocí jQuery je téměř hračka. Možná namítnete, že tyto dva příklady jsou opravdu hodně jednoduché, ale myslím, že pro první seznámení s jQuery a AJAXem úplně stačí.
V dalším pokračování článku se už pustíme do tvorby složitějších AJAX aplikací, které si budou vyměňovat data ve formátu XML a předvedou další způsoby využití AJAXu spolu s jQuery.
Kompletní zdrojové kódy obou příkladů si můžete stáhnout zde.