gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
00446ffb1758af30d51a3dc664c20c43244bcdcb
freeCodeCamp/guide/russian/php/ajax/index.md

114 lines
5.2 KiB
Markdown
Raw Normal View History

feat: add Russian guide
2018-10-12 16:00:59 -04:00
---
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** : при загрузке веб-страницы браузер создает объектную модель документа на странице.
fix: repalce imgur with s3 for russian guide without conflict (#36055) * fix: imgur to s3 for russian guide without conflict (cherry picked from commit ac90750e36b0dd1fe508c69a2277b75be48e4b95) * fix: remove extra links Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: revert unrelated changes * fix: revert changes
2019-05-24 23:53:55 +03:00
![](https://cdn-media-1.freecodecamp.org/imgr/pfC7QFH.png "Как работает AJAX")
feat: add Russian guide
2018-10-12 16:00:59 -04:00
**Создайте объект 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)
Reference in New Issue Copy Permalink