114 lines
5.2 KiB
Markdown
114 lines
5.2 KiB
Markdown
|
---
|
|||
|
|
title: AJAX
|
|||
|
|
localeTitle: 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:**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var xhttp = new XMLHttpRequest();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Свойства объекта XMLHttpRequest:**
|
|||
|
|
|
|||
|
|
`readystate` является свойством объекта XMLHttpRequest, который содержит статус XMLHttpRequest.
|
|||
|
|
|
|||
|
|
* 0: запрос не инициализирован
|
|||
|
|
* 1: установлено соединение с сервером
|
|||
|
|
* 2: получен запрос
|
|||
|
|
* 3: запрос обработки
|
|||
|
|
* 4: запрос завершен, и ответ готов
|
|||
|
|
|
|||
|
|
`onreadystatechange` является свойством объекта XMLHttpRequest, который определяет функцию, вызываемую при изменении свойства readyState.
|
|||
|
|
|
|||
|
|
`status` является свойством объекта XMLHttpRequest, который возвращает номер статуса запроса
|
|||
|
|
|
|||
|
|
* 200: «ОК»
|
|||
|
|
* 403: «Запрещено»
|
|||
|
|
* 404 Не Найдено"
|
|||
|
|
|
|||
|
|
**Методы объекта XMLHttpRequest:** Чтобы отправить запрос на веб-сервер, мы используем методы open () и send () объекта XMLHttpRequest.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
xhttp.open("GET", "content.txt", true);
|
|||
|
|
xhttp.send();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Создайте функцию changeContent (), используя JavaScript:**
|
|||
|
|
|
|||
|
|
```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 для изменения содержимого веб-страницы:**
|
|||
|
|
|
|||
|
|
```HTML
|
|||
|
|
<!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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Файл `content.txt` должен присутствовать в корневом каталоге веб-приложения.
|
|||
|
|
|
|||
|
|
### источники
|
|||
|
|
|
|||
|
|
* [W3Schools](https://www.w3schools.com/js/js_ajax_intro.asp)
|
|||
|
|
* [Веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started)
|
|||
|
|
|
|||
|
|
### Другие источники
|
|||
|
|
|
|||
|
|
* [W3Schools](https://www.w3schools.com/js/js_ajax_intro.asp)
|
|||
|
|
* [Веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started)
|