Пример работы с AJAX. Набор функций.

Простой набор функций для построения клиентской части AJAX-приложения.

var ajax = {
   /* Отправляет запрос к серверу. Базовая функция, все остальные являются обёртками для неё */
   query:function(url, ok){
      var req = (function(){
         /* Создаём AJAX-объект */
         try{return new XMLHttpRequest()}
         catch(e)
         {
            try{return new ActiveXObject('Microsoft.XMLHTTP')}
            catch(e){throw new Error('Your browser does not support AJAX')}
         }
      })(), a = arguments, c_err = a[2] || function(){}, data = a[3], mtd = a[4]||(data?'POST':'GET');
      with(req){
         /* Вешаем обработчик */
         onreadystatechange =function(){
            if(readyState == 4 && ok)(/200|304/.test(status)?ok:c_err)(req);
         };
         open(mtd, url, true);
         /* Выставляем нужные заголовки и отправляем запрос */
         if(mtd=='POST')setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         setRequestHeader('X-Requested-With', 'XMLHttpRequest');
         setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
         send(data)
      }
   },
   /* Загружает ответ сервера в выбранный HTML-элемент */
   load:function(url, elem){
      this.query(url,
         function(req){elem.innerHTML = req.responseText},
         arguments[2], arguments[3], arguments[4])
   },
   /* Отправка формы */
   sendForm:function(frm, ok){
      var data = [];
      /* Собираем данные из элементов формы... */
      (function(x){
         for(i in x)
            if(!(/check|file/.test(x[i].type) && !(x[i].checked)))
               data.push(x[i].name+'='+encodeURIComponent(x[i].value))
      })(frm.elements);
      /* ...и выполняем запрос */
      this.query(frm.action, ok, arguments[2], data.join('&'), frm.method.toUpperCase())
   },
   /* Отправка запроса и приём данные в JSON-представлении */
   json:function(url, ok){
      this.query(url,
         function(req){ok(req, eval('('+req.responseText+')'))},
         arguments[2], arguments[3], arguments[4])
   }
};
/* Функции для отправки данных GET и POST методами */
for(i in{'post':'','get':''})ajax[i] = new Function('url', 'data', 'ok', 'this.query(url, ok, arguments[3], data, "'+i.toUpperCase()+'")');

В результате выполнения этого скрипта создаётся объект ajax, имеющий следующие методы.

ajax.query(url, ok[, error, data, method]);

Выполняет запрос к серверу. Параметры:

  • url, с которым нужно соединиться
  • функция, вызываемая при получении ответа от сервера
  • функция, вызываемая в случае ошибки
  • данные для отправки (url-encoded строка)
  • метод - GET или POST (по умолчанию используется GET)

Последние 3 параметра необязательны.Пояснения по коду. Вначале создаётся ajax-объект (Microsoft.XMLHTTP для IE и XMLHttpRequest для остальных браузеров). Если ни один из вариантов не увенчался успехом, функция бросает исключение. Затем вешается обработчик для события onreadystatechange, в котором, в зависимости от результата запроса (проверяется код http-ответа - req.status), вызывается функция ok или error (если она задана), ей передаётся один параметр - созданный нами AJAX-объект. Затем открываем соединение и выставляем заголовки запроса. Content-Type со значением application/x-www-form-urlencoded выставляется в том случае, если используется метод отправки POST. X-Requested-With нужен для того, чтобы серверный скрипт мог отличить AJAX-запрос от обычного HTTP-запроса (этот способ является общепринятым и применяется в большинстве JS-библиотек, использующих AJAX). И, наконец, If-Modified-Since с датой, установленной далеко в прошлое, используется для того, чтобы получить от сервера свежие данные, минуя кэш.Ну и последний шаг - отправляем запрос.

ajax.load(url, element[, error, data, method]);

Отправляет запрос на сервер и загружает ответ в выбранный HTML-элемент. Второй параметр функции - элемент, в который нужно загрузить ответ. Все остальные соответствуют аналогичным параметрам функции query.

ajax.sendForm(frm, ok[, error]);

Отправляет на сервер данные формы. Первый параметр - форма, которую нужно отправить, два остальных - функции обработки успешного и ошибочного завершения запроса. В качестве данных используется url-encoded строка, собранная из имён элементов формы и их значений. URL и метод отправки берутся из атрибутов action и method формы.

ajax.json(url, ok[, error, data, method]);

Функция аналогична функции query, но предполагает получение ответа в формате JSON (JavaScript Object Notation). Данные в формате JSON являются строковым представлением JavaScript-объекта, например:

{'status':'OK', 'message':'Request success'}

Для разбора этих данных достаточно вызвать eval с вышеупомянутой строкой в качестве аргумента и присвоить результат выполнения какой-нибудь переменной. Например, в результате выполнения этих манипуляций с приведённой выше строкой будет создан объект с двумя полями - status и message со значениями OK и Request success соответственно.
Функция ok в этом случае получает 2 аргумента: объект XMLHttpRequest и полученный с сервера JSON-объект.

ajax.get(url, ok[, error, data]);
ajax.post(url, ok[, error, data]);

То же самое, что и query, только с использованием заранее определённого метода отправки - GET для первой функции и POST для второй.

Ну и пара примеров использования этой библиотечки =)

Простой запрос.

JavaScript

ajax.query('script.php', function(req){
   alert(req.responseText)
}, function(){
   alert('Request error')
}, 'param=value', 'GET');

PHP (файл script.php)

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']))
    echo 
'Your query string is:'.$_GET['param'];
else
    die(
'This is not AJAX request');

Запрос и получение данных в формате JSON.

JavaScript

ajax.json('check_user.php', function(req, json){
   alert(json.state == 'OK' ? 'User exists':'User not exists');
}, function(){
   alert('Request error')
}, 'login=john', 'POST');

PHP (файл check_user.php)

$result mysql_query('select * from `users` where `login`='.$_POST['login']);$count mysql_num_rows($result);$json_response '{"state":"'.($count 'OK':'Error').'", "message":"'.($count 'User found':'User not found').'"}';
echo 
$json_response;

Отправка формы:

HTML

<form action="login.php" method="post">
   <input type="text" name="login" />
   <input type="password" name="pass" />
   <input type="submit" value="Авторизация" />
</form>
<div id="response"></div>

JavaScript

document.forms[0].onsubmit = function(){
   ajax.sendForm(this, function(req){
      document.getElementById('response') = req.responseText
   })
}

PHP (файл login.php)

if(!($_POST['login']))
    die(
'Please input your login');
else if(!(
$_POST['pass']))
    die(
Please input your password);/* Действия, связанные с авторизацией пользователя. Результат сохраняется в переменной $login_result */echo $login_result;
 

Собственно, всё. Скрипт проверен в деле, нечто подобное я использовал с своих последних проектах. Надеюсь, ещё кому-нибудь пригодится =)

Следующая запись

Предыдущая запись

Похожие записи

Комментарии

Еще нет комментариев.

Пингбэки

Оповещения открыты.

Трэкбэки

URL архива

Only authorized users can post comments