A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Következő változat | Előző változat | ||
oktatas:web:javascript:javascript_ajax [2019/08/22 20:09] admin létrehozva |
oktatas:web:javascript:javascript_ajax [2023/03/10 22:32] (aktuális) admin [AJAX] |
||
---|---|---|---|
Sor 2: | Sor 2: | ||
====== AJAX ====== | ====== AJAX ====== | ||
- | * **Szerző:** Sallai András | ||
- | * Copyright (c) Sallai András, 2015 | ||
- | * Licenc: GNU Free Documentation License 1.3 | ||
- | * Web: http://szit.hu | ||
- | ===== Bevezetés ===== | ||
- | |||
- | Az AJAX az **Asynchronous JavaScript and XML** angol szavakból alkotott betűszó. | ||
- | Aszinkron JavaScript és XML. Röviden a **XMLHttpRequest** objektum használata | ||
- | a szerveroldali scriptekkel való kommunikációra. Különböző formátumok | ||
- | átvitelére van lehetősége, úgymint: JSON, XML, HTML és szöveges fájlok. | ||
- | Az AJAX az ilyen adatok átvitelét a weblap újratöltése nélkül végzi el. | ||
- | |||
- | Az előnyök tehát: | ||
- | * kéréseket indíthatunk a szerver felé, a weblap újratöltése nélkül | ||
- | * adatokat fogadunk a szervertől | ||
- | |||
- | |||
- | |||
- | <code xml XML> | ||
- | <dolgozok> | ||
- | <dolgozo> | ||
- | <nev>Nagy János</nev> | ||
- | <telepules>Szolnok</telepules> | ||
- | <fizetes>780000</fizetes> | ||
- | </dolgozo> | ||
- | <dolgozo> | ||
- | <nev>Per Mária</nev> | ||
- | <telepules>Miskolc</telepules> | ||
- | <fizetes>560000</fizetes> | ||
- | </dolgozo> | ||
- | </dolgozok> | ||
- | </code> | ||
- | |||
- | |||
- | <code json JSON> | ||
- | { | ||
- | "dolgozok": [ | ||
- | { | ||
- | "Nev" : "Nagy János", | ||
- | "Telepules" : "Szolnok", | ||
- | "Fizetes" : "780000" | ||
- | }, | ||
- | { | ||
- | "Nev" : "Per Mária", | ||
- | "Telepules" : "Miskolc", | ||
- | "Fizetes" : "560000" | ||
- | } | ||
- | ] | ||
- | } | ||
- | </code> | ||
- | |||
- | |||
- | {{:oktatas:web:javascript:ajax_nelkul.png|}} | ||
- | |||
- | {{:oktatas:web:javascript:ajax_mukodes.png|}} | ||
- | |||
- | |||
- | {{:oktatas:web:javascript:kliens-szerveroldali-scriptek.png|}} | ||
- | |||
- | ===== Keresztplatformos objektum létrehozás ===== | ||
- | |||
- | <code javascript> | ||
- | var httpRequest; | ||
- | if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... | ||
- | httpRequest = new XMLHttpRequest(); | ||
- | } else if (window.ActiveXObject) { // IE 6 and older | ||
- | httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); | ||
- | } | ||
- | </code> | ||
- | |||
- | |||
- | ===== Megvalósítások ===== | ||
- | |||
- | ==== Kérést küldünk a szervernek ==== | ||
- | |||
- | <code javascript> | ||
- | httpRequest.open("GET","adat.txt",true); | ||
- | httpRequest.send(); | ||
- | </code> | ||
- | |||
- | |||
- | ^ Metódus ^ Leírás ^ | ||
- | | open(metódus, url, aszinkron) | A kérés típusa, URL-je, és aszinkron vagy nem. | | ||
- | | send(string) | A kérés elküldése a szervernek | | ||
- | |||
- | * metódus: GET vagy POST | ||
- | * url: az állomány helye a szerveren | ||
- | * szinkron: true (aszinkor) vagy false (szinkron) | ||
- | * string: Csak POST metódusnál használjuk | ||
- | |||
- | ==== GET kérés ==== | ||
- | |||
- | <code javascript> | ||
- | httpRequest.open("GET","feldolgoz.php",true); | ||
- | httpRequest.send(); | ||
- | </code> | ||
- | |||
- | <code javascript> | ||
- | httpRequest.open("GET","feldolgoz.php?vnev=Nagy&knev=Joska", true); | ||
- | httpRequest.send(); | ||
- | </code> | ||
- | |||
- | ==== POST kérés ==== | ||
- | |||
- | |||
- | <code javascript> | ||
- | httpRequest.open("POST","feldolgoz.php", true); | ||
- | httpRequest.send(); | ||
- | </code> | ||
- | |||
- | |||
- | <code javascript> | ||
- | httpRequest.open("POST","feldolgoz.php",true); | ||
- | httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); | ||
- | httpRequest.send("vnev=Nagy&knev=Joska"); | ||
- | </code> | ||
- | ==== Aszinkron mód esetén teendők ==== | ||
- | |||
- | Mi történjen, amikor a válasz megérkezik az onreadystatechange | ||
- | tulajdonsággal adható meg. Egy függvényt kell neki megadni, | ||
- | például névtelenül: | ||
- | |||
- | <code javascript> | ||
- | httpRequest.onreadystatechange=function() { | ||
- | if (httpRequest.readyState==4 && httpRequest.status==200) { | ||
- | document.getElementById("azonosito").innerHTML=httpRequest.responseText; | ||
- | } | ||
- | } | ||
- | httpRequest.open("GET", "adat.txt", true); | ||
- | httpRequest.send(); | ||
- | </code> | ||
- | |||
- | ===== Melléklet ===== | ||
- | |||
- | ==== Példa 001 ==== | ||
- | |||
- | <code html index.html> | ||
- | <!DOCTYPE html> | ||
- | <html> | ||
- | <head> | ||
- | <title>Szókereső</title> | ||
- | <meta charset="UTF-8"> | ||
- | <meta name="description" content=""> | ||
- | <meta name="keywords" content=""> | ||
- | </head> | ||
- | <body> | ||
- | <h1>AJAX</h1> | ||
- | | ||
- | <script> | ||
- | |||
- | httpRequest = new XMLHttpRequest(); | ||
- | |||
- | httpRequest.onreadystatechange = alertContents; | ||
- | httpRequest.open('GET', "ker.php"); | ||
- | httpRequest.send(); | ||
- | |||
- | |||
- | function alertContents() { | ||
- | if (httpRequest.readyState === 4) { | ||
- | if (httpRequest.status === 200) { | ||
- | var $ez = JSON.parse(httpRequest.responseText); | ||
- | alert($ez[1]['szo']); | ||
- | } else { | ||
- | alert('A probléma a lekérés során!'); | ||
- | } | ||
- | } | ||
- | } | ||
- | | ||
- | | ||
- | </script> | ||
- | | ||
- | </body> | ||
- | </html> | ||
- | |||
- | </code> | ||
- | |||
- | |||
- | <code php config.php> | ||
- | <?php | ||
- | |||
- | $db['host'] = "localhost"; | ||
- | $db['user'] = "szokereso"; | ||
- | $db['pass'] = "titok"; | ||
- | $db['dbname'] = "szokereso"; | ||
- | |||
- | ?> | ||
- | </code> | ||
- | |||
- | |||
- | Ne írassunk ki HTML elemeket! | ||
- | <code php ker.php> | ||
- | <?php | ||
- | require_once("mysql.php"); | ||
- | |||
- | $conn = dbopen(); | ||
- | leker($conn); | ||
- | |||
- | ?> | ||
- | </code> | ||
- | |||
- | |||
- | <code php mysql.php> | ||
- | <?php | ||
- | require "config.php"; | ||
- | |||
- | function leker($conn) { | ||
- | $sql = "select * from szavak"; | ||
- | $result = $conn->query($sql); | ||
- | //echo json_encode($result->fetch_assoc()); | ||
- | | ||
- | | ||
- | $res = array(); | ||
- | while($sor = $result->fetch_assoc()) { | ||
- | array_push($res, $sor); | ||
- | } | ||
- | echo json_encode($res); | ||
- | | ||
- | } | ||
- | |||
- | function insertDolgozo($conn, $data) { | ||
- | $sql = "INSERT INTO Dolgozók (Név, Település) | ||
- | VALUES (\"{$data['nev']}\", \"{$data['telepules']}\")"; | ||
- | $conn->query($sql); | ||
- | } | ||
- | |||
- | function dbopen() { | ||
- | global $db; | ||
- | $conn = new mysqli($db['host'], $db['user'], $db['pass'], $db['dbname']); | ||
- | if($conn->connect_error) | ||
- | die("Hiba a kapcsolódás során (" . $mysqli->connect_errno . ")" | ||
- | . $conn->connect_error); | ||
- | $conn->set_charset("utf8"); | ||
- | return $conn; | ||
- | } | ||
- | |||
- | function dbclose($conn) { | ||
- | $conn->close(); | ||
- | } | ||
- | ?> | ||
- | |||
- | </code> | ||
- | |||
- | |||
- | Adatbázis | ||
- | <code sql> | ||
- | CREATE DATABASE IF NOT EXISTS `szokereso` DEFAULT CHARACTER SET utf8 COLLATE utf8_hungarian_ci; | ||
- | USE `szokereso`; | ||
- | |||
- | CREATE TABLE IF NOT EXISTS `szavak` ( | ||
- | `az` int(11) NOT NULL, | ||
- | `szo` varchar(100) COLLATE utf8_hungarian_ci NOT NULL | ||
- | ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COLLATE=utf8_hungarian_ci; | ||
- | |||
- | INSERT INTO `szavak` (`az`, `szo`) VALUES | ||
- | (1, 'zsiráf'), | ||
- | (2, 'kutya'), | ||
- | (3, 'macska'), | ||
- | (4, 'elefánt'); | ||
- | |||
- | ALTER TABLE `szavak` | ||
- | ADD PRIMARY KEY (`az`); | ||
- | |||
- | |||
- | ALTER TABLE `szavak` | ||
- | MODIFY `az` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5; | ||
- | </code> | ||
+ | * [[oktatas:web:javascript:ajax:Bevezetés]] | ||
+ | * [[oktatas:web:javascript:ajax:XMLHttpRequest]] | ||
+ | * [[oktatas:web:javascript:ajax:GET kérés]] | ||
+ | * [[oktatas:web:javascript:ajax:POST kérés]] | ||
+ | * [[oktatas:web:javascript:ajax:Példa]] | ||
+ | * [[oktatas:web:javascript:ajax:KekBt példa]] | ||
+ | * [[oktatas:web:javascript:ajax:JSON lekérése]] | ||
+ | * [[oktatas:web:javascript:ajax:Dolgozók REST API]] | ||
+ | * [[oktatas:web:javascript:ajax:Linkek]] |