JavaScript

Posílání dat přes AJAX v GET i POST

JavaScript

POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.

Vím, že dnes jsou velice v oblibě frameworky typu JQuery, a že velice usnadňují a urychlují tvorbu aplikace, chcete-li ale použít pouze jednoduché natažení dat AJAXem, není nutné framework použít. Zbytečně bude klient stahovat cenné kilobajty navíc, když by vám vlastně stačila jednoduchá funkce.

GET

Rozdíli mezi metodou GET a POST jistě všichni znají, proto je nebudu uvádět. Ukážu vám ale rozdíl v tom, když chcete poslat data pomocí AJAXu. Nejdříve funkci, která posílá data v URL, tedy GET:

function ajax_get (url, id) {
        var objekt = false;
        if (window.XMLHttpRequest) {objekt = new XMLHttpRequest();}
        else if (window.ActiveXObject) {
          try {
            objekt = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (error) {
            objekt = new ActiveXObject("Microsoft.XMLHTTP");}
          }
        if(objekt){
            objekt.open("GET",url,true);
            objekt.onreadystatechange=function(){
                if(objekt.readyState==4 && objekt.status==200){
                    document.getElementById(id).innerHTML = objekt.responseText;
                }
            }
            objekt.send(null);
        }    
}

POST

Když chcete použít POST, stačí změnit 

objekt.open("GET",url,true);

na 

objekt.open("POST",url,true);

Poté přidat HTTP hlavičku Content-type: 

objekt.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

a nakonec POST data skutečně poslat: 

objekt.send("key1=value1&key2=value2");

Funkce bude vypadat následovně:

function ajax_post (url, id, post_data) {
        var objekt = false;
        if (window.XMLHttpRequest) {objekt = new XMLHttpRequest();}
        else if (window.ActiveXObject) {
          try {
            objekt = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (error) {
            objekt = new ActiveXObject("Microsoft.XMLHTTP");}
          }
        if(objekt){
            objekt.open("POST",url,true);
            objekt.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
            objekt.onreadystatechange=function(){
                if(objekt.readyState==4 && objekt.status==200){
                    document.getElementById(id).innerHTML = objekt.responseText;
                }
            }
            objekt.send(post_data);
        }    
}

Tímto způsobem jde poslat nejen POST, ale i GET zároveň.

Univerzální funkce

Podívejte se na názorný příklad s využitím univerzální funkce:

Soubor i.php:

' . $_GET['data'] . '
';  
if (isset($_POST['data'])) echo 'Data poslaná metodou POST: ' . $_POST['data'] . '
';
?>

Soubor index.php:



  
    
  
  
    
    
    
    
Původní text

Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)

Komentáře