Продвижение сайтов
Контекстная реклама
Таргетинговая реклама
Digital Agency
SERM
Введение в JQuery Ajax, post, get, JSON

14 марта 2008


Данный пост посвящен «быстрому» методу взаимодействия клиент-сервер (со стороны пользователя) — Ajax. И основываясь на библиотеке — jQuery.

JQuery – это довольно удобный фреймворк, позволяющий упростить работу с DOM (Document Object Model) и Ajax. Он включает в себя разнообразные методы для работы с эффектами, формами и т.д. Плохой стороной jQuery можно назвать его вес, что влияет на скорость загрузки, но если у вас установлен на хостинге GZip, то все будет отлично, поскольку вес библиотеки будет уменьшаться в три раза.

Ajax Load

Метод «Load» предназначен для получения данных с сервера в определенный элемент.

Пример:

[code] <script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$(document).ready(function(){
    $("#myJSForm").load("/news/form.php", { formName : ‘Форма’ }, function(){
alert(‘Форма загружена!’);
    });
});
</script>[/code]

Ajax Get

[code] <script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.get("/news/form.php", { name: "Даниэль", email: "deniel@..." },function(data){
    alert("Ответ с сервера: " + data);
});
</script>[/code]

JQuery GetScript

«GetScript» – это метод динамической загрузки JavaScript-файла во время исполнения какой-либо функции.

[code] <script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.getScript("http://webering.ru/js/color.js ", function(){
  $(".next").click(function(){
    $(".scroll").animate( { backgroundColor: '#999999' }, 1000)
      .animate( { backgroundColor: '#FFFFFF' }, 1000);
  });
});
</script>[/code]

Ajax Post

[code] <script src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$.post("/news/form.php", { action: "/", method: "get" },function(data){
    alert("Полученные данные: " + data);
});
</script>[/code]

JSON

«Java Script Object Network» — позволяет не просто возвращать информацию, а возвращать структурированную информацию в виде объекта. Для того чтобы преобразовать данные на сервере в JSON надо воспользоваться специальным php-классом для преобразования. А также вы можете прочитать документацию по использованию данного объекта.

[code] <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">
$(document).ready(function(){
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?&ajax=true",
        function(data){
            $.each(data.items, function(i,item){
                $("<img />").attr("src", item.media.m).appendTo("body");
                if ( i == 3 ) return false;
            });
        });
    });
</script>[/code]

Наши клиенты

FitHealth
ActiveFitness
Airline
БалтАвтоТрейд BMW
Мостострой №6
FunJump
Emex
БалтАвтоТрейд Volkswagen
Fun City
iShop

Санкт-ПетербургМосква

  • Звоните!

    +7 (812) 318-40-34 +7 (499) 288-16-43
    +7 (499) 288-15-30
  • Пишите!

    info@webering.ru
  • Приезжайте!

  • г. Санкт-Петербург, ул. Седова, д. 11, лит. А, оф. 642 БЦ «Эврика» г. Москва, ул. Бутлерова, д. 17, оф. 5115 БЦ «NEO GEO»

  • Наш офис расположен в 5 минутах от станции метро «Елизаровская» в бизнес-центре «Эврика».

Ваша заявка успешно отправлена!

Отправить заявку

Бюджет: 20000 Р