Jur4 Blog - Jiří Petřek alias Jur4 - webdesign, seo, programovaní, php, css, html

AJAX - teoreticky i prakticky

O ajax slyšela snad většina webových programátoru. Né všichni ale umí tuto technologii použít. V dnešním článku bych chtěl shrnout základy AJAXU a nakonec Vám vše ukázat v celku na kompletním příkladu. Nejprve bychom si měli pro jisto tu položit základní otázlu.

Co to AJAX je?

Ajax neboli Asynchronous JavaScript and XML je technologie postavená na javascriptu, která umožňuje zasílat HTTP požadavky bez nutnosti načíst stránku. Ke komunikaci kupřikladu s PHP scriptem může být využito jazyka XML.

Jako každá technologie má i ajax své výhody a nevýhody. Mezi hlavní nevýhody patří nepoužitelnost tlačítka Zpět, nebo záložek. Ale i to se už dá vyřešit. Ale o tom zase někdy jindy. Pokud se chcete o výhodách, a nevýhodach dočíst více doporučuji článek AJAX – kde jsou hranice?.

Ale nechtel bych se pouštět do většího polemizování o použití či nepoužití této technologie, přece jen by to měl být technicky zaměřený článek.

Na zasílání požadavků přes HTTP protokol je v javascriptu objekt XMLHttpRequest. Ten nejdříve musíme vytvořit. Normálně by se to provedlo takto:

http_request = new XMLHttpRequest();

Ale už tady se setkáme s problémem různé implementace v prohlížečích, protože v IE se tento objekt vytváří jako activeX a navíc ještě dvou typů. Naštěstí pro nás, jde tato „chyba“ jednoduše ošetřit, někteří PHP programátoři zajisté budou vědět co znamená try, catch:

if (window.XMLHttpRequest) {
   http_request = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (eror) {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
 }

Tímto máme vyřešené vytváření objektu. Před samotným požadavkem, musíme nastavit funkci, která jej zpracuje. Funkce se vkládá do proměnné onreadystatechange.

http_request.onreadystatechange = function() { nazevfunkce(http_request); };

Teď se budeme věnovat funkci open(), která nám vytváří spojení s požadovaným scriptem. Funkce má dva povinné, a tři nepovinné parametry. První parametr je typ požadavku (GET/POST), do druhého povinného parametru patří url, kterou chceme volat. Url může být relativní nebo absolutní, ale z důvodů bezpečnosti není možno volat url na jiné dómeně. Třetí nepovinný parametr je typu boolean, pomocí něj nastavujeme jak budou data poslána. Defaultně je nastavený na true což znamená, že režim přenosu bude asynchronní (prohlížeč nebude čekat na výsledky). Pokud jej však nastavíme na false, znamená to, že režim přenosu bude synchronní, a prohlížeč při požadavku počka na výsledky (zamrzne). Takže asi víte, že je lepší ponechat defaultně nastavenou hodnotu. Poslední dva parametry, jsou jmého a heslo při přistupu na zabezpečenou adresu. ale to asi nemá moc využití.

Druhou funkcí je send(). Tato funkce má jeden parametr, který se liší podle typu požadavku. Při požadavku GET dáváme proměnné přímo do url ve tvaru script.php?promnena=pokus&promena=pokus, proto do parametru send dáváme pouze null. U požadavku typu POST se proměnné nedávájí do URL, ale předávíji se funkci send() ve tvaru promnena=pokus&promena=pokus. U typu POST je dobré ještě před voláním send() nastavit správný Content-Type, provedeme to jednoduše:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Pořad nevite jak by to mělo vypadat? Tak Vám tady dávám ještě vzorové volání pro GET i pro POST.

GET

http_request.onreadystatechange = function() { funkce(http_request); };
http_request.open('GET', 'script.php?promnena=pokus', true);
http_request.send(null);

POST

http_request.onreadystatechange = function() { funkce(http_request); };
http_request.open('POST', 'script.php', true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http_request.send('promnena=pokus');

Tak a tohle je vše k posílání požadavků na server. Teď si ještě ukážeme funkci ná zpracování a samotnou jednoduchou aplikaci. Nejprve příklad takovéto funkce:

function zpracuj(http_request) {
      if (http_request.readyState == 4) {
           if (http_request.status == 200) {
              txtResponse = http_request.responseText;
              xmlResponce = http_request.responseXML;
           } else {
              chyba();
           }
       }
   }

Funkci předáváme jako parametr, objekt http_request. Při zavolání teto funkce se nejdříve otestuje stav požadavku, který je v proměnné readyState. Vrátit muže hodnotu od 0 do 4.

• 0 – Neinicializováno
• 1 – Načítam
• 2 – Načteno
• 3 – Zpracovávám
• 4 – Hotovo

My potřebujeme postoupit dále když je požadavek hotov, takže testujeme pouze na hodnotu 4. Další proměnou, kterou musíme otestovat je status, ta vrací číslo chyby kterou obdrži od serveru. Třeba 404, když stránka neexistuje apod. My testujeme status 200, což znamená, že vše proběhlo v pořádku. Tímto požadavek skončil a my v proměnné responseText najdeme to co vrátil server. Pokud bychom potřebovali data procházet podle DOM, tak mužeme na serveru generovat XML a výsledky pak jsou v responseXML.

Ajaxové frameworky

Ještě než přejdeme k praktické ukázce, chtěl bych Vás ještě upozornit na různé frameworky, ktere májí s ajaxem pomoct. Existují do většiny scriptovacích jazyků, a většina php MVC frameworku už nějaký ajaxový helper obsahuje. Pokud se chcete na Ajaxové frameworky více zaměřit doporučuji Vám stránku ajaxmatters.com. To byla taková vsuvka teď pokračujme k praktické ukázce.

Synonyma přes AJAX

Teď bych Vám chtěl ukázat jak jednoduše lze udělat Ajaxovou aplikaci. Bude se skládat ze dvou souborů. V prvním php souboru přijmeme proměnnou POST se slovem, ke kterému máme najít synonyma, najdeme je a vypíšeme je.

synonyma.php

<?php

 function vratSynonyma($slovo, $cp)
 {
   $slovo = trim($slovo);
   $cont = file_get_contents('http://jyxo.cz/s?q=' . urlencode(iconv($cp, 'UTF-8', $slovo)) . '&d=cz');
   $cont = iconv('UTF-8', $cp, $cont);
   $cont = strip_tags($cont, '<br>');
   $reg = 'Synonyma'.$slovo.': (.+)(, \(vše\))?<br><br>';
   preg_match_all("!$reg!", $cont, $arrSyn);
   $arrSynonyma = explode(',', $arrSyn[1][0]);
   $arrSynonyma = array_map('trim', $arrSynonyma);
  if($arrSynonyma[count($arrSynonyma)-1]=="(vše)"){
   unset($arrSynonyma[count($arrSynonyma)-1]);
  }
 return $arrSynonyma;
 }

 $arr = vratSynonyma($_POST['string'], 'UTF-8');

 if(!isset($arr[0]) or $arr[0]==""){
  echo "Nelze najit synonyma ke zvolenému slovu!";
  exit;
 }
 foreach($arr as $sl){
  echo $sl."\n";
 }
?>

Druhým souborem je index.html, ve kterém do input pole vepíšeme slovo a po potvrzení dostaneme zpět jeho synonyma. Pokud jste pochopili to co jsem psal výše nebudete mít žádný problém kód pochopit. Kdybyjste přece jenom nevěděli, tak se zeptejte v komentářích.

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Synonyma pøes AJAX</title>
  <script type="text/javascript">

    function synonyma() {
        var http_request = false;
        var string = document.getElementById('string').value;
        var request = "string="+string;

        if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
              http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (eror) {
              http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

        http_request.onreadystatechange = function() { zpracuj(http_request); };
        http_request.open('POST', 'synonyma.php', true);
        http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        http_request.send(request);
   }

    function zpracuj(http_request) {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('Chyba');
            }
        }
    }
  </script>
  </head>
  <body>

   <h2>Synonyma pøes AJAX</h2>

    <input type="text" name="string" id="string" class="string">
    <input type="submit" name="submit" value="submit" onclick="synonyma();">

  </body>
</html>

Celý script si můžete vyzkoušet zde. Na stažení ho najdete v sekci download.

---

Nakonec trošku od tématu. Na můj blog začali v posledních dnech utočit spameři, proto zítra budu nasazovat nový antispam a trošku upravím blog, takže může nastat výpadek. Abych nezapoměl, pořád se můžete hlásit o odkaz v bočním menu. Ale abychom to nepletli do komentářu k ajaxu, tak mi je posílejte přes vzkaz

_uOsr[len+5]="tiscali.cz";    _uOkw[len+5]="query";
   _uOsr[len+7]="volny.cz";      _uOkw[len+7]="search";