Warning: array_merge(): Argument #2 is not an array in /hsphere/local/home/magistr/codeismy.name/wp-content/plugins/wp-pagenavi/scb/Options.php on line 46
Главная » Framework's, Javascript » Изучаем JQuery. Часть 2 — Ajax

Изучаем JQuery. Часть 2 — Ajax

Дата: Июнь 9, 2009

(0) комментариев

jquery-logo Ajax — какое модное слово сейчас, но на самом деле єто всего лишь несколько методов в javascript. И в каждом современном фрэймворке есть функции AJAX, не исключением является JQuery. В данной статье я покажу пример того как пользоваться функциями AJAX с помощью JQuery.


Начнём с документации приведенной на официальном сайте

Ajax Запросы:
jQuery.ajax( параметры ) Вернёт: XMLHttpRequest
загрузит удалённую страницу при помощь HTTP запроса.
load( url, data, callback ) Вернёт объект: jQuery
Загрузит HTML из удалённого файла и создаст объекты DOM.
jQuery.get( url, data, callback, type ) Вернёт: XMLHttpRequest
загрузит удалённую страницу при помощь HTTP запроса GET.
jQuery.getJSON( url, data, callback ) Вернёт: XMLHttpRequest
Отправит запрос типа JSON методом GET.
jQuery.getScript( url, callback ) Вернёт: XMLHttpRequest
Загрузить и ваполнить на текущей страничке ответ JavaScript запрос методом GET.
jQuery.post( url, data, callback, type ) Вернёт: XMLHttpRequest
загрузить удалённую страничку по HTTP POST запросом.

Ajax События:

ajaxComplete( callback ) Создаст объект: jQuery
Задаёт функцию выполняемую, когда AJAX запрос завершён.
ajaxError( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую, если AJAX запрос вернул ошибку.
ajaxSend( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую, выполняемую перед AJAX запросом.
ajaxStart( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую после того как AJAX запрос стартовал, но остаётся не активным.
ajaxStop( callback ) вернёт объект: jQuery
адаёт функцию выполняемую после того как все AJAX запросы завершатся.
ajaxSuccess( callback ) вернёт объект: jQuery
адаёт функцию выполняемую после того как AJAX запрос будет выполнен УСПЕШНО.

Разное:

jQuery.ajaxSetup( options )
Устанавливает глобальные настройки AJAX запросов.
serialize( ) вернёт: сериализованую строку
сериализует объекты и элементы в строки.
serializeArray( ) вернёт: сериализованый массив

Итак документацию мы разобрали а теперь практическое применение.
Ни что так хорошо не помогает понять работу как хорошо написанный пример :)
Листинг примеров:
1) Загрузка HTML кода в необходимый нам DOM элемент на странице

1
2
3
$(document).ready(function(){              // по окончанию загрузки страницы
    $('#example-1').click(function(){      // вешаем на клик по элементу с id = example-1
        $(this).load('ajax/example.html'); //

в данном случае мы подгрузим елементы из ajax/example.html
2) Для организации HTTP авторизации делаем такой код

1
2
3
4
5
$.ajax({
    url: '/ajax/example.html',             // указываем URL и
    dataType : "json",                     // тип загружаемых данных
    success: function (data, textStatus) { // вешаем свой обработчик на функцию success
        $.each(data, function(i, val) {    // обрабатываем пол

3) Отправка данных на сервер методом POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){                          // по завершению загрузки страницы
    $('#example-3').click(function(){                  // вешаем на клик по элементу с id = example-3
        $.post('ajax/example.xml', {}, function(xml){  // загрузку XML из файла example.xml
            $('#example-3').html('');
            $(xml).find('note').each(function(){       // заполняем DOM элемент данными из XML
                $('#example-3').append('To: '   + $(this).find('to').text() + '<br/>')
                               .append('From: ' + $(this).find('from').text() + '<br/>')
                               .append('<b>'    + $(this).find('heading').text() + '</b><br/>')
                               .append(           $(this).find('body').text() + '<br/>');
            });
        }, 'xml');                                     // указываем явно тип данных
    })
});
ответ в формате XML
<?xml version="1.0" encoding="UTF-8"?>
<note>
 

4) Загружает данные в формате JSON (или другими словами возвращаем ответ в виде переменных яваскрипт)

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){                            // по завершению загрузки страницы
    $('#example-4').click(function(){                    // вешаем на клик по элементу с id = example-4
        $.getJSON('ajax/example.json', {}, function(json){  // загрузку JSON данных из файла example.json
            $('#example-4').html('');                   // заполняем DOM элемент данными из JSON объекта
            $('#example-4').append('To: '   + json.note.to + '<br/>')
                           .append('From: ' + json.note.from + '<br/>')
                           .append('<b>'    + json.note.heading + '</b><br/>')
                           .append(           json.note.body + '<br/>');
        });
    })
});
пример ответа который должен вернуть се

Базовые методы мы изучили теперь перейдём к обработчикам событий. О самих методах читаем чуть выше :)

1) ajaxComplete( callback )

1
2
3
$("#msg").ajaxComplete(function(request, settings){
   $(this).append("<span>Request Complete.</span>");
});

2) ajaxSend( callback )

1
2
3
4
5
$("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<span>Starting request at "
   + settings.url
   + "</span>");
});

3) ajaxStart( callback )

1
2
3
$("#loading").ajaxStart(function(){
   $(this).show();
});

4) ajaxStop( callback )

1
2
3
$("#loading").ajaxStop(function(){
   $(this).hide();
});

5) ajaxSuccess( callback )

1
2
3
$("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<span>Successful Request!</span>");
});

Всё изучив это материал вы стали гуру))))
ну ещё на последок мааааааленький такой примерчик

Итак создадим два файла: events.html — где будут размещен элемент (например обычная ссылка), щелчок мышью на которой будет инициировать ajax запрос, и файл events.php — обработчик ajax-запросов.
Затем простенький HTML-код:

1
2
3
4
5
6
7
8
<ul>
<li>
<a href="http://www.linkexchanger.su/wp-admin/#" id="a1">
Выполнить Ajax-запрос
</a>
<span id="loading">Выполняется Ajax-запрос...</span></li>
<li>
<span id="message">Ajax-з

кусочек из таблицы стилей:

1
2
3
4
5
6
7
8
#loading {
  display:none;
  padding-left:10px;
}
#message {
  display:none;
  padding-left:10px;
}

и полностью javascript-код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">    
$(document).ready(function(){  
  // --------------  
  $("#a1").click(  
    function () {  
      $.ajax({  
        type: "POST",  
        data: "n=3",  
        url: "events.php"  
      });    
    });  
  // --------------  
  $("#loading").ajaxStart(function(){  
   $(this).show();  
   $("#message").hide();  
  });  
  $("#loading").ajaxStop(function(){  
   $(this).hide();  
  });  
  $("#message").ajaxComplete(function(){  
   $(this).show();  
 });  
 
});  
</script>

По клику на элементе а с идентификатором а1 будет выполнен ajax-запрос к файлу events.php. Тип запроса POST и в качестве данных передадим некий параметр n=3
По событию ajaxStart будет показан элемент с идентификатором #loading, изначально скрытый. #message по этому же событию будет скрыт. По событию ajaxStop надо будет скрыть элемент #loading, а по событию ajaxComplete показать элемент #message.
файл events.php

1
2
3
4
5
6
<?php
if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest') {
  if ($_POST) {
    for($i=0;$i<count ($_post['n']);$i++)>
  } else {
    echo "Не передан параметр!";

Ну вот и всё.. продолжаем изучать JQuery дальше

a

    Автор: Sergey

    , ,




    Нет комментариев на "Изучаем JQuery. Часть 2 — Ajax"

    Нет комментариев.


    Вы можете продолжить обсуждение этой статьи на форуме


    Имя : 
    Почта : 
    Сайт : 
    Комментарий : 

    Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

    Создание сайта - Echo-group Раскрутка сайтов