Ajax на сайте без заморочек

Уроки по PHP, Javascript и т.п.

Ajax на сайте без заморочек

Сообщение Alazaur » 05 авг 2012, 14:49

Это не совсем урок, но другого подходящего раздела на форуме не нашлось. В обсуждениях топик потеряется, а может быть кому-то полезным.
Итак для людей, которые не очень сильны в JavaScript и фреймворках, а заюзать Ajax страсть как охота я написал небольшую функцию, которая позволит использовать эту технологию довольно легко.
  1. function Ajax(variables, success, error)
  2. {
  3.     var request;
  4.     var method = variables.method || 'GET';
  5.     var data = variables.data || null;
  6.     var url = variables.url || null;
  7.     var success = success || null;
  8.     var error = error || null;
  9.    
  10.     function setrequest()
  11.     {
  12.         request = (window.XMLHttpRequest && new XMLHttpRequest()) || (window.ActiveXObject && activeX());
  13.     }
  14.    
  15.     function activeX()
  16.     {
  17.         var xhttp;
  18.         try {xhttp = new ActiveXObject("Microsoft.XMLHTTP");}
  19.         catch (CatchException){xhttp = new ActiveXObject("Msxml2.XMLHTTP");}
  20.         return xhttp;
  21.     }
  22.    
  23.     this.send = function()
  24.     {
  25.         setrequest();
  26.         request.onreadystatechange = function(){
  27.             if (request.readyState == 4){
  28.                 if (request.status == 200) {
  29.                     if(success) success(request.responseText);
  30.                 } else {
  31.                     if(error) error(request.statusText);
  32.                 }
  33.             }
  34.         }
  35.         if(method == 'GET') {
  36.             url += '?'+data;
  37.             data = null;
  38.         }
  39.         request.open(method, url, true);
  40.         request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
  41.         request.send(data);
  42.     }
  43. }


Как использовать:
Поскольку на этом форуме подавляющее большинство знакомы с вконтактовским API то я решил сделать ее использование приблизительно похожим на вызов методов вконтакта.
  1. variable = new Ajax({fields list}, CallBackSuccess, CallBackError);

Где
variable - любая создаваемая вами переменная
fields list - список полей необходимых для выполнения запроса. Это:
  • url - URL на который делается запрос.
  • data - данные, которые будут передаваться серверу. Формируется по аналогии GET-параметров в URL, например user_id=777 так же передается и несколько параметров user_id=777&user_name=Alazaur. Разумеется методом POST вы можете и передавать и большие объемы информации, например содержимое TEXTAREA.
  • method - метод передачи данных GET или POST (если не передается то по умолчанию используется GET).
(Поля можно передавать в любом порядке)

CallBackSuccess - функция, которая будет вызвана после ответа сервера. Должна принимать ответ от сервера
CallBackError - функция, которая будет вызвана в случае ошибки. Должна принимать сообщение об ошибке.
Если вам не нужно знать ответ сервера, то можно функции коллбэка не прописывать. Однако делать этого я не рекомендую, поскольку в этом случае вы не будете на 100% уверены отправился ли ваш запрос.

После создания объекта отправляем его вызвав метод send().

Итак пример отправки запроса на сервер:
  1.  
  2. var ajax = new Ajax({method:'POST', data:'user_id=777', url:'http://mysite.ru'}, success, error);
  3. ajax.send();
  4.  
  5. //функции принимающие ответ
  6. function success(input){
  7.     alert(input);
  8.  }
  9.  
  10. function error(input){
  11.     alert(input);
  12. }
  13.  


Пример GET запроса:
  1. var ajax = new Ajax({data:'user_id=777', url:'http://mysite.ru'}, success, error);
  2. ajax.send();
  3.  
  4. //функции принимающие ответ
  5. function success(input){
  6.     alert(input);
  7.  }
  8.  
  9. function error(input){
  10.     alert(input);
  11. }

Без CallBack:
  1. var ajax = new Ajax({data:'user_id=777', url:'http://mysite.ru'});
  2. ajax.send();


Рекомендации:
  • Работайте с кодировкой UTF-8 во избежании косяков с передачей кириллических символов. Если же вам по каким-либо причинам нужно работать с другой кодировкой, замените в скрипте:
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
  • Во избежании косяков, особенно при передаче большого объема данных обрабатывайте передаваемые значения encodeURIComponent(), например:
    1. var ajax = new Ajax({data:'user_id='+encodeURIComponent(777), url:'http://mysite.ru'}, success, error);
Кода в скрипте постарался сделать по минимуму оставив только жизненно необходимое. Протестировано в Firefox, Opera, IE.
Я закончил можете кидаться тапками :D
Alazaur
Разработчик
Разработчик
 
Автор темы
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25
Благодарил (а): 24 раз.
Поблагодарили: 121 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Ajax на сайте без заморочек

Сообщение Alazaur » 05 авг 2012, 16:05

Да, кстати, кому не нужна отложенная отправка по send() вместо кода из первого поста можно использовать этот:
  1. function ajax(variables, success, error)
  2. {
  3.     var method = variables.method || 'GET';
  4.     var data = variables.data || null;
  5.     var url = variables.url || null;
  6.     var success = success || null;
  7.     var error = error || null;
  8.     var request = (window.XMLHttpRequest && new XMLHttpRequest()) || (window.ActiveXObject && activeX());
  9.     send();
  10.    
  11.     function activeX()
  12.     {
  13.         var xhttp;
  14.         try {xhttp = new ActiveXObject("Microsoft.XMLHTTP");}
  15.         catch (CatchException){xhttp = new ActiveXObject("Msxml2.XMLHTTP");}
  16.         return xhttp;
  17.     }
  18.    
  19.     function send()
  20.     {
  21.         request.onreadystatechange = function(){
  22.             if (request.readyState == 4){
  23.                 if (request.status == 200) {
  24.                     if(success) success(request.responseText);
  25.                 } else {
  26.                     if(error) error(request.statusText);
  27.                 }
  28.             }
  29.         }
  30.         if(method == 'GET') {
  31.             url += '?'+data;
  32.             data = null;
  33.         }
  34.         request.open(method, url, true);
  35.         request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
  36.         request.send(data);
  37.     }
  38. }


Его использование будет еще проще:
  1. ajax({data:'user_id=777', url:'http://mysite.ru'}, success, error);
  2.  
  3. function success(input){
  4.     alert(input);
  5.  }
  6.  
  7. function error(input){
  8.     alert(input);
  9. }
Alazaur
Разработчик
Разработчик
 
Автор темы
Сообщения: 1001
Зарегистрирован: 16 окт 2011, 20:25
Благодарил (а): 24 раз.
Поблагодарили: 121 раз.


Вернуться в Уроки на другие темы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron