Hlavní strana   Blog   Práce   Kontakty   Mapa stránek   Filmy  

Podkategorie

C++
Php
Java
JavaScript
Ruby on Rails
Vývoj pro iPhone
Databáze
OpenGL
Hardware
Software
Algoritmy
Technologie
Webdesign
Bezpečnost
Elektronika
Konference
VlastnÍ projekty
Jen tak mimochodem
Hry

Můžete mě sledovat:

          

Projekty

      

Novinky

Nové články
Nějakou dobu jsem psal blog na živě.cz a tomuto blogu se nevěnoval. Během několika dalších dnů budu některé články z blogu na živě.cz přesouvat sem, na tento blog. Bude se jednat hlavně o články, které obsahují zdrojové kódy, protože na živě není implementováno žádné rozšíření pro psaní kódu do článku.

Linkuj a TopClanky
Přidal jsem ke článkům odkazy na Linkuj.cz a TopClanky.cz. Pokud se vám článek líbí, tak to dejte najevo jeho zalinkováním.

Registrace
Dnes, 13.září, byla přídána možnost registrace.

Ajax: odesláni formulare pomoci GET

Ajax (Asynchronous JavaScript and XML) je označení technologie, která umožňuje měnit obsah webových stránek bez znovunačtení. V tomto článku si ukážeme jak jednoduše pomocí Ajaxu odeslat hodnoty pomocí GET.

 

Ajax je technologie, která za pomoci javascriptu umožňuje, aby webová stránka komunikovala se serverem bez použití znovunačtení prohlížeče.

Pomocí javascriptu je na server odeslán požadavek a od serveru je očekávána v případě úspěchu kladná odpověď.

Zde je ukázka na příkladu, který si vytvoříme:

Jako první si vytvoříme objekt, který bude reprezenotvat http request, a přes který k němu budeme přistupovat.

Bohužel je v různých prohlížečích Ajax podporován trochu jinak.

V prohlížečích jako Firefox nebo Safari je pro ajax objekt window.XMLHttpRequest, Internet Explorer používá Microsoft.XMLHTTP.

Před použitím ajaxu musíme zjistit, který objekt může být vytvořen:

//gecko
if( window.XMLHttpRequest ){
    request = new XMLHttpRequest()
}
else if ( window.ActiveXObject ){
    //IE
    request = new ActiveXObject("Microsoft.XMLHTTP");
}
//pokud se neporadilo vytvorit  objekt
if (!request) {
     alert('nejede a nepojede');
     return false;
}

V případě že se objekt nepodařilo vytvořit, kvůli nepodpoře prohlížeče, upozorníme uživatele prostřednictvým alertu.

Pro odeslání požadavku v případě metody GET stačí použít open, která otevře spojení a přímo do ní předat URL adresu a předávané parametry. Navíc si vytvoříme funkci, která nás bude upozorňovat na změnu objektu, v našem případě hodnotu, vrácenou serverem. Tuto funkci nastavíme na onReadyStateChange, čímž dostaneme odpověď při změně:

//nastaveni volani funkce go, pri zmene obektu  
request.onreadystatechange = function () {go(request);};
//otevreni spojeni + odeslani retezce v promenne $_GET
request.open("GET", "run.php?value=" + value, true);

Funkce go() bude velmi jednoduchá. Server vrací readyState, ze kterého poznáme, zda bylo odpovězeno, a podle hodnoty statusu poznáme, zda všechno proběhlo bez chyby:

function go( request ){
    var result;
    //bylo odpovezeno
    if (request.readyState == 4){
        //pokud server vraci 200, probehl pozadavek bez chyby. 
        //0 je vracena v pripade, ze 
        if(request.status == 200 || request.status == 0){
            result=request.responseText;
            document.getElementById('m').innerHTML = result;
        }
    }
}

Server vrací hodnotu responseText, ve které je uložena a kterou můžeme vypsat.

Pro zpracování existuje soubor run.php, který zpracuje vstupní řetězec uložený v GETu a vrátí odpověď, v tomto případě HTML kód.

Celý javascriptový kód vypadá takto:

<script type="text/javascript">
function request( value ){
    //vytvoreni nove promenne
    var request = null;
    //gecko
    if( window.XMLHttpRequest ){
        request = new XMLHttpRequest()
    }
    else if ( window.ActiveXObject ){
        //IE
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //pokud se neporadilo vytvorit 
    if (!request) {
         alert('nejede a nepojede');
         return false;
    }
      
    request.onreadystatechange = function () {go(request); } ;
    request.open("GET", "run.php?value=" + value, true);
    request.send( null );
}

function go( request ){
    var txt;
    if (request.readyState == 4){
        if(request.status == 200 || request.status == 0){
            txt=request.responseText;
            document.getElementById('m').innerHTML = txt;
        }
    }
}

function erase(){
    document.forms.forml.text.value = '';
}
</script>

<center>
<form method="GET" name="forml" action="javascript:request( document.forms.forml.text.value ); javascript:erase()">
<table>
Text:<input type="text" size="ahoj" name="text" style="width: 200px" /> <input type="submit" value="Přidat" />
</table>
</form>
</center>

<body onload="request('');">    
<center>
<div id="m">
</div>
</center>
</body>