IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
hypnozc
Člen
Avatar
hypnozc:27.5.2015 14:06

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:27.5.2015 14:11

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
27.5.2015 14:11
Avatar
hypnozc
Člen
Avatar
hypnozc:27.5.2015 14:17

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:27.5.2015 15:11

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
27.5.2015 15:11
Avatar
Odpovídá na hypnozc
Michal Žůrek - misaz:27.5.2015 15:14

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
27.5.2015 15:14
Avatar
hypnozc
Člen
Avatar
hypnozc:27.5.2015 15:15

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
Odpovídá na hypnozc
Michal Žůrek - misaz:27.5.2015 16:17

Jsou tu o tom články.

 
Nahoru Odpovědět
27.5.2015 16:17
Avatar
hypnozc
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
hypnozc:27.5.2015 17:19

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:27.5.2015 17:44

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
27.5.2015 17:44
Avatar
hypnozc
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
hypnozc:31.5.2015 22:16

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):31.5.2015 23:42

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
31.5.2015 23:42
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
Odpovídá na hypnozc
Martin Konečný (pavelco1998):31.5.2015 23:42

// 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
Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ
Avatar
hypnozc
Člen
Avatar
hypnozc:1.6.2015 8:38

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:1.6.2015 13:03

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
Odpovídá na hypnozc
Neaktivní uživatel:1.6.2015 17:52

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.6.2015 17:52
Neaktivní uživatelský účet
Avatar
hypnozc
Člen
Avatar
hypnozc:8.6.2015 11:25

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:13.6.2015 13:03

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 Neaktivní uživatel
hypnozc:18.6.2015 15:09

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.