Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_ajax

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

oktatas:web:javascript:javascript_ajax [2019/08/22 20:09] (aktuális)
admin létrehozva
Sor 1: Sor 1:
 +[[oktatas:​web:​JavaScript|<​ JavaScript]]
 +
 +====== 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/javascript_ajax.txt · Utolsó módosítás: 2019/08/22 20:09 szerkesztette: admin