AJAX выполняет обновление части веб-страницы, без перезагрузки всей страницы.
AJAX — метод для создания быстрых и динамических веб-страниц.
AJAX позволяет создание веб-страниц, которые будут обновляться асинхронно путем обмена небольшими объемами данных с сервером за кулисами. Это означает, что можно обновлять части веб-страницы, без перезагрузки всей страницы.
Классические веб-страниц, (которые не используют AJAX), перезагружают всю страницу, если содержание должно измениться.
Примеры приложений, использующих AJAX: Google Maps, Gmail, YouTube и Facebook.
Пример №1
СОБЫТИЯ
OnClick событие, выполнение JavaScript при щелчке по кнопке.
XMLHttpRequest () для чтения текстового файла.
Onreadystatechange событие, Когда запрос на сервер отправляется, мы хотим, чтобы выполнились некоторые действия, основанные на ответе.
Событие onreadystatechange срабатывает каждый раз, когда readyState изменения.
ReadyState свойство содержит статус XMLHttpRequest.
getElementById () Метод, возвращает элемент, который имеет атрибут ID с указанным значением.
Этот метод является одним из наиболее распространенных методов в HTML DOM, и используется почти каждый раз, когда вы хотите управлять, или получить информацию из, элемента на документе.
Возвращает NULL , если никакие элементы с указанным идентификатором не существует.
ID должно быть уникальным в пределах страницы. Тем не менее, если существует более одного элемента с указанным идентификатором, метод getElementById () возвращает первый элемент в исходном коде.
responseText свойство, Возвращает ответ сервера в виде строки.
КОД
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>
Пусть AJAX изменить этот текст</h2></div>
<button type="button" onclick="loadDoc()">Изменение содержимого </button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Пример №2
СОБЫТИЯ
OnKeyUp Событие, происходит, когда пользователь отпускает клавишу (на клавиатуре).
InnerHTML свойство, возвращает содержимое HTML (внутренний HTML) элемента.
КОД
<!DOCTYPE html>
<html>
<body>
<h3>Начните вводить имя в поле ввода ниже:</h3>
<form action="">
Имя: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Предложения: <span id="txtHint"></span></p>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "gethint.php?q="+str, true);
xhttp.send();
}
</script>
</body>
</html>