JS vs jQuery: Ajax #1 - změna obsahu tagu

Sdílet

Jedná se o nejjednoduzší a asi obecně nejpoužívanější Ajax. Uživatel/čtenář stránek klikne na příslusný element – nejčastěji odkaz, obrázek či tlačítko a tím se změní část zobrazené stánky, aniž by se celá znovunačetla (reloadla)

\„Imho .(In My Humble Opinion – podle mého skromného mínění)\“ každý tohle již někde potkal – příkladem jsou třeba odkazy nad vyhledávacím políčkem úvodní stránky www.seznam.cz – Internet, Firmy, Mapy, Slovník a Zboží.

Je to efektní a je-li \„to vhodně použité .(jak nějakou ajax prasárnu najdu, doplním sem)\“, je to i užitečné; usnadníte uživateli stránek jeho \„práci\“ na vašem webu…

JS

Svůj Ajax jsem přebral před pár lety z nějakého \chytrého\ \článku\.
Trochu jsem si jej upravil – vytvořil jsem tři funcke: dvě univerzální a jednu specifickou pro danou akci

vytvoření XMLHttpRequest objektu

/********************************************************
 * Ajax Funkce - vytvoreni XMLHttpRequest objektu
 *********************************************************/

function GetXmlHttpObject()
{
  var objXMLHttp=null
  if (window.XMLHttpRequest)
  {
    objXMLHttp=new XMLHttpRequest()
  }
  else if (window.ActiveXObject)
  {
    try {
      objXMLHttp = new ActiveXObject(\"Msxml2.XMLHTTP\");
    } catch (eror) {
      objXMLHttp = new ActiveXObject(\"Microsoft.XMLHTTP\");
    }
  }
  return objXMLHttp
}
\\---

vypis do tagu s pslunm id
===
/************************************************************
 * Ajax funkce - univerzalni vypis do tagu s id
 ************************************************************/

function ajaxvypis(_kam, xmlHttp)
{
  if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      document.getElementById(_kam).innerHTML = xmlHttp.responseText;
    }
    else {
      alert(\'Chyba\');
    }
  }
}
\\---

to byly ty univerzlna teta specifickv tomto ppadv  divu (id=kam) zobrazme bez reloadu formulpro editaci člnku blogu

zobrazeni formulare editaci clanku/textu
===
/************************************************************
 * zobrazeni formulare editaci clanku/textu (kompletni form)
 ************************************************************/

function edit_clanek(kam, co){
  xmlHttp=GetXmlHttpObject()
  if (xmlHttp==null)
  {
    alert (\"Prohlížeč nepodporuje HTTP Request\")
    return
  }
  var url = \"form_clanek.php\"
    url = url+\"?id=\"+co

  xmlHttp.onreadystatechange=function () { ajaxvypis(kam, xmlHttp); }
  xmlHttp.open(\"GET\",url,true)
  xmlHttp.send(null)
}
\\---

Je zde pouita metoda GET a do nje vloeno ID člnku - druhparametr funkce - \"co\".
 Skript form_clanek.php pak pomoczaslanho ID zskdata clnku z databze, a vype je do formule, kterse nm zobrazdo pslunho msta - na to je pouita pedchoz"univerzální\" funkce ajaxvypis() - do kterje jako prvnparametr vloeno id tagu, kam chceme vstup z form_clanek.php vyspat.

Celto pak na strnce mme navzno na pslunodkaz a spoutse to klikem na nj:
<a href=\"#\" onclick=\"edit_clanek(\'content\', \'99\'); return false;\">Editovat článek</a>
\\---

jQuery
***

Ty první dvě \"univerzálni\" javascriptové funkce jsem nyní hodil do koše, bo stejného výsledku dosahuji pomocí tohoho jQuery kódu funkce poslední:
function edit_clanek(kam, co){
    $.get(\"form_clanek.php\", {id: co}, function(vystup) { $(\"#\"+kam).html(vystup) } );
}
\\---
tagy:
Publikováno: 30.11.2008 00:31
Knedle

Související články

blog comments powered by Disqus