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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//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ě:
|
1 2 3 4 |
//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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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> |
A jak si mám podle Vás zobrazit zdroj PHP souboru? Ten by jste sem taky mohli dát!
Jak to myslis, zobrazit zdroj PHP souboru?
co php kód? jak se vrátí, co se má zobrazit?
PHP kod sem davat nebudu, to uz je jednoduchy, v getu mas ulozenou hodnotu, kterou jenom zpracujes a vypises co potrebujes, to se zobrazi.
Ahoj,
všiml jsem si, že i tvůj formulář neodesílá znaménko plus +. No můj scipt je podobný a taky to nejde. Čím by to mohlo být ?
Odesila se pres GET, tzn. znaminko + se neodesle. Musis udelat urlencode a urldecode.
Díky, vyzkouším to.
Díky, vyzkouším to.
Tak jsem vyzkoušel urlencode. + se do databáze zapíše ale při výpisu s použitím urldecode se opět + odstraní. Použil jsem i metodu přenosu post a doplnil
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
a je to totéž.
Ahoj, marně se snažím doplnit kód tak, aby se poslední vzkaz ukázal druhému uživateli automaticky a né až když klikne na tlačítko. Nenapadá Vás nějaká možnost? Hledal jsem všude na webu a nemohu najít žádný příklad, aby se po změně dat na serveru automaticky změnil výpis dat všech klientů, které právě tyto data prohlížejí. Neznáte nějaký pěkný článek? Díky