Четверг, 14.12.2017, 16:08
RR - StUdIo___Добро Пожаловать Шамкир Гес___StUdIo...RR
Гипер-Софт
Главная Регистрация Вход
Приветствую Вас, гости · RSS
SamirMM Studio"RR" WWW.GES.MOY.SU
  
  Ключи и пин-коды
FIFA, Steam: случайные, Counter-Strike, Playstation Network, Hearthstone: Heroes of Warcraft, World of Warcraft, Xbox LIVE (Microsoft Points), Prepaid Credit Card, Far Cry, Assassin´s Creed, Diablo 3, Middle-earth: Shadow of Mordor, ...
  Электронные книги
Контрольные работы, Музыка, ноты, тексты песен, В помощь студенту, Фэнтази, Физика, История, Государство и право, Математика, Магия, оккультизм, мистика, Творческие личности, Рукоделие, Экономика, ...
  Цифровые товары
Игровые аккаунты, Аккаунты PSN, Аккаунты Xbox, iTunes & App Store, Telonko.ru, Приглашения /инвайты, Разное, Skype-аккаунты, Видео и аудиокурсы, уроки, Google Play, Анонимные прокси, Базы данных, ...
  Программное обеспечение
Разблокировка телефонов, Антивирусы, Принтеры, Программы > MMORPG, Программы для сотовых телефонов, Шифрование, Windows, Спортивные, SEO скрипты, Советники, Стратегии, Mногофункциональные утилиты, ...
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: ges 
форум для всех » Все для web мастера » Скрипты » JQuery Ajax с примерами (AJAX с помощью JQuery (с примерами).)
JQuery Ajax с примерами
gesДата: Вторник, 11.12.2012, 17:23 | Сообщение # 1
Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
[gray][red]AJAX с помощью JQuery (с примерами).

продолжаем цикл статей по JQuery — прекрасному JavaScript фреймворку, с помощью которого можно делать все!
[/red]

В прошлой статье мы поговорили о JQuery в общем — рассмотрели принцип его работы, были приведены простейшие примеры.
В этой статье мы затронем такую тему, как AJAX с помощью JQuery (с примерами).

xmlHttpRequest

Вы знаете что такое xmlHttpRequest? XmlHttpRequest — это объект, позволяющий браузеру делать запросы к серверу без перезагрузки страницы. Да и это, собственно, понятно из названия: http request — запрос по http протоколу. А вот с xml интересней: несмотря на указание этого языка в названии, объект XHR (это сокращение от xmlHttpRequest) работает с данными произвольного формата, не только с XML. Собственно, технология Ajax и основана на этом компоненте. Более углублённо о нём можно почитать на сайте xmlhttprequest.ru, посмотреть примеры использования можно в статье о CURLe, но это нас сейчас мало интересует. Сейчас разберем Ajax с помощью JQuery.

JQuery AJAX

Как всегда — от простого к сложному:

Code
$.ajax({
   url:  '/ajax.php?act=jquery_test', //УРЛ, к которому мы обращаемся
   type:  'GET', //тип: может быть GET или POST (о нём чуть ниже)
   success: function(response){ //success - функция, которая вызывается, когда запрос прошёл успешно и данные (data) получены
     alert('Сервер вернул ответ: ' + response);
   }
});


Это самый простейший пример использования ajax в JQuery. Теперь посмотрим, как можно отдать серверу данные методом POST:

Code


$.ajax({
   url:    '/ajax.php?act=ajax_jquery_post',
   type:    'POST',
   contentType: 'application/x-www-form-urlencoded', //Тип передаваемых данных
   data:    'text='+$('#text').val()+'&id=282&c=w',
    //а это, собственно, данные (произвольные)
   success: function(response){
     alert('Данные отправлены! Сервер вернул ответ: ' + response);
   }
});


Это был пример отправки данных на сервер с помощью JQuery AJAX. Теперь немного о других форматах:

Code

$.ajax({
   url:   'ajax.php?act=ajax_jquery',
   type:   'POST',
   dataType: 'JSON', //форматы могут быть: JSON, XML, HTML, text и некоторые другие
   data:   someData,
   success:  function(response){
     //какие-нибудь действия
   }
});


Кроме того, что мы можем повесить обработчик события "успех" (success), мы также можем повесить обработку других событий:

01 success вызывается, когда запрос завершился успешно. Ему передаются параметры: возвращаемые сервером данные, строка, содержащая код ответа сервера, и объект xmlHttpRequest.

02 error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки

03 complete вызывается, когда запрос завершился. Просто завершился, независимо от того, удачей или нет. Передаются: xmlHttpRequest и строка, указывающая код успеха или ошибки.

04 dataFilter вызывается перед вызовом success. Ему передаются полученные от сервера данные. В ней мы можем произвести какую-либо работу с данными и должны вернуть их (return ...). Если есть эта функция, то в success попадает то, что мы возвращаем из dataFilter

05 beforeSend вызывается, как это понятно из названия, до отправки запроса на сервер
Лично я, чаще всего пользуюсь success и error, и иногда complete, а остальные юзаю о-очень редко.

Теперь пример:

Code

$.ajax({
   url:  'ajax.php?act=something',
   type:  'GET', //что-нибудь получим
   success: function(response, code){ //да, мы пропустили последний параметр — он нам не нужен
       if (code==200){
         alert('Сервер вернул: ' + response);
       }else{
         alert('Сервер вернул какой-то непонятный код ответа: ' + code);
       }
   },
   error:  function(xhr, str){
       alert('Возникла ошибка: ' + xhr.responseCode);
   }
   complete:  function(){ //а тут ничего из предложенных параметров не берем <img src="http://s16.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />
       $('#something').hide(); //например, спрятали какую-то кнопочку, которая вызывала запрос
   }
});


Это уже пример посерьезней, по профессиональней, так сказать — с обработкой ошибок.

jQuery.ajaxSetup()

Есть в JQuery такой замечательный метод - ajaxSetup.
....С его помощью можно глобально во всем скрипте задать все необходимые опции.

Пример:

Code

$(document).ready(function(){

   $.ajaxSetup({
    url:  'ajax.php',
    type:  'POST',
    success: function(data){
      $('#somefield').val(data);
    }
    error:   function(){
      $('#somebutton').addClass('error');
    }
   });

   $('#somebutton1').click(function(){
    $.ajax({data: 'act=1'});
   });

   $('#some2').click(function(){
    $.ajax({data: 'act=2'});
   });
});


Опции $.ajax

А теперь, попрактиковавшись немного, расскажу теор.часть - про опции JQuery Ajax

01 async (true или false). По умолчанию true.
Включает или выключает асинхронные запросы (см. компонент xmlHttpRequest). Помните, что включив синхронные запросы, можете подвесить браузер!

02 cache (true или false). Включает или выключает кеширование браузером

03 contentType (строка). Тип содержания, передаваемого на сервер.
При сабмите форм используйте application/x-www-form-urlencoded

04 data (строка). Данные, отправляемые на сервер.

05 dataType (строка).
Тип ожидаемых от сервера данных.
Если ничего не указано, JQuery попытается определить результат, основанный на
MIME-типе ответа. Может принимать значения: xml, json, script, html.

06 ifModified (true или false (по умолчанию)).
Если установлено в true, то запрос будет успешным только тогда, когда ответ изменился с момента прошлого запроса (достигается путём проверки заголовка Last-Modified)

07 timeoutмиллисекундах). Значение, по прошествии которого, соединение с сервером будет обрываться (тайм аут)

08 type (строка: GET или POST). Тип запроса к серверу: GET или POST

09 url (строка). Страница сервера, к которой будет сделан запрос.
Вот мы и разобрались с Ajax на JQuery. Ожидайте следующую статью — в ней будет рассмотрено что-то вкусненькое на JQuery wink

[/gray]


Прежде чем задать вопрос Администратору подумайте вопрос о чем?
Администраторы вопросах не отвечает только создает тему!
Вопросы долько в том случай о том вопрос будет про
Студии "RR"
 
форум для всех » Все для web мастера » Скрипты » JQuery Ajax с примерами (AJAX с помощью JQuery (с примерами).)
Страница 1 из 11
Поиск:

© GES.MOY.SU 2007-2017 . Администрация не несёт ответственности за содержащие файлы на портале.   
Все материалы на сайте принадлежат исключительно их владельцам! 
Сайт оптимизирован для просмотра с разрешением более 1024x768, браузером FireFox или Opera.
 Разрешение вашего экрана : Ваш браузер: -
<< Сайт зарегистрирован в домене >>