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

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]]
oktatas/web/javascript/javascript_ajax.1566497364.txt.gz · Utolsó módosítás: 2019/08/22 20:09 szerkesztette: admin