Підручник з AJAX: що таке AJAX і як ним користуватися

Програмування

Що таке AJAX?

AJAX розшифровується як асинхронний JavaScript та XML . Це не мова програмування. Це технологія для розробки кращих, швидших та інтерактивних веб-додатків із використанням HTML, CSS, JavaScript та XML.

  1. HTML: Мова розмітки гіпертексту (HTML) використовується для визначення структури веб-програми.
  2. CSS: Каскадна таблиця стилів (CSS) використовується для надання зовнішнього вигляду та стилю веб-додатку.
  3. JavaScript: JavaScript використовується для створення веб-програми інтерактивною, цікавою та зручною для користувачів.
  4. XML: Розширювана мова розмітки (XML) - це формат для зберігання та транспортування даних з веб-сервера.

Що означає асинхронний в AJAX?

Асинхронність означає, що веб-програма може надсилати та отримувати дані з веб-сервера, не оновлюючи сторінку. Цей фоновий процес надсилання та отримання даних із сервера разом із оновленням різних розділів веб-сторінки визначає асинхронну властивість / функцію AJAX.

Як працює AJAX

AJAX використовує вбудований у браузер об’єкт XMLHttpRequest для запиту даних з веб-сервера та HTML DOM для відображення або використання даних.

Об'єкт XMLHttpRequest : Це API у формі об'єкта, методи якого допомагають у передачі даних між веб-браузером та веб-сервером.

HTML DOM : Коли веб-сторінка завантажується, браузер створює об’єктну модель документа на сторінці.

Створіть об'єкт XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Властивості об'єкта XMLHttpRequest:

readystate є властивістю об'єкта XMLHttpRequest, який містить статус XMLHttpRequest.

  • 0: запит не ініціалізований
  • 1: встановлено з’єднання із сервером
  • 2: запит отримано
  • 3: обробка запиту
  • 4: запит закінчено і відповідь готова

`` onreadystatechange '' - це властивість об'єкта XMLHttpRequest, яке визначає функцію, що викликається при зміні властивості 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повинен бути присутнім у кореневому каталозі веб-програми.