AJAX oktatóanyag: Mi az AJAX és hogyan kell használni

Programozás

Mi az AJAX?

Az AJAX rövidítése az aszinkron JavaScript és XML . Ez nem programozási nyelv. Ez egy technológia jobb, gyorsabb és interaktívabb webalkalmazások fejlesztésére HTML, CSS, JavaScript és XML használatával.

  1. HTML: Hypertext Markup Language (HTML) a webalkalmazás struktúrájának meghatározására szolgál.
  2. CSS: Cascading Style Sheet (CSS) arra szolgál, hogy megjelenést és stílust biztosítson egy webalkalmazáshoz.
  3. JavaScript: A JavaScript segítségével interaktív, érdekes és felhasználóbarát webalkalmazást lehet létrehozni.
  4. XML: Az XML (Extensible Markup Language) kiterjesztés az adatok tárolására és továbbítására a webkiszolgálóról.

Mit jelent az Asynchronous az AJAX-ban?

Aszinkron azt jelenti, hogy a webalkalmazás adatokat küldhet és fogadhat a webkiszolgálóról az oldal frissítése nélkül. Ez az adatküldés és -fogadás a szerverről, valamint a weboldal különböző szakaszainak frissítésével kapcsolatos háttérfolyamat meghatározza az AJAX aszinkron tulajdonságát / tulajdonságát.

Hogyan működik az AJAX

Az AJAX egy böngészőben beépített XMLHttpRequest objektumot használ adatok kérésére a webkiszolgálótól és a HTML DOM- tól az adatok megjelenítéséhez vagy felhasználásához.

XMLHttpRequest Object : Ez egy olyan objektum formájában lévő API, amelynek módszerei segítenek az adatok átadásában egy webböngésző és egy webszerver között.

HTML DOM : Egy weboldal betöltésekor a böngésző létrehozza az oldal dokumentumobjektum-modelljét.

Hozzon létre egy XMLHttpRequest objektumot:

var xhttp = new XMLHttpRequest();

Az XMLHttpRequest objektum tulajdonságai:

readystate az XMLHttpRequest objektum azon tulajdonsága, amely az XMLHttpRequest állapotát tartja.

  • 0: a kérelem nincs inicializálva
  • 1: szerver kapcsolat létrejött
  • 2: kérelem érkezett
  • 3: feldolgozási kérelem
  • 4: a kérelem kész és a válasz kész

Az "onreadystatechange" az XMLHttpRequest Object egyik tulajdonsága, amely meghatározza a readyState tulajdonság megváltozásakor meghívandó függvényt.

Az "állapot" az XMLHttpRequest objektum olyan tulajdonsága, amely visszaadja egy kérés állapotszámát

  • 200: "OK"
  • 403 letiltva"
  • 404 nem található"

XMLHttpRequest objektum metódusok: Kérés elküldéséhez egy webkiszolgálóra az XMLHttpRequest objektum open () és send () metódusait használjuk.

xhttp.open("GET", "content.txt", true); xhttp.send();

Hozzon létre egy function changeContent () függvényt a JavaScript használatával:

function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

AJAX példa egy weboldal tartalmának megváltoztatására:

The XMLHttpRequest Object
 Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

A fájlnak content.txta webalkalmazás gyökérkönyvtárában kell lennie.