Зачем он нужен, этот JQuery?
Пожалуй, только для того, чтобы работать со скриптовым API, не изучая этого API :)
Сегодня имел дело как раз с таким разработчиком. Представления о том, что возможен "AJAX" без всякого JQuery.js, у человека нет, как и у всех, кто помоложе.
Между тем, JQuery - просто "оболочка дешёвая" над XMLHttpRequest, и ничего более.
Представим, что на сервере лежит PHP-скрипт по имени ajax.php, извлекающий откуда-то новости, пусть даже пока так:
<?php echo "<h3>Текст новости будет получен здесь</h3><h5>07.09.2015</h5>"; ?>
В той же папке имеется обычный HTML-файл index.html, работающий с этим скриптом со стороны клиента:
<html>
<head>
<meta charset='utf-8'>
<title>Пример AJAX без JQuery</title>
</head>
<body>
<button onclick="ajaxload();">Загрузить</button>
<div id="news"><h3>Нет новостей</h3></div>
<script type="text/javascript">
function ajaxload() {
var xhrObject=new XMLHttpRequest(); //создаем объект XMLHttpRequest
xhrObject.onreadystatechange=function() {
//при получении ответа будет срабатывать событие onreadystatechange
if (this.readyState==4) {
//состояние this.readyState==4 означает, что запрос завершен
if (this.status >=200 && xhrObject.status < 300) {
//если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно
document.getElementById('news').innerHTML=this.responseText;
//передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText
}
}
}
xhrObject.open('GET', 'ajax.php');
//устанавливаем метод запроса и ресурс, к которому будет идти запрос
xhrObject.send(); //отправляем запрос
}
</script>
</body>
</html>
Здесь "новость" просто возвращается с сервера по нажатию кнопки "Загрузить", вся страница при этом не перезагружается.
Буковок получается немало, зато логика процесса как на ладони. Положив в папку ещё и немалого размера jquery.js, мы могли бы выполнить ту же работу другим кодом:
<html>
<head>
<meta charset='utf-8'>
<title>Пример AJAX с JQuery</title>
<script src="jquery.js"></script>
</head>
<body>
<button>Загрузить</button>
<div id="news"><h3>Нет новостей</h3></div>
<script type="text/javascript">
$(function() {
$('button').click (function() {
$('#news').load ('ajax.php', function (response, status, xhr) {
if (status == "error") {
var msg = "Error: ";
$("#news").html( msg + xhr.status + " " + xhr.statusText);
}
});
});
});
</script>
</body>
</html>
Ну да, буковок чуть поменьше (ещё и ошибки обрабатываются), зато скобочек-то? :)
Хорошая и понятная книга по JQuery есть у Антона Шевчука.
И, таки да, теги <script>, <frame>, <iframe> и т.п. ничуть не менее "аяксны", чем JQuery :)
07.09.2016, 17:00 [5138 просмотров]