Ez a dokumentum egy előző változata!

Tartalomjegyzék

AJAX

AJAX

Szerző: Sallai András
Copyright © 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

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>

JSON

{
"dolgozok": [
  {
    "Nev" : "Nagy János",
    "Telepules" : "Szolnok",
    "Fizetes" : "780000"
  },
  {
    "Nev" : "Per Mária",
    "Telepules" : "Miskolc",
    "Fizetes" : "560000"
  }
]
}

Keresztplatformos objektum létrehozás

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Megvalósítások

Kérést küldünk a szervernek

httpRequest.open("GET","adat.txt",true);
httpRequest.send();

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

httpRequest.open("GET","feldolgoz.php",true);
httpRequest.send();

httpRequest.open("GET","feldolgoz.php?vnev=Nagy&knev=Joska", true);
httpRequest.send();

POST kérés

httpRequest.open("POST","feldolgoz.php", true);
httpRequest.send();

httpRequest.open("POST","feldolgoz.php",true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send("vnev=Nagy&knev=Joska");

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:

httpRequest.onreadystatechange=function() {
    if (httpRequest.readyState==4 && httpRequest.status==200) {
         document.getElementById("azonosito").innerHTML=httpRequest.responseText;
    }
}
httpRequest.open("GET", "adat.txt", true);
httpRequest.send();

Melléklet

Példa 001

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>

config.php

<?php
 
$db['host'] = "localhost";
$db['user'] = "szokereso";
$db['pass'] = "titok";
$db['dbname'] = "szokereso";
 
?>

Ne írassunk ki HTML elemeket!

ker.php

<?php
require_once("mysql.php");
 
$conn = dbopen();
leker($conn);
 
?>

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();
}
?>

Adatbázis

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;

szit

Felhasználói eszközök

Eszközök a webhelyen