Ce este AJAX?

AJAX înseamnă JavaScript și XML asincrone. Nu este un limbaj de programare. Este o tehnologie pentru dezvoltarea de aplicații web mai bune, mai rapide și interactive folosind HTML, CSS, JavaScript și XML.

  1. HTML: Hypertext Markup Language (HTML) este utilizat pentru definirea structurii unei aplicații web.
  2. CSS: Foaia de stil în cascadă (CSS) este utilizată pentru a oferi aspect și stil unei aplicații web.
  3. JavaScript: JavaScript este folosit pentru a crea o aplicație web interactivă, interesantă și ușor de utilizat.
  4. XML: Extensible Markup Language (XML) este un format pentru stocarea și transportul datelor de pe serverul web.

Care este semnificația lui Asynchronous în AJAX?

Asincron înseamnă că aplicația web ar putea trimite și primi date de la serverul web fără a actualiza pagina. Acest proces de fundal de trimitere și primire de date de la server împreună cu actualizarea diferitelor secțiuni ale unei pagini web definește proprietatea / caracteristica asincronă a AJAX.

Cum funcționează AJAX

AJAX folosește un browser încorporat Obiect XMLHttpRequest pentru a solicita date de la un server Web și HTML DOM pentru a afișa sau utiliza datele.

Obiect XMLHttpRequest : Este un API sub forma unui obiect ale cărui metode ajută la transferul de date între un browser web și un server web.

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

HTML DOM : Când este încărcată o pagină web, browserul creează un model de obiect document al paginii.

Tutorial AJAX Ce este AJAX si cum sa il utilizati

Creați un obiect XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Proprietățile obiectului XMLHttpRequest:

readystate este o proprietate a obiectului XMLHttpRequest care deține statutul XMLHttpRequest.

  • 0: cerere neinicializată
  • 1: conexiune server stabilită
  • 2: cerere primită
  • 3: cerere de procesare
  • 4: cererea terminată și răspunsul este gata

“” onreadystatechange “” este o proprietate a obiectului XMLHttpRequest care definește o funcție care trebuie apelată atunci când proprietatea readyState se schimbă.
“status” este o proprietate a obiectului XMLHttpRequest care returnează numărul de stare al unei cereri

  • 200: „OK”
  • 403 Interzis”
  • 404 Nu a fost gasit”
Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

XMLHttpRequest Object Methods: Pentru a trimite o cerere către un server Web, folosim metodele open () și send () ale obiectului XMLHttpRequest.

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

Creați o funcție changeContent () folosind JavaScript:

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

Exemplu AJAX pentru a schimba conținutul unei pagini web:

<!DOCTYPE html>
<html>
<body>

<div id="foo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>

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

</body>
</html>

Fișierul content.txt ar trebui să fie prezent în directorul rădăcină al aplicației web.