БлогNot. Зачем он нужен, этот JQuery?

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Зачем он нужен, этот 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 :)


теги: html jquery

комментарии (1)

07.09.2016, 17:00; рейтинг: 2194

  в началопоиск по блогунаписать авторустатистика

Наверх Яндекс.Метрика
© PerS
вход