• Елена Бенкен, Геннадий Самков
• AJAX. Программирование для Интернета (+ CD-ROM)
• Издательство: БХВ-Петербург, 2009 г.
• Твердый переплет, 464 стр.
• ISBN 978-5-9775-0428-7
• Тираж: 2000 экз.
• Формат: 70×100/16

От издателя:
Описана технология AJAX и показаны возможности, которые открываются перед разработчиком с ее применением. Рассмотрена объектная модель документа: DOM в JavaSript и DOM-функции в PHP. Изложены основы языка XML и формат JSON. Показан принцип генерации асинхронных запросов к серверу средствами JavaScript. Сделан обзор основных JavaScript-библиотек: Prototype, Scriptaculous, ExtJS и jQuery. Подробно рассмотрены популярные и перспективные библиотеки ExtJS и jQuery: описана объектная модель языка JavaScript, на которой базируются эти библиотеки; применение AJAX-запросов; обработка событий и др. Приведено большое количество практических примеров.

Компакт-диск содержит дистрибутивы Web-сервера, модуля РНР и сервера MySQL, исходные коды описываемых библиотек, распространяемых на основании лицензии GPL, а также примеры из книги.

Читателям:
В ходе чтения следует выполнять примеры, описываемые в книге. Каждый пример стоит изменять и переделывать самому с тем, чтобы лучше понимать, как он работает или как сделать так, чтобы все перестало работать.

От себя:
А от себя хочу добавить, что библиотеке jQuery в книге уделено достаточно много внимания – этот раздел занимает 160 страниц. Естественно, что стояла задача показать именно то, как jQuery помогает при использовании AJAX, но для этого необходимо было объяснить базовые понятия самой библиотеки. Поэтому в раздел о jQuery были включена глава о функциях ядра библиотеки, очень подробно рассмотрены практически все селекторы jQuery, рассмотрена работа с событиями в jQuery и манипуляции элементами. И только после этого подробно рассказывается об использовании AJAX. Абсолютно все сопровождается примерами с довольно подробными пояснениями. В общем этим разделом можно пользоваться как мануалом по вышеупомянутым разделам библиотеки.
Жаль конечно, что не удалось рассказать о всей библиотеке – но наверное это тема для отдельной книги.

Для начала определим задачу: первый список будет содержать предварительно загруженные названия стран и всегда находиться в активном состоянии. Два оставшихся списка – выбора авто и выбора модели, пустые и находятся в неактивном состоянии. После того, как в первом списке будет выбрана страна необходимо заполнить второй список названиями автомобилей и перевести его в активное состояние. А после выбора названия автомобиля – заполнить список названиями моделей именно этого автомобиля и тоже активировать список. Кроме того, мы должны гарантировать, что пользователь никогда не сможет выбрать автомобиль «HONDA Vectra произведеный в Ю.Корее». Для обмена данными с сервером будем использовать популярный нынче формат JSON.

Итак, задача определена. Поехали?

Начнем с чего-нибудь очень простого. Например с подключения библиотеки jQuery и создания HTML-разметки:

В HEAD страницы подключаем библиотеку:

<script src="js/jquery-1.3.1.js" type="text/javascript"></script>

В BODY создаем HTML-разметку:

<div class="border">
  <label>Страна</label><br />
  <select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
  </select>
</div>
<div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
</div>
<div class="border">
  <label>Модель</label><br />
  <select id="model" disabled="disabled"></select>
</div>

Легко и просто! Каждому списку – по id. Первый раскрывающийся список заполняем названиями стран. Два других ничем не заполняем и мало того, устанавливаем в неактивное состояние с помощью атрибута disabled. Описания стилей я приводить не буду – это дело вкуса каждого и не в тему этой статьи.

Что дальше? Задача оказалась не так уж и проста, как казалось в начале. Поэтому предлагаю пораскинуть мозгами и решить, какие общие действия мы будем производить над всеми списками. Я придумал два – заполнение списка и очистка списка. Давайте оформим эти операции в виде методов jQuery, чтобы иметь возможность в любой момент вызвать этот метод в цепочке команд jQuery.

Расширение для jQUery может быть либо методом, оперирующим с набором элементов, либо вспомогательной функцией, которая определяется непосредственно в $. Простой пример: в составе библиотеки есть метод each(callback), который работает как раз с набором элементов, выполняя функцию, определенную в параметре callback в контексте каждого элемента набора и вспомогательная функция $.each(object,callback), которая применяется для обхода массива или объекта, переданного в первом параметре с выполнением функции callback для каждого элемента массива(объекта). Почувствовали разницу?

(function($){
  // очищаем select
  $.fn.clearSelect = function() {
    return this.each(function(){
      if(this.tagName=='SELECT') {
        this.options.length = 0;
        $(this).attr('disabled','disabled');
      }
    });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
    return this.clearSelect().each(function(){
      if(this.tagName=='SELECT') {
        var currentSelect = this;
        $.each(dataArray,function(index,data){
          var option = new Option(data.text,data.value);
          if($.support.cssFloat) {
            currentSelect.add(option,null);
          } else {
            currentSelect.add(option);
          }
        });
      }
    });
  }
})(jQuery);

Итак, что мы тут написали?

При написании метода clearSelect() мы воспользовались методом each(callback) для того, чтобы произвести необходимые операции над каждым элементом, переданным в наборе jQuery. Сначала производим проверку – если tagName переданного элемента действительно SELECT, то удаляем все элементы option и устанавливаем атрибуту disabled значение disabled.

Метод fillSelect(dataArray) несколько сложнее. Он получает в качестве параметра массив dataArray, содержащий данные, которыми необходимо заполнить выпадающий список. Правда перед тем, как заполнять список, мы вызовем метод clearSelect, чтобы очистить список от возможно оставшихся там данных. С помощью метода each(callback) мы перебираем все элементы, переданные в наборе jQuery, проверяем, действительно ли это элемент select и, если да, то сначала запоминаем его в переменной currentSelect. Затем воспользуемся вспомогательной функцией $.each(object,callback) для обхода массива dataArray. В каждой итерации создаем элемент options, заполняем его соответствующими данными и добавляем в select.

При добавлении option мы вынуждены учитывать различия между браузерами. К счастью и тут поможет jQuery. Здесь используем новую вспомогательную функцию $.support, которая появилась в jQuery с версии 1.3 взамен $.browser. Проверим значение свойства cssFloat – false укажет нам на IE, а true на FF, Opera, Safari. Вы можете применить свой способ проверки.

Обратите внимание: при написании метода fillSelect(dataArray) мы использовали метод each(callback) и вспомогательную функцию $.each(object,callback) – это разные вещи.

Теперь оба наших новых метода могут работать с набором элементов jQuery, который им будет передан. Этот код можно было бы вынести в отдельный файл – к тому же эти методы могут пригодиться и в других приложениях, а использовать их можно проще простого:

// очищаем select
$('select').clearSelect();
// заполняем select
$('select').fillSelect(dataArray);

Двигаемся дальше. Теперь мы напишем пару функций, которые будут обслуживать списки выбора автомобиля и выбора модели.

// выбор автомобиля
function adjustAuto(){
  var countryValue = $('#country').val();
  var tmpSelect = $('#auto');
  if(countryValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
    adjustModel();
  } else {
    $.getJSON(
      'cascadeSelectAuto.php',
      {country:countryValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
        adjustModel();
    });
  }
};

Здесь мы сначала запоминаем в переменной countryValue значение, выбранное в списке стран #country. В переменной tmpSelect будем хранить ссылку на элемент select с идентификатором #auto – список выбора автомобиля. Далее следует проверка:

Если страна не выбрана, то мы устанавливаем атрибуту disabled элемента select с идентификатором #auto значение ‘disabled’ и вызываем метод clearSelect() для очистки этого списка от возможно находящихся там значений. Также мы вызовем функцию adjustModel() (про нее чуть позже).

Иначе, мы отправляем с помощью вспомогательной функции $.getJSON запрос к файлу cascadeSelectAuto.php, передавая в качестве данных значение, сохраненное в переменной countryValue. При получении ответа сервера вызываем функцию, в которой определена нужная нам последовательность действий. А именно – к переменной tmpSelect (не забыли – это список с идентификатором #auto) применяем нами же написанный метод fillSelect(data), который заполнит список данными, которые получены от сервера и наконец переводим элемент в активное состояние с помощью атрибута disabled. Остается не забыть вызвать функцию adjustModel(), чтобы обработать выпадающий список моделей.

Функция adjustModel(), которая обрабатывает список моделей, очень похожа на adjustAuto(), поэтому нет смысла ее детально рассматривать. Обратите внимание разве на то, что теперь мы запоминаем значение из списка не только выбранной страны, но и выбранного автомобиля. И еще в if – else не вызываем что-то похожее на adjustModel(), поскольку список выбора модели у нас последний – дальше обрабатывать просто нечего.

// выбор модели
function adjustModel(){
  var countryValue = $('#country').val();
  var autoValue = $('#auto').val();
  var tmpSelect = $('#model');
  if(countryValue.length == 0||autoValue.length == 0) {
    tmpSelect.attr('disabled','disabled');
    tmpSelect.clearSelect();
  } else {
    $.getJSON(
      'cascadeSelectModel.php',
      {country:countryValue,auto:autoValue},
      function(data) {
        tmpSelect.fillSelect(data).attr('disabled','');
    });
  }
};

Поздравляю! Самая сложная часть пути уже позади! Остались сущие пустяки.

$('#country').change(function(){
  adjustAuto();
}).change();

Связываем с выпадающим списком стран событие change(fn), при наступлении которого вызываем adjustAuto() – функцию, которая заполнит выпадающий список автомобилей. В цепочке команд вызываем change(), чтобы вызвать событие при начальной загрузке страницы.

$('#auto').change(adjustModel);

С выпадающим списком автомобилей связываем событие change(fn), при наступлении которого будет выполнена функция adjustModel(), которая заполнит список моделей.

$('#model').change(function(){
  if($(this).val().length != 0) {
    alert('Выбор сделан!');
  }
});

И наконец, при изменении списка моделей выполним небольшую проверку – если действительно выбрана какая-либо модель, выведем в alert сообщение. Ну а в действительности тут можно придумать все, что угодно. Например вывести подробную информацию о технических характеристиках, красивую фотографию авто, чтобы его захотелось купить и конечно цену…

Ах, да! Совсем забыл – работающий пример:

Вы можете открыть пример в новом окне, чтобы посмотреть исходный код. Вы можете скачать архив, который содержит файлы примера (в том числе cascadeSelectAuto.php и cascadeSelectModel.php).

<button>Отправить ajax-запрос</button>
<span id="process"></span>
<p>Параграф 1</p>
<p>Параграф 2</p>

HTML-код очень прост. Имеем два параграфа, кнопку, с помощью которой будем отправлять ajax-запрос и элемент span, который будет использоваться для вставки в него текстовых сообщений.

Теперь javascript-код:

$(document).ready(function(){
  // обрабатываем клик на параграфах
  $("p").click(function() {
  	alert($(this).text());
  });
  // ajax-запрос
  $("button").click(function() {
    $.ajax({
     url: "eventHandlingAjax.php",
     beforeSend: function(){
       $("#process").css("display","inline")
                    .text("Отправляю ajax-запрос");
     },
     success: function(answ){
       $("#process").text("Ответ получен")
                    .fadeOut(3000);
       $("body").append(answ);
     }
    });
  });
});

Для начала свяжем событие click с элементами p. По событию будем выводить в alert текст, содержащийся в данном параграфе.

Ajax-запрос будем выполнять при клике на элементе button. Сложного тут ничего нет – запрос будет отправлен к файлу eventHandlingAjax.php, а перед отправкой мы вставим соответствующее сообщение в элемент span, сделав его видимым с помощью CSS (изначально этот элемент был скрыт с помощью того же CSS). При получении ответа от сервера мы вставим сообщение об этом в тот же элемент span и самое главное, добавим в body то, что мы получили в качестве ответа.

А что именно мы получили можно будет узнать, посмотрев код серверного сценария.

<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    print '<p>Добавленный параграф</p>;
}
?>

Мы добавим в body всего-навсего HTML-код еще одного параграфа.

Если Вы уже успели испытать этот пример, то наверняка отметили то обстоятельство, что обработчик события click действует только для тех двух параграфов, которые присутствовали на странице с самого начала. А для добавленных параграфов этот обработчик не действует. Почему? Давайте разбираться.

Что происходит в момент загрузки HTML-страницы? На экране монитора появляется кнопка и два параграфа. Самое интересное в javascript-коде. В момент готовности DOM наш javascript-код начинает отрабатывать, и первое, что он делает, отбирает в объект jQuery все элементы p на странице и вешает на них обработчик события click. Затем уже вешает обработчик клика и на элемент button, но это нас сейчас интересует в гораздо меньшей степени.

Что происходит дальше? Дальше мы отправляем ajax-запрос к серверу и получаем от него в качестве ответа еще один элемент p, который вставляется в DOM. Вот это и есть самый важный момент – обработчик события click по сути связан не с какими-то элементами p на странице, а с конкретным объектом jQuery, в котором на данный момент находится только два элемента p, которые присутствовали на странице изначально. Добавленный параграф в этот объект jQuery не мог быть включен, поскольку тогда еще не существовал, поэтому и обработчик события click для него работать не будет.

Ну а теперь узнаем «Как это поправить?»

Поправить это можно, добавив обработчик события клик в callback-функцию, определенную в опции success ajax-запроса. Я приведу javascript-код и Вы сможете посмотреть, как он изменился.

$(document).ready(function(){
  // обрабатываем клик на параграфах
  $("p").click(function() {
  	alert($(this).text());
  });
  // ajax-запрос
  $("button").click(function() {
  	$.ajax({
     url: "eventHandlingAjax.php",
     beforeSend: function(){
       $("#process").css("display","inline")
                    .text("Отправляю ajax-запрос");
     },
     success: function(answ){
       $("#process").text("Ответ получен")
                    .fadeOut(3000);
       $("body").append(answ);
       $("p").click(function() {
         alert($(this).text());
       });
     }
    });
  });
});

Я специально не стал удалять первый обработчик события click, поскольку на этом примере можно наглядно увидеть разницу между двумя объектами jQuery, которые содержат элементы p. Первый из них был создан в момент загрузки html-страницы и содержит в себе два элемента p, а вот второй объект jQuery создан уже после выполнения ajax-запроса, и содержит все элементы p, которые удалось обнаружить в DOM, т.е. после одного запроса будет три параграфа, после двух – четыре и так далее. Визуально существование двух объектов jQuery подтверждается тем, что при клике на любом из «добавленных параграфов» Вы увидете только одно сообщение в alert’е, а вот при клике на первом или втором параграфе Вы увидете уже два alert’а – соответственно для первого и для второго объекта jQuery. Количество объектов jQuery будет расти вместе с количеством выполненных ajax-запросов.

Можно пойти иным путем и прописать обработчик события непосредственно в файле сценария на сервере – в этом случае он также будет подгружен и отработает правильно. Принципиальной разницы между этими подходами нет.

Но на самом деле – это не совсем правильный путь, хотя в некоторых случаях может выручить и такое решение.

Я хочу рассказать о еще одном возможном способе решения этой задачи, который состоит в использовании плагина jQuery Listen. В коде кое-что конечно изменится. Естественно, что для использования этого плагина, его необходимо подключить к странице:

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.listen.js"></script>

HTML-код остался без изменений, а вот javascript-код изменился:

$(document).ready(function(){

  jQuery.listen("click", "p", function(){
    alert($(this).text());
  });

  // ajax-запрос
  $("button").click(function() {
  	$.ajax({
     url: "eventHandlingAjax.php",
     beforeSend: function(){
       $("#process").css("display","inline")
                    .text("Отправляю ajax-запрос");
     },
     success: function(answ){
       $("#process").text("Ответ получен")
                    .fadeOut(3000);
       $("body").append(answ);
     }
    });
  });
});

Обратите внимание, что вместо нашего обработчика события click на элементах p, мы используем плагин jQuery Listen, передавая ему событие, которое необходимо отслеживать, элементы, с которыми это событие необходимо связать и функцию, которая будет выполнена при наступлении этого события. Можете посмотреть работу плагина – вот пример.

Важно! Никогда не стоит полагаться на проверки данных на стороне клиента! Обязательно проводите проверку на сервере!

Поэтому сегодня я предлагаю познакомиться с плагином jQuery Validation, который позволит производить проверку вводимых данных «на лету» и, что немаловажно, очень хорошо взаимодействует с плагином jQuery Form. Ну а для начала просто посмотрите пример проверки данных в ajax форме…

Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.

Ну а теперь начнем разбираться. Сразу скажу, что для того, чтобы подробно рассказать о плагине jQuery Validation, не хватит и нескольких статей. Поэтому поставим себе целью по окончании прочтения статьи (и тестирования примера конечно) иметь некий базовый набор знаний, который поможет решить проблемы в самых распространенных случаях. Если же понадобится что-то большее, то подробную информацию Вы сможете найти на странице плагина jQuery Validation.

Как обычно, сначала потребуется подключить библиотеку jQuery (jQuery Validation работает с версией 1.2.2 и выше). Понятно, что понадобится и jquery.form.js, и собственно query.validate.js – все это подключаем в разделе HEAD нужной страницы. Можно подключить и файл additional-methods.js, содержащий, как ясно из названия, дополнительные методы.

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>

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

Каждый элемент input или select имеет «свой» элемент label с атрибутом for, значение которого одинаково со
значением атрибута id соответствующего элемента input или select. В общем, лучше на примере:

<label for="firstname">Имя</label>
<input id="firstname" name="fname" type="text" />

Теперь приведу javascript-код. Несмотря на то, что выглядит он довольно страшно, ничего особенно сложного в нем нет.

<script type="text/javascript">
$(document).ready(function(){
  // готовим опции для метода
  // ajaxSubmit плагина jquery.form.js
  var options = {
  	target: "#output",
    timeout: 3000 // тайм-аут
  };

  $("#myForm").validate({
  	submitHandler: function(form) {
   	  // вызываем метод ajaxSubmit
   	  // плагина jquery.form.js
  	  $(form).ajaxSubmit(options);
    },
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      Name: {
      	required: true,
      	minlength: 2,
      	maxlength: 12
      },
      Email: {
      	required: true,
      	email: true
      },
      // .............
      // еще настройки
      // см. в исх.кодах
      // .............
      Examine: {
      	required: true,
      	equal: 13
      }
    },
    messages: {
      Name: {
        required: "Укажите свое имя!",
        minlength: "Не менее 2 символов",
        maxlength: "Не более 12 символов"
      },
      Email: {
        required: "Нужно указать email адрес",
        email: "Нужен корректный email адрес!"
      },
      // .............
      // еще настройки
      // см. в исх.кодах
      // .............
      Examine: {
      	required: "Надо решить этот пример!",
      	equal: "Вы в школе учились?"
      }
    },
    errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent()
      .find("label[@for="" + er + ""]")
      .find("em") );
    }
});
});
</script>

Начало кода уже должно быть Вам знакомо по предыдущей статье, а сейчас самое интересное для нас это пожалуй основной метод – validate,

$("#myForm").validate({
  // список опций
});

который может принимать просто огромное количество опций (набор пар ключ/значение) и в соответствии с ними выполнять проверку выбранной формы. Метод validate устанавливает обработчики событий для submit, focus, keyup, blur и click, чтобы переключиться в проверку всей формы или ее отдельных полей.

Приведу наиболее востребованные опции с пояснениями:

submitHandler – когда форма корректно заполнена, вызывает обработчик для передачи формы. Заменяет собой передачу формы по умолчанию. В примере (см.выше) используется передача данных через метод ajaxSubmit() плагина jQuery Form.

ignore – отменяет проверку полей формы с указанным селектором. В примере ниже – отменяет проверку для всех элементов с классом «ignore«.

$("#myform").validate({
   ignore: ".ignore"
});

rules – пары ключ/значение, описывающие правила проверки. Ключ – это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение – объект (или строка), содержащий пары правило/параметр. Правила могут быть считаны еще и из разметки (классы, атрибуты, метаданные). Эти способы можно комбинировать между собой.

$(".selector").validate({
   rules: {
     // поле name - обязательное
     name: "required",
     // для поля email
     email: {
       // заполнение обязательно
       required: true,
       // значение д.б. корректным
       email: true
     }
   }
});

messages – пары ключ/значение, описывающие сообщения в процессе проверки. Ключ – это значение атрибута name элемента (или группы элементов для элементов checkbox и radio). Значение же его будет отображено для соответствующего элемента.

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     // если не заполнено поле name
     // user увидит сообщение
     name: "Пожалуйста, представьтесь!",
     email: {
       // если не заполнено поле email
       // user увидит сообщение
       required: "Нужно указать e-mail!",
       // если поле email некорректно
       // user увидит сообщение
       email: "E-mail д.б. корректным!"
     }
   }
});

onsubmit, onfocusout, onkeyup, onclick – отвечают за инициализацию проверки полей формы по соответствующему событию. По умолчанию все установлены в true. Любые из этих опций можно отключить, установив значение false.

errorPlacement – в качестве значения функция, принимающая два аргумента. Первый – ошибка как объект jQuery, второй – некорректный элемент как объект jQuery. С помощью этой опции сообщение об ошибке может быть выведено в целевой элемент в разметке страницы. Давайте разберем на примере:

errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent()
      .find("label[@for="" + er + ""]")
      .find("em") );
    }

В переменную er получаем значение атрибута name элемента, в котором обнаружена ошибка. Сообщение об ошибке добавляем куда? Правильно – в целевой элемент, который еще надо найти. Находим «родителя» этого элемента, в нем обнаруживаем элемент label с атрибутом for, который имеет значение точно такое же, которое у нас уже хранится в переменной er (помните рекомендации по разметке?), находим в нем целевой элемент em. Вот туда и будет вставлен текст сообщения об ошибке.

А теперь давайте подробнее остановимся на rules и messages. Ну наверное больше все-таки на rules, поскольку правила проверки задаются именно здесь, а в messages определяются сообщения, которые будут выводиться в том случае, когда не выполняется требование, определенное в rules.

Методы проверки
Плагин jQuery Validation предоставляет целый набор стандартных методов проверки.
required( ) – делает элемент обязательным для заполнения. Возвращает false, если элемент пустой (текстовое поле), не отмечен (radio/checkbox) или ничего не выбрано (для select).

$("#myform").validate({
  // здесь field - идентификатор
  // соответствующего поля ввода
  rules: { field: "required" }
});

remote(url) - запрашивает ресурс, расположенный на сервере через $.ajax (XMLHttpRequest) и передает пару ключ/значение, соответствующую атрибуту name проверяемого элемента в GET-запросе. Ответ сервера оценивается как данные в формате JSON и должен вернуть true для корректных данных, и false – для некорректных.

$("#myform").validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

minlength(length) – элемент ввода будет требовать ввести количество символов не менее, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c selects и checkbox.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});

maxlength(length) – элемент ввода будет требовать ввести количество символов не более, чем указано в length. Работает с текстовыми полями ввода (в т.ч. с password), c selects и checkbox.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      maxlength: 4
    }
  }
});

rangelength(range) – элемент ввода будет требовать ввести количество символов, соответствующее диапазону, указанному в range.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});

min(value), max(value), range(range) – смысл тот же, только фигурирует уже не количество символов, а числа.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});

equalTo(other) – требует, чтобы элемент соответствовал (был эквивалентен) другому элементу, указанному в other. Возвращает true, если это условие выполняется, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});

email( ) – делает элемент ввода требующим корректно введенного e-mail адреса. Возвращает true, если адрес корректный, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

url( ) – делает элемент ввода требующим корректно введенного URL (типа, начните с http://). Возвращает true, если URL корректный, и false в противном случае. Работает с текстовыми полями.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

Честно говоря, два последних метода из стандартного набора мне не понравились, впрочем как и из дополнительного набора методов в файле additional-methods.js. Метод url() например признал валидным http://www.собаказлая.ru, а метод email( ) также пропускает кириллицу в адресе. Ну да ладно. Можно же дополнить плагин своим методом или доверить проверку валидности сценарию на сервере.

Я рассказал далеко не все, и поэтому в заключение хочу привести еще несколько ссылок на примеры:
http://jquery.bassistance.de/validate/demo/marketo/
http://jquery.bassistance.de/validate/demo/marketo/step2.htm
http://jquery.bassistance.de/validate/demo/milk/
http://jquery.bassistance.de/validate/demo/multipart/

Итак, начнем. Нам потребуется подключить к странице два файла: библиотеку jQuery и файл jquery.form.js. Сделаем это в разделе HEAD.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Затем создадим самую простейшую форму, не содержащую какой-либо специальной разметки:

<form id="myForm" action="comment.php" method="post">
  Имя: <input type="text" name="name" />
  Комментарий: <textarea name="comment"></textarea>
  <input type="submit" value="Комментировать" />
</form>

и добавим еще немного javascript:

<script type="text/javascript">
$(document).ready(function(){
   $("#myForm").ajaxForm(function() {
     alert("Спасибо за комментарий!");
   });
});
</script>

Вот так просто, но поспешу Вас разочаровать – то, что мы сделали, из серии «пыль в глаза». Объясню почему. Когда мы нажмем кнопку «Комментировать» значения полей name и comment будут переданы методом POST файлу comment.php. Если сервер вернет успешный ответ (т.е. всего лишь код 200) – пользователь увидит сообщение «Спасибо за комментарий!».

Эффектнее было бы не выводить сообщение в alert(), а вставить сообщение непосредственно в DOM.

Так что все, что мы здесь выиграли – избавились от перезагрузки страницы, в принципе уже неплохо, но хотелось бы большего…

Но давайте сначала попробуем выяснить, в чем его отличие метода ajaxForm от метода ajaxSubmit. Оба метода либо не принимают аргументов, либо принимают один аргумент, который может быть или функцией или объектом (в парах ключ/значение могут быть переданы различные опции).

Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm – нет. Когда вызывается метод ajaxSubmit он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm – он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные.
Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка).
Вывод: это не значит, что метод ajaxForm – плохой, а метод ajaxSubmit – хороший. Просто они разные. И какой именно метод использовать – надо решать в каждом конкретном случае.

Давайте теперь познакомимся с доступными опциями, которые принимают оба этих метода. Посмотрим фрагмент кода, чтобы увидеть как задаются опции:

// готовим объект
var options = {
  target: "#divToUpdate",
  url: "form.php",
  success: function() {
        alert("Спасибо за комментарий!");
  }
};
// передаем опции в  ajaxSubmit
$("#myForm").ajaxSubmit(options);

target – идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент DOM. Значение по умолчанию – null.
url – URL, куда должны быть переданы данные из формы. Значение по умолчанию – значение атрибута action формы.
type – метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию – значение атрибута method формы. Если атрибут не определен, используется метод GET.
beforeSubmit – функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false – данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery-объект формы, объект из опций определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид:

[ { name: "username", value: "Vasya" },
 { name: "password", value: "secret" } ]

Значение по умолчанию – null.
success – функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные – или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию – null.
dataType – определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, «xml«, «script«, или «json«. Опция позволяет точно определить, как именно должен быть обработан ответ сервера.
- «xml»: if dataType == «xml» ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML;
- «json»: if dataType == «json» ответ сервера будет выполнен и передан в success (если опция определена);
- «script»: if dataType == «script» ответ сервера будет выполнен в глобальном контексте;
Значение по умолчанию – null.
semantic – флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее).

Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image.

Вы должны всего лишь установить эту опцию в true, если Ваш сервер требует строгого порядка следования И форма содержит элементы input типа image. Значение по умолчанию – false.
resetForm – флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию – null.
clearForm – флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию – null.

Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными.

Метод formSerialize – упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2.

var qString = $("#myFormId").formSerialize();
  // теперь данные могут быть отправлены
  //  через $.get, $.post, $.ajax, и т.д.
$.post("myscript.php", qString);

Метод fieldSerialize – упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2

var qString = $("#myFormId .myFields").fieldSerialize();

Метод fieldValue – возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных возвращается пустой массив, в противном случае массив содержит один или более элементов.

// получаем значения для полей с типом password
var value = $("#myFormId :password").fieldValue();
alert("Пароль: " + value[0]);

Метод resetForm – сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа.

$("#myFormId").resetForm();

Метод clearForm – очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox.

$("#myFormId").clearForm();

Метод clearFields – очищает элементы формы. Удобно применять когда требуется очистить только часть формы.

$("#myFormId .myFields").clearFields();

Согласен, согласен… Получилось очень много и довольно нудно. Поэтому вот Вам пример формы, попробуйте его, а при желании посмотрите исходные коды этого примера. Я старался все очень подробно комментировать.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Важно! Помните, что любая форма – потенциальная дыра в безопасности. Никогда не стоит полагаться на проверку данных на стороне клиента. Обязательно производите проверку данных на сервере!

Дуглас Крокфорд (Douglas Crockford), который собственно и предложил формат JSON в качестве альтернативы XML при передаче данных от сервера клиенту, в рамках этого проекта разработал специальную утилиту, предназначенную для упомянутых выше преобразований. Исходник можно найти по адресу http://www.json.org/js.html.

В предыдущей статье о JSON мы уже немного коснулись преобразования строки данных в объект JavaScript с помощью функции eval(), но все-таки нельзя забывать о том, что функция эта не только поможет интерпретировать данные в формат JSON, но и выполнит любой JavaScript-код, который будет ей передан. Так как это обстоятельство может представлять собой потенциальную угрозу, логичнее воспользоваться утилитой Дугласа Крокфорда.

Но давайте обо всем по порядку. Для начала подключим утилиту к нужному файлу:

<script src="json.js" type="text/javascript"></script>

Создадим объект oAuto обычным способом, забыв о литеральной нотации.

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;
oAuto.sellers = new Array(
  "Фирма А",
  "Фирма Б",
  "Фирма В"
);

Передадим объект методу JSON.stringify()

document.write(JSON.stringify(oAuto));

и в результате работы этого небольшого кусочка кода будет выведена строка в формате JSON, которую можно передавать по любому адресу.

{"firm":"Audi","model":"A6","year":2008,
"price":78000,"sellers":["Фирма А","Фирма Б","Фирма В"]}

Предположим теперь, что эту самую строку мы получили в качестве ответа от сервера и ее надо преобразовать в объект JavaScript. Так нет ничего проще. Передаем строку методу JSON.parse()

var oAuto = JSON.parse(sAuto);

и получаем объект JavaScript.

Вы можете скачать исходный код примера, и испытать его на своем сайте.

Необходимо упомянуть также, что метод JSON.parse() может принимать опционально еще один параметр.

var myObject = JSON.parse(myJSONtext, filter);

Более полную информацию Вы всегда можете найти на сайте http://www.json.org/.

Мы вкратце познакомились с тем, как можно работать с данными в формате JSON на стороне клиента, а как обстоит дело при работе на стороне сервера? Оказывается существует довольно много программного обеспечения для работы с JSON в языках на которых пишутся серверные сценарии. JSON может применяться в Pyton, C#/.NET, PHP, ColdFusion, Perl, Java и т.д. Полный список можно найти на http://www.json.org/, а я для примера выбрал PHP, как наиболее близкий мне.

Утилита JSON-PHP написана Михалем Мигурски (Michal Migurski). Сама утилита – это один файл JSON.PHP, но для работы с утилитой требуется библиотека PEAR (PHP Extension and Application Repository). Скачать утилиту можно отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198.

Если Ваш хостер не удосужился включить библиотеку PEAR – не расстраивайтесь. Вы вполне можете сделать все самостоятельно. Не обязательно даже иметь права администратора сервера. Я приведу ссылки. Кому очень понадобится – тот обязательно разберется.
http://pear.php.net/manual/en/installation.getting.php – см. раздел «PEAR in hosting environments».
В принципе нужно только получить инсталляционный файл, загрузить его на свой сервер, вызвать в адресной строке браузера и далее только следовать инструкциям.
А здесь посмотрите раздел «Динамическая коррекция пути к включаемым файлам».

Разберем все на примере. Пусть имеем такое определение класса (для PHP5)

class Auto {
  public $firm;
  public $model;
  public $year;
  public $price;
  public $sellers;

  function Auto($firm,$model,$year,$price) {
    $this->firm = $firm;
    $this->model = $model;
    $this->year = $year;
    $this->price = $price;
    $this->sellers = array();
  }
}

Используем этот класс так:

$oAuto = new Auto("Audi", "A6", 2008, 78000);
$oAuto->sellers[0] = "Фирма А";
$oAuto->sellers[1] = "Фирма Б";
$oAuto->sellers[2] = "Фирма В";

Теперь то, что нас интересует больше всего. Подключаем утилиту JSON-PHP, создаем новый экземпляр объекта Services_JSON и передаем объект $oAuto методу encode():

require_once("JSON.php");
$json = new Services_JSON();
$sJSONText = $json->encode($oAuto);

В результате переменная $sJSONText будет содержать строку в формате JSON:

{"firm":"Audi","model":"A6","year":2008,"price":78000,
"sellers":["\u0424\u0438\u0440\u043c\u0430 \u0410","\u0424\u0438\u0440\u043c\u0430 \u0411","\u0424\u0438\u0440\u043c\u0430 \u0412"]}

Здесь хочу обратить Ваше внимание на то, что утилита JSON-PHP понимает строки или в ASCII, или в UTF-8. Поэтому существенный выигрыш можно получить при использовании латинских символов, тогда как использование кириллицы в кодировке windows-1251 может привести к увеличению объема данных. Обратите внимание на то место в строке, где должны передаваться Фирма А, Фирма Б, Фирма В.

Но цели мы достигли – объект $oAuto готов к передаче в сценарий на языке JavaScript.

Разберем обратную операцию – преобразование строки текста в формате JSON в объект PHP. Все, что для этого нужно сделать, это передать строку методу decode():

$value = $json->decode($sJSONText);

Если теперь использовать например print_r(), то мы сможем убедиться, что объект был создан:

( [firm] => Audi [model] => A6
[year] => 2008 [price] => 78000
[sellers] => Array ( [0] => Фирма А [1] => Фирма Б [2] => Фирма В ) )

Все это есть в примере, который Вы сможете скачать. Пример включает и утилиту JSON-PHP. Естественно, Вам придется немного поправить пример в той части, где корректируются пути к библиотеке PEAR, либо удалить этот фрагмент кода, если библиотека у Вас уже подключена.

Архив с примером можно скачать здесь.

Что можно еще сказать? Разве что упомянуть о том, что утилита JSON-PHP не единственная для работы с JSON на стороне сервера. Существует расширение PHP – php-json (написано на C Омаром Килани (Omar Kilani)), однако для его установки потребуется умение устанавливать модули расширения PHP. Вот и все, пожалуй.

Буду рад, если найдете время для того, чтобы оставить свои отзывы…

Может я зайду издалека, но для того чтобы действительно понять JSON, сначала поймем (вспомним) синтаксис массивов и объектов в литеральной нотации JavaScript.

Массивы как литералы
Массив в JavaScript можно определить с помощью конструктора Array, например так:

var aData = new Array("строка", true, 43, null);

В JavaScript массивы нетипизированные, поэтому в них можно хранить различные типы данных. В примере массив содержит строку, логическое значение, число и значение null.

Массив же, описываемый как литерал, можно определить с помощью квадратных скобок, внутри – значения элементов массива, через запятую. Вот как будет выглядеть тот же самый массив, но в литеральной нотации:

var aData = ["строка", true, 43, null];

Обращаться к отдельным элемента массива можно указывая имя массива и номер элемента:

alert(aData[0]);
alert(aData[1]);

Объекты как литералы
Объекты в JavaScript определяются с помощью конструктора Object, например так:

var oAuto = new Object();
oAuto.firm = "Audi";
oAuto.model = "A6";
oAuto.year = 2008;
oAuto.price = 78000;

Тот же самый код, но в литеральной нотации будет выглядеть так:

var oAuto = {
  "firm":"Audi",
  "model":"A6",
  "year":2008,
  "price":78000
};

Этот код создает объект со свойствами firm, model, year и price и обращаться к ним можно таким образом:

alert(oAuto.model);
alert(oAuto.year);

но можно использовать и синтаксис массивов обращаясь к свойствам объекта таким образом:

alert(oAuto["model"]);
alert(oAuto["year"]);

В литеральной нотации описания массивов и объектов можно вкладывать друг в друга, создавая таким образом объект массивов или массив объектов. Посмотрите этот код:

var aAuto = [
  {
    "firm":"BMW",
    "model":"X5",
    "year":2007,
    "price":99000
  },
  {
    "firm":"Audi",
    "model":"A6",
    "year":2008,
    "price":78000
  },
  {
    "firm":"Volkswagen",
    "model":"Touareg 7L",
    "year":2006,
    "price":45000
  }
];

Мы создали массив aAuto, который содержит три объекта. Комбинируя синтаксис обращения к массивам с синтаксисом обращения к объектам попробуем получить год выпуска второго автомобиля:

alert(aAuto[1].year); // получаем 2008

Можно сделать наоборот, и описать объект массивов:

var oAuto = {
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
};

в этом случае обращаемся сначала к объекту, а затем к массиву внутри него:

alert(oAuto.year[1]); // получаем 2008

Вот такое длинное получилось предисловие, но зато теперь будет гораздо понятнее при чем здесь вообще JSON…

JSON – комбинация массивов и объектов и предназначен только для хранения данных. Как следствие, JSON не может иметь переменных и не допускает никаких операций над ними. Давайте попробуем записать предыдущий пример, используя синтаксис JSON:

{
  "firm":["BMW", "Audi", "Volkswagen"],
  "model":["X5", "A6", "Touareg 7L"],
  "year":[2007, 2008, 2006],
  "price":[99000, 78000, 45000]
}

Обратите внимание, что пропали имя переменной и точка-запятая. Передача такого объекта с использованием HTTP-протокола будет происходить очень быстро, поскольку содержит минимум символов. Получив такие данные на стороне клиента и записав ее в какую-либо переменную (например sData) мы получаем строку информации.
Обратите внимание: именно строку, а совсем не объект или объект с вложенными в него массивами. Преобразуем строку в объект, используя функцию eval().

var oAuto = eval("(" + sData + ")");

В результате этого получится объект, который мы описали чуть выше.

Преимущество JSON перед XML
Так в чем же все-таки состоит преимущество JSON перед XML?

Здесь речь идет исключительно о преимуществах и недостатках только лишь с точки зрения организации обмена данными в Сети.

В том, что язык XML оказывается очень избыточным при сравнении с JSON. Давайте убедимся в этом на простом примере. Одни и те же данные представим в формате XML и в формате JSON.

<general>
  <cars>
    <car>
      <firm>BMW</firm>
      <model>X5</model>
      <year>2007</year>
      <price>99000</price>
    </car>
    <car>
      <firm>Audi</firm>
      <model>A6</model>
      <year>2008</year>
      <price>78000</price>
    </car>
    <car>
      <firm>Volkswagen</firm>
      <model>Touareg 7L</model>
      <year>2006</year>
      <price>45000</price>
    </car>
  </cars>
</general>

так это выглядит в формате XML, а ниже – в формате JSON:

{ "general":
  {
    "cars":[
      {
        "firm":"BMW",
        "model":"X5",
        "year":2007,
        "price":99000
      },
      {
        "firm":"Audi",
        "model":"A6",
        "year":2008,
        "price":78000
      },
      {
        "firm":"Volkswagen",
        "model":"Touareg 7L",
        "year":2006,
        "price":45000
      }
    ]
  }
}

При использовании формата JSON выигрыш составит 42 байта, а без учета пробелов и вовсе 86 байт. А если вспомнить еще и о том, что данные в формате JSON не требуют дополнительного синтаксического анализа на стороне клиента – преимущество JSON перед XML в аспекте передачи данных от сервера клиенту становится очевидным…

По этой теме могу порекомендовать прочитать переводную статью JSON и XML. Что лучше? на Хабрахабре, а я надеюсь, что мне удастся в ближайшем будущем подробнее рассказать о утилитах для работы с JSON как на стороне клиента, так и на стороне сервера.

Как обычно, для начала я приведу пример, а потом мы будем разбирать, как он работает.

Поскольку это всего лишь пример, поясню, что в левом текстовом поле доступен выбор российских городов, которые начинаются на букву «М», а в правом – список поселков городского типа (пгт) с численностью населения более 10 тыс. жителей (по данным Всероссийской переписи населения на 9 октября 2002 года).

Кроме того, используются разные настройки. В общем, попробуйте пример, а потом продолжим….

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Сначала потребуется только подключить библиотеку jQuery и файл query.autocomplete.js в разделе HEAD нужной страницы.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

Если скачаете пример, то легко сможете разобраться и в стилевом оформлении. Учтите, что файл jquery.autocomplete.js использует имена классов (начинаются с ac_), но если Вы захотите по каким-то причинам изменить эти имена – это тоже можно будет довольно легко сделать.

Что касается HTML-кода, то естественно нужно описать поле для ввода текста:

<input id="example" type="text" />

А вот использовать jquery.autocomplete.js можно двумя разными способами.

Способ первый:
Если объем данных не очень большой, и данные не будут изменяться, то их можно поместить непосредственно на странице, как и сделано в примере в текстовом поле слева.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").autocompleteArray([
    "Магадан",
    "Магас",
    "Магнитогорск",
    "Майкоп",
    ........
    "Муром",
    "Мценск",
    "Мыски",
    "Мытищи",
    "Мышкин"
    ],
    {
    delay:10,
    minChars:1,
    matchSubset:1,
    autoFill:true,
    maxItemsToShow:10
    }
  );
});
</script>

Способ второй:
Если данные большого объема, и/или часто изменяются, то необходимо предусмотреть обработку этих данных на сервере (для примера выбран PHP). jquery.autocomplete.js предусматривает отправку GET-запроса с параметром q, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.

<script type="text/javascript">
$(document).ready(function(){
  $("#example2").autocomplete("autocomplete.php", {
    delay:10,
    minChars:2,
    matchSubset:1,
    autoFill:true,
    matchContains:1,
    cacheLength:10,
    selectFirst:true,
    formatItem:liFormat,
    maxItemsToShow:10,
    onItemSelect:selectItem
  });
});
</script>

В этих примерах, помимо данных (в первом случае) и URL обработчика (во втором случае) мы передаем некоторые опции. Список опций приведен ниже:

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

inputClass – этот класс будет добавлен к элементу ввода. (По умолчанию: «ac_input»).

resultsClass – класс для UL, который будет содержать элементы результата (элементы LI). (По умолчанию: «ac_results»).

loadingClass – класс для элемента ввода, в то время, когда происходит обработка данных на сервере. (По умолчанию: «ac_loading»).

lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером. (По умолчанию: «\n»).

cellSeparator – символ, который разделяет «ячейки» в строках данных, возвращаемых сервером. (По умолчанию: «|»).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирван запрос. (По умолчанию: 1).

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

cacheLength – число ответов от сервера, сохраняемых в кэше. Если установлено в 1 – кэширование данных отключено. Никогда не устанавливайте меньше единицы. (По умолчанию: 1).

matchSubset – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше. Например 10. (По умолчанию: 1).

matchCase – использовать ли сравнение чувствительное к регистру символов (только если Вы используете кэширование). (По умолчанию: 0).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).

extraParams – дополнительные параметры, которые могут быть переданы на сервер. Если Вы напишете {page:4}, то строка запроса к обработчику на сервере будет сформирована следующим образом: my_handler.php?q=foo&page=4 (По умолчанию: {}).

width – устанавливает ширину выпадающего списка. По умолчанию ширина выпадающего списка определена шириной элемента ввода. Однако, если ширина элемента ввода небольшая, а строки выпадающего списка содержат большое количество символов – эта опция вполне может пригодиться. (По умолчанию: 0).

selectFirst – если установить в true, то по нажатию клавиши Tab или Enter будет выбрано то значение, которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную («подсвеченный») результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false).

selectOnly – если установить в true и в выпадающем списке только одно значение, оно будет выбрано по нажатию клавиши Tab или Enter, даже если этот пункт не был выбран пользователем с помощью клавиатуры или указателя мыши. Заметьте, что эта опция отменяет действие опции selectFirst. (По умолчанию: false).

formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов выпадающего списка. Функция будет вызываться для каждого элемента LI. Возвращаемые от сервера данные могут быть отображены в элементах LI выпадающего списка (см. второй пример). Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).

onItemSelect – JavaScript функция, которая будет вызвана, когда элемент списка выбран. Принимает единственный параметр – выбранный элемент LI. Выбранный элемент будет иметь дополнительный атрибут «extra», значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).

Последние две опции весьма важны, если Вы хотите сделать действительно удобный и полезный элемент интерфейса, поэтому приведу примеры.

function liFormat (row, i, num) {
  var result = row[0] + "<em class="qnt">" +
  row[1] + " тыс.чел.</em>";
  return result;
}

В опции formatItem мы определили имя вызываемой функции – liFormat, а сама функция просто формирует строку, которая будет вставлена в соответствующий элемент LI. Строка содержит название поселка и элемент em, в который выводится количество проживающих там, в тысячах человек. Элемент em имеет класс qnt, с помощью которого, используя CSS, мы сдвигаем этот элемент вправо, немного уменьшаем размер шрифта и делаем сам шрифт зеленого цвета.

Следующий пример для опции onItemSelect:

function selectItem(li) {
  if( li == null ) var sValue = "Ничего не выбрано!";
  if( !!li.extra ) var sValue = li.extra[2];
  else var sValue = li.selectValue;
  alert("Выбрана запись с ID: " + sValue);
}

Здесь видно как можно работать со значениями атрибута «extra» выбранного элемента LI. В примере мы выводим в alert значение идентификатора для записи из нашей тестовой базы.

Нам осталось только разобрать те действия, которые будут выполняться на стороне сервера. Как Вы наверное помните, мы выбрали для этого PHP. Вспомним также, что на сервер передается GET-запрос с параметром q, содержащим уже введенные пользователем символы. Сам код Вы сможете посмотреть, скачав файл примера.

Весь код мы будем выполнять только в случае существования XMLHttpRequest, только если передан GET-запрос с параметром q. Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:

1:Пашковский:Краснодарский край:43,0
2:Горячеводский:Ставропольский край:34,4
3:Калинино:Краснодарский край:34,1
4:Приволжский:Саратовская область:32,0
. . . . . . . . . . . . . . . . . . .
268:Залари:Иркутская область:10,0
269:Октябрьский:Пермский край:10,0
270:Ишеевка:Ульяновская область:10,0
271:Жешарт:Республика Коми:10,0
272:Прохоровка:Белгородская область:10,0

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

Такой подход выбран во-первых, потому что это пример, который должен быть очень просто воспроизведен на любом другом сайте, и во-вторых, чтобы при очень небольшом объеме данных дать почувствовать тот момент, когда запрос выполняется.

Вот собственно и все, обращу разве Ваше внимание на то, что для работы со строками использую мультибайтовые строковые функции.

jQuery.ajaxSetup( options ) – позволяет выполнить установку глобальных настроек для выполнения ajax-запросов. Принимает один аргумент в виде набора пар ключ/значение чтобы сконфигурировать настройки ajax-запросов по умолчанию. Все настройки опциональны.

Не буду повторять еще раз описания всех доступных опций, поскольку их можно посмотреть в статье jQuery и Ajax: запросы, а приведу только небольшой поясняющий пример:

$.ajaxSetup({
  url: "/handler.php",
  timeout: 3000,
  type: "POST"
});
$.ajax({ data: myData });

Настройки по умолчанию определяют отправку ajax-запроса к url «/handler.php», устанавливают тайм-аут 3 секунды и определяют использование POST-запроса вместо GET для всех ajax-запросов (если настройки не будут переопределены для конкретного запроса).
Следующий же ajax-запрос содержит только некоторые данные, которые передает, руководствуясь глобальными настройками.

serialize( ) – упорядочивает набор элементов input в строку данных. Начиная с версии jQuery 1.2 корректно работает с формами.
Пример:
Упорядочиваем данные из формы в строку запроса, которая может быть передана на сервер с помощью ajax-запроса.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Не буду приводить HTML и CSS для этого примера, тем более, что его можно скачать. Посмотрим только javascript-код:

<script type="text/javascript">
$(document).ready(function(){
  function showValues() {
    var str = $("form").serialize();
    $("#results").text(str);
  }
  $(":checkbox, :radio").click(showValues);
  $("select").change(showValues);
  showValues();
});
</script>

Функция showValues() – в переменную str пишем строку запроса, которую получаем с помощью serialize() для jQuery-селектора form. Вторая строка там добавлена только для того, чтобы показать эту самую упорядоченную строку запроса в элементе #results, т.е. только для примера.

Более интересны следующие строки:

$(":checkbox, :radio").click(showValues);

Выбираем все элементы input типа checkbox и radio и по клику на любом из них вызываем функцию showValues().

$("select").change(showValues);

То же самое проделываем для элементов select, только с той разницей, что вызовать функцию showValues() будем в случае изменений в элементах select.

showValues();

Просто вызываем функцию showValues() в момент готовности объектной модели документа.

serializeArray( ) – упорядочивает все формы и элементы форм (очень похоже на .serialize() метод), но возвращает данные в виде, который можно использовать для их представления в структуре JSON.

Пример очень похожий. Мы получаем данные из форм, прогоняем через цикл, добавляя их в элемент #result (для наглядности).

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Так же не буду приводить HTML и CSS, а рассмотрим только javascript-код:

<script type="text/javascript">
$(document).ready(function(){
  function showValues() {
    var fields = $(":input").serializeArray();
    $("#results").empty();
    jQuery.each(fields, function(i, field){
      $("#results").append(field.value + " ");
    });
  }
  $(":checkbox, :radio").click(showValues);
  $("select").change(showValues);
  showValues();
});
</script>

Последние три строки абсолютно такие же как и в предыдущем примере, изменилась только функция showValues().

var fields = $(":input").serializeArray();

В переменную fields пишем массив, состоящий из значений полей форм. Обратите внимание, jQuery-селектор :input отбирает все элементы input, textarea, select и button, а не только input.

$("#results").empty();

Удаляем все содержимое элемента #results.

jQuery.each(fields, function(i, field){
  $("#results").append(field.value + " ");
});

Для каждого элемента массива fields выполняем одну и ту же операцию – добавляем значение этого поля (с пробелом после него) в элемент #results (это опять же для примера, а могли бы делать и что-то другое).

Буду рад, если эта информация кому-нибудь пригодится…

ajaxComplete( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда выполненajax-запрос. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщение, когда AJAX запрос выполнен.

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

ajaxError( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда какой-либо ajax-запрос неудачен. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе. Третий параметр передается, если при обработке запроса произошла ошибка и эта ошибка определена.
Пример: показываем сообщение, когда AJAX запрос неудачен.

$("#msg").ajaxError(function(event, request, settings){
   $(this).append("<span>Error requesting page "
   + settings.url
   + "</span>");
});

ajaxSend( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда какой-либо ajax-запрос отправлен. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщение, когда AJAX запрос отправлен.

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

ajaxStart( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запрос начат (и нет выполняющихся запросов).
Пример: показываем сообщение о загрузке.

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

ajaxStop( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запросы закончены.
Пример: скрываем сообщение о загрузке после того, как все AJAX-запросы окончены.

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

ajaxSuccess( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запрос выполнен успешно. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщени, когда AJAX-запрос выполнен успешно.

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

Чтобы все это было немного понятнее, придумаем, напишем и испытаем какой-нибудь вполне реальный пример, в котором используем некоторые из перечисленных выше событий. Вот сам пример:

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

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

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>

Затем простенький HTML-код:

<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-запрос выполнен.</span>
  </li>
</ul>

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

#loading {
  display:none;
  padding-left:10px;
}
#message {
  display:none;
  padding-left:10px;
}

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

<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>

Теперь давайте все это попробуем разобрать по шагам и отталкиваться будем от javascript-кода.
По клику на элементе а с идентификатором а1 будет выполнен ajax-запрос к файлу events.php (его код чуть позже). Тип запроса мы определим как POST и в качестве данных передадим некий параметр n=3.
Затем займемся «развешиванием» событий на HTML-элементы. По событию ajaxStart будет показан элемент с идентификатором #loading, изначально скрытый с помощью CSS. Элемент #message по этому же событию будет скрыт (он скрыт и изначально, но мы делаем это для того, чтобы скрыть его, если раньше выполнялись запросы и этот элемент был показан). Далее, по событию ajaxStop надо будет скрыть элемент #loading, а по событию ajaxComplete показать элемент #message.

А теперь приведу код обработчика ajax-запроса – файл events.php

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

Для начала мы проверяем существование объекта XMLHttpRequest и выполняем код только в том случае, если он существует. Сам по себе этот код только прогоняет цикл из 3 итераций, каждый раз «засыпая» на секунду (эта задержка сделана для того, чтобы сам процесс запроса можно было «почувствовать»).

Пример получился, естественно простейший, без дальнейшей обработки возвращаемых сервером данных, но его целью было только продемонстрировать работу с событиями Ajax, а для более реальных примеров еще будет время…