Avatar
hypnozc
Člen
Avatar
hypnozc:

Zdravím, rád bych se naučil používat AJAX, ale ještě před tím bych se rád ujistil, co to AJAX je a co umí. Podle článků, které jsem četl se AJAX používá pro komunikaci se serverem bez potřeby obnovit stránku. Já to pochopil tak, že třeba v chatu někdo napíše: "Ahoj Karle", tato zpráva se přes AJAX odešle do MySQL bez obnovení stránky a Karlovi vyskočí nová zpráva. Jen nechápu jak Karlův chat ví, že v databázi je nová zpráva. Tedy jestli to tak vůbec funguje. Byl bych rád, kdyby mi to někdo z Vás podrobněji vysvětlil. Mockrát děkuji

Odpovědět 27.5.2015 14:06
Schopný programátor si štěrbinu vždy najde...
Avatar
Odpovídá na hypnozc
Michal Žůrek (misaz):

ahoj, brzy se tu o tom objeví článek, ale v podstatě základ máš dobrý. Karlův chat se to dozví tak, že v krátkém (pro počítač dlouhém) intervalu (třeba 1s) posílá na server požadavek jestli je nová zpráva a pokud je, tak ji zobrazí. Chaty se ale řeší pomocí WebSocket, kde se odstraní ten problém požadavků každou sekundu.

Nahoru Odpovědět  +1 27.5.2015 14:11
Nesnáším {}, proto se jim vyhýbám.
Avatar
hypnozc
Člen
Avatar
hypnozc:

OK dejme tedy jiný příklad... třeba anketa... Když já jako uživatel kliknu na jednu z možností, přes AJAX se to odešle na server a mě se překresli graf... Zajímalo by mě, jestli jinému uživateli, který má již stránku načtenou před mým hlasováním, se změní graf také bez obnovení stránky :)

Nahoru Odpovědět 27.5.2015 14:17
Schopný programátor si štěrbinu vždy najde...
Avatar
Odpovídá na hypnozc
Martin Mandík:

Pořád by stránka jiného uživatele musela třeba tu každou 1s posílat požadavek na server. :-) Nefunguje to tak, že ty něco uděláš, a v tom okamžiku to zaznamená i druhý uživatel, bohužel, na to bys musel použít ty WebSockets. :-)

 
Nahoru Odpovědět  +1 27.5.2015 15:11
Avatar
Odpovídá na hypnozc
Michal Žůrek (misaz):

AJAX není zázrak, funguje to úplně stupidně. Všechny požadavky, které si ty fyzicky v tom scriptu pošleš se zpracují, nic víc se samo dělat nebude. Nic se nebude aktualizovat, nic se nebude překreslovat, prostě v JavaScriptu se zázraky nedějí (ačkoliv při výpisu některých chyb Googlem Chrome si to občas myslím). Pokud chceš mít něco aktuální, tak si to musíš sám aktualizovat (v nějakém intervalu).

Nejprve, ale zvaž, jestli je to fakt potřeba. Nepředpokládám, že bys měl tak frekventovanou anketu.

Nahoru Odpovědět  +1 27.5.2015 15:14
Nesnáším {}, proto se jim vyhýbám.
Avatar
hypnozc
Člen
Avatar
hypnozc:

OK a mohl by si mi tu napsat ukázku toho, jak přes AJAX uložit něco do MySQL?

Nahoru Odpovědět 27.5.2015 15:15
Schopný programátor si štěrbinu vždy najde...
Avatar
Nahoru Odpovědět 27.5.2015 16:17
Nesnáším {}, proto se jim vyhýbám.
Avatar
hypnozc
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
hypnozc:

No už vím jak na to, jen nechápu proč někdo používá u toho AJAXu GET a někdo POST... v PHP to chápu (GET-zobrazí se v URL, POST-nezmění URL a provede se na pozadí), jenže u AJAXu to URL nezmění

Nahoru Odpovědět 27.5.2015 17:19
Schopný programátor si štěrbinu vždy najde...
Avatar
Odpovídá na hypnozc
Michal Žůrek (misaz):

parametry v URL nesouvisí s metodou. GET jenom říká, že požadavek nemá žádný obsah a POST říká, že tam obsah bude. Obsah se předává v metodě send. Pokud obsah nemáš, posíláš GET a můžeš si tam napsat URL s parametry, pokud obsah máš, tak posíláš GET obsah a parametry v URL samozřejmě mít můžeš.

Nahoru Odpovědět  +1 27.5.2015 17:44
Nesnáším {}, proto se jim vyhýbám.
Avatar
hypnozc
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
hypnozc:

Ahoj, tak jsem to vyzkoušel v praxi, ale zdá se mi, že se stránka stejně načítá znovu :( Ale data se mi do DB uloží. Nevíš, kde je chyba?

index.php

<!DOCTYPE HTML>
<html>
  <head>
  <title>AJAX</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#saveBtn").click(function(){
        var email = $("#exampleInputEmail").val();
        $.ajax({
          url: "indata.php",
          method: "GET",
          success: function(data){
            alert("Success");
          }
        });
      });
    });
  </script>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
      </div>
      <button id="saveBtn" class="btn btn-default">Submit</button>
    </form>
  </body>
</html>

indata.php

<?php
  $email = $_GET['email'];
  $con = mysql_connect('sql.endora.cz:3313','hypnoz','heslo');
  mysql_select_db('sindy', $con);
  $query = mysql_query("insert into ajax values('$email')");
?>
Nahoru Odpovědět 31.5.2015 22:16
Schopný programátor si štěrbinu vždy najde...
Avatar
Odpovídá na hypnozc
Martin Konečný (pavelco1998):

Ahoj,
pokud se ti stránka načítá znovu, tak asi je to blbost, ale zkus vyhodit tag form. Nevim, jestli má klasický button stejnou fci jako submit button, ale pokud jo, mohlo by to být kvůli tomu.
Ještě možná zkusit hodit

<form onsubmit="return false;">
Editováno 31.5.2015 23:43
 
Nahoru Odpovědět  +1 31.5.2015 23:42
Avatar
Odpovídá na hypnozc
Martin Konečný (pavelco1998):

// omlouvám se za double post, prosím smazat

Editováno 31.5.2015 23:43
 
Nahoru Odpovědět 31.5.2015 23:42
Avatar
hypnozc
Člen
Avatar
hypnozc:

Tak problém byl opravdu v return false:

<script>
  $(document).ready(function(){
    $("#saveBtn").click(function(){
      var email = $("#exampleInputEmail").val();
      $.ajax({
        url: "indata.php?email="+email,
        method: "GET",
        success: function(data){
          alert("Success");
        }
      });
      return false;
    });
  });
</script>

jen ještě nechápu, proč se za url musí napsat ten otazník a email:

$.ajax({
  url: "indata.php**?email="+email**,
Nahoru Odpovědět 1.6.2015 8:38
Schopný programátor si štěrbinu vždy najde...
Avatar
hypnozc
Člen
Avatar
hypnozc:

Tak už jsem to asi pochopil :)

<!DOCTYPE HTML>
<html>
  <head>
  <title>AJAX</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#saveBtn").click(function(){
        var email = $("#exampleInputEmail").val();
        $.ajax({
          url: "indata.php",
          data:"email="+email,
          method: "POST",
          success: function(data){
            alert("Success");
            $("#exampleInputEmail").val("");
          }
        });
        return false;
      });
    });
  </script>
  </head>
  <body>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
      </div>
      <button id="saveBtn" class="btn btn-default">Submit</button>
    </form>
  </body>
</html>
Nahoru Odpovědět 1.6.2015 13:03
Schopný programátor si štěrbinu vždy najde...
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na hypnozc
Daniel Vítek:

Za otazníkem jsou předané parametry stránce, tzn. když napíšeš

pozdrav.php?osloveni=Karle&nalada=fajn

potom to můžeš v PHP zpracovat následujícím způsobem

echo 'Vítám tě ' . $_GET['osloveni'] . ' dnes se máš ' . $_GET['nalada'];
 
Nahoru Odpovědět  +1 1.6.2015 17:52
Avatar
hypnozc
Člen
Avatar
hypnozc:

Tak mám hotovou aplikaci na ukládání a čtení dat pomocí AJAXu. Chci se zeptat, zda je zápis 100% správně včetně použití POST a GET u AJAXu. Dále se chci zeptat, jaký je rozdíl mezi WebSocketem a voláním funkce každou sekundu.

index.php

<!DOCTYPE HTML>
<html>
  <head>
  <title>AJAX</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#Save").click(function(){
        if ($("#Input").val()==="")
          return false;
        var text = $("#Input").val();
        $.ajax({
          url: "indata.php",
          data:"text="+text,
          method: "POST",
          success: function(data){
            alert("Success");
            $("#Input").val("");
          }
        });
        return false;
      });
      setInterval(function(){
        $.ajax({
          url: "outdata.php",
          method: "GET",
          success: function(data){
            if($("p").text()!==data)
              $("p").text(data);
          }
        });
        return false;
      }
      ,1000);
    });
  </script>
  </head>
  <body>
    <form>
      <div class="form-group">
        <input type="text" class="form-control" id="Input" placeholder="Enter text">
      </div>
      <button id="Save" class="btn btn-default">Save</button>
      <p></p>
    </form>
  </body>
</html>

indata.php

<?php
  $text = $_POST['text'];
  $con = mysql_connect('sql.endora.cz:3313','hypnoz','');
  mysql_select_db('sindy', $con);
  $query = mysql_query("INSERT INTO tabulka(data) values('$text')");
?>

outdata.php

<?php
  $con = mysql_connect('sql.endora.cz:3313','hypnoz','');
  mysql_select_db('sindy', $con);
  $query = mysql_query("SELECT data FROM tabulka ORDER BY id DESC");
  echo mysql_result($query, 0);
?>

ONLINE: http://webgl.8u.cz/

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět 8.6.2015 11:25
Schopný programátor si štěrbinu vždy najde...
Avatar
hypnozc
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
hypnozc:

Mohl by si mi to prosím zkontrolovat, ať to tu můžu uzavřít? Děkuji

Nahoru Odpovědět 13.6.2015 13:03
Schopný programátor si štěrbinu vždy najde...
Avatar
hypnozc
Člen
Avatar
Odpovídá na Daniel Vítek
hypnozc:

Mohl by si mi to prosím zkontrolovat, ať to tu můžu uzavřít? Děkuji

Nahoru Odpovědět 18.6.2015 15:09
Schopný programátor si štěrbinu vždy najde...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 18 zpráv z 18.