Готовый пример ajax запроса на чистом javascript. JavaScript - Асинхронные AJAX запросы на примерах. Запрос html-данных с помощью функции Load

Мы разобрали основной механизм работы метода jQuery $.ajax() . Теперь не плохо бы рассмотреть случаи из реальной практики: каким способом и откуда можно получать данные для передачи ajax-запросом.

Получение данных из формы.

Есть несколько способов получить данные из полей формы:

  • Выбирать каждое поле отдельно, получая его значение. Однако, это не очень удобно, когда полей много.
  • Использовать метод serialize()
  • Использовать метод serializeArray()

    • Остановимся на двух последних и не столько на том, как получать данные (тут всё просто ), а на том, как их обрабатывать на стороне сервера. Возьмем, к примеру, такую форму:

    HTML (файл index.html )

    Ф.И.О:
    Email:
    Пол: Мужской Женский
    Получать письма:
    Да
    Нет

    И напишем такой JS-код

    jQuery (файл script.js )

    $(function(){ $("#my_form").on("submit", function(e){ e.preventDefault(); var $that = $(this), fData = $that.serialize(); // сериализируем данные // ИЛИ // fData = $that.serializeArray(); $.ajax({ url: $that.attr("action"), // путь к обработчику берем из атрибута action type: $that.attr("method"), // метод передачи - берем из атрибута method data: {form_data: fData}, dataType: "json", success: function(json){ // В случае успешного завершения запроса... if(json){ $that.replaceWith(json); // заменим форму данными, полученными в ответе. } } }); }); });

    Теперь напишем обработчик таким образом, чтоб наглядно увидеть разницу между методами serialize() и serializeArray()

    PHP-обработчик (файл handler.php )


    Robert Sheckly,

    необходимо, помимо указания нового адреса файла - serverAddr ="http://zykov/data.xml", заменить в функции

    handleStateChange()

    resp=xmlHttp.responseText;

    resp=xmlHttp.responseXML.getElementsByTagName("name").firstChild.data;

    Тогда вместо сообщения

    Сервер передал: Привет, клиент!

    появится сообщение

    Сервер передал: Robert Sheckly

    AJAX - группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы. Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.

    Для реализации технологии используется метод $.ajax или jQuery.ajax :

    $.ajax(свойства) или $.ajax(url [, свойства])

    Второй параметр был добавлен в версии 1.5 jQuery.

    url - адрес запрашиваемой страницы;

    properties - свойства запроса.

    Полный список параметров приведен в документации jQuery.

    В уроке мы используем несколько наиболее часто используемых параметров.

    success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

    data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

    dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

    type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

    url (строка) - адрес URL для запроса.

    Пример 1

    Простая передача текста.

    $.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

    Для ответа имеется элемент div .result .

    Ждем ответа

    Сервер просто возвращает строку:

    Echo "Пример 1 - передача завершилась успешно";

    Пример 2

    Передаем пользовательские данные PHP скрипту.

    $.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

    Сервер возвращает строку со вставленными в нее переданными данными:

    Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

    Пример 3

    Передача и выполнение кода JavaScript

    $.ajax({ dataType: "script", url: "response.php?action=sample3", })

    Сервер выполняет код:

    Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

    Пример 4

    Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

    $.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

    Сервер должен возвращать XML код:

    Header ("Content-Type: application/xml; charset=UTF-8"); echo

    СХОЖИЕ СТАТЬИ