Урок за AJAX: Какво представлява AJAX и как да го използвате

Програмиране

Какво е AJAX?

AJAX означава асинхронен JavaScript и XML . Това не е език за програмиране. Това е технология за разработване на по-добри, по-бързи и интерактивни уеб приложения, използващи HTML, CSS, JavaScript и XML.

  1. HTML: Hypertext Markup Language (HTML) се използва за дефиниране на структурата на уеб приложение.
  2. CSS: Cascading Style Sheet (CSS) се използва за осигуряване на външен вид и стил на уеб приложение.
  3. JavaScript: JavaScript се използва, за да направи уеб приложението интерактивно, интересно и удобно за потребителя.
  4. XML: Разширяем език за маркиране (XML) е формат за съхраняване и транспортиране на данни от уеб сървъра.

Какво е значението на асинхронно в AJAX?

Асинхронно означава, че уеб приложението може да изпраща и получава данни от уеб сървъра, без да опреснява страницата. Този фонов процес на изпращане и получаване на данни от сървъра заедно с актуализиране на различни раздели на уеб страница дефинира асинхронно свойство / характеристика на AJAX.

Как работи AJAX

AJAX използва вграден в браузъра XMLHttpRequest обект, за да поиска данни от уеб сървър и HTML DOM за показване или използване на данните.

XMLHttpRequest Object : Това е API във формата обект, чиито методи помагат при трансфер на данни между уеб браузър и уеб сървър.

HTML DOM : Когато се зареди уеб страница, браузърът създава обектен модел на документ на страницата.

Създайте обект XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Свойства на XMLHttpRequest обект:

readystate е свойство на обекта XMLHttpRequest, който съдържа състоянието на XMLHttpRequest.

  • 0: заявката не е инициализирана
  • 1: установена е връзка със сървъра
  • 2: получена заявка
  • 3: заявка за обработка
  • 4: заявката е завършена и отговорът е готов

„onreadystatechange“ е свойство на XMLHttpRequest Object, което дефинира функция, която да бъде извикана при промяна на свойството readyState.

„статус“ е свойство на обекта XMLHttpRequest, което връща номера на състоянието на заявка

  • 200: „ОК“
  • 403: "Забранено"
  • 404 Страницата не е намерена"

Методи на обект XMLHttpRequest: За да изпратим заявка до уеб сървър, използваме методите open () и send () на обекта XMLHttpRequest.

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

Създайте функция changeContent () с помощта на 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(); }

Пример за AJAX за промяна на съдържанието на уеб страница:

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

Файлът content.txtтрябва да присъства в основната директория на уеб приложението.