Для начала определим задачу: первый список будет содержать предварительно загруженные названия стран и всегда находиться в активном состоянии. Два оставшихся списка – выбора авто и выбора модели, пустые и находятся в неактивном состоянии. После того, как в первом списке будет выбрана страна необходимо заполнить второй список названиями автомобилей и перевести его в активное состояние. А после выбора названия автомобиля – заполнить список названиями моделей именно этого автомобиля и тоже активировать список. Кроме того, мы должны гарантировать, что пользователь никогда не сможет выбрать автомобиль «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).

Дуглас Крокфорд (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 как на стороне клиента, так и на стороне сервера.

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 (это опять же для примера, а могли бы делать и что-то другое).

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

… вернее с тем, как их реализовать с помощью jQuery. Ниже я привожу перечень возможных запросов и постараюсь все пояснять на примерах.

load( url, [data], [callback] ) – загружает HTML из файла и вставляет его в объекную модель документа (DOM). По умолчанию (без [data]) выполняется как GET-запрос, однако, если будут переданы данные, выполнится как POST-запрос. Начиная с версии jQuery 1.2 в url можно определить селектор jQuery, например так:

$("#example").load("/ li.cat-item");

Результат выполнения Вы можете видеть ниже….

При выполнении этого запроса, были выбраны все элементы li с классом cat-item в запрашиваемом url и загружены в элемент #example, т.е. мы загрузили меню «Рубрики» этого сайта.
Здесь url – загружаемый url, data (опционально) – пары ключ/значение, которые могут быть переданы серверу, callback (опционально) – функция, которая может быть вызвана при окончании запроса (не требует обязательного успешного выполнения).
Еще пара примеров:

$("#feeds").load("feeds.html");

Загружает файл feeds.html в элемент с идентификатором feeds.

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("Последние 25 записей загружены");
});

То же самое, но дополнительно передается пара ключ/значение limit: 25 и задается функция, которая вызывается по окончании запроса.

jQuery.get( url, [data], [callback] ) – загружает страницу, используя GET-запрос. Это самый простой способ передачи GET-запроса серверу. Он допускает возможность использования одной функции, которая может быть вызвана при окончании запроса. Но в отличие от load, функция будет вызвана лишь при успешном выполнении запроса. Если необходимо определить функцию при ошибке запроса, лучше обратиться к $.ajax.

Несколько примеров:

$.get("test.php");

Запрашивает test.php page, но игнорирует возвращаемый результат.

$.get("test.php", { name: "Vasya", age: "27" } );

Запрашивает test.php и передает дополнительные параметры, но также игнорирует возвращаемый результат.

$.get("test.php", function(data){
  alert("Данные загружены: " + data);
});

Передает результат запроса (без передачи параметров) к файлу test.php в alert (это может быть HTML или XML, зависит от того, что возвращает test.php).

$.get("test.php", { name: "Vasya", age: "27" }, function(data){
  alert("Данные загружены: " + data);
});

Ну и полный набор: GET-запрос к файлу test.php с передачей каких-то параметров и возвращаемый результат передается в alert.

jQuery.post( url, [data], [callback], [type] ) – загружает страницу, используя POST-запрос. Все почти точно так же, как и в предыдущем случае, поэтому даже примеров приводить не буду. Обращу Ваше внимание разве что на еще один опциональный параметр – [type]. В нем можно определить тип передаваемых данных – JSON, XML и т.п.

jQuery.getJSON( url, [data], [callback] ) – загружает данные в формате JSON используя GET-запрос. Начиная с версии jQuery 1.2 Вы можете загружать данные в формате JSON, расположенные на другом домене. Пример загрузки фотографий с тэгом cat с Flickr JSONP API.

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

jQuery.getScript( url, [callback] ) – загружает и выполняет JavaScript файлы, используя GET запрос. Начиная с версии jQuery 1.2 Вы можете загружать и выполнять JavaScript файлы с любого домена.

Вот пример:

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

Мы загрузили и можем выполнить файл jquery.color.js – официальный jQuery Color Animation плагин.

jQuery.ajax( options ) – загружает страницу используя HTTP запрос. $.ajax() принимает один аргумент – объект, состоящий из пар ключ/значение, которые использует, чтобы инициализировать и обработать ajax-запрос. Ниже приведен список возможных значений.

Использование именно этой вспомогательной функции считается хорошим стилем, поскольку все остальные функции ($.get, $.post и т.п.) в конечном итоге используют именно $.ajax(options).

async – по умолчанию все запросы выполняются в асинхронном режиме (значение true). Если необходимо выполнить синхронный запрос, следует установить значение false для этой опции. Помните, что синхронный запрос может временно заблокировать браузер, запретив любые действия во время выполнения запроса.

beforeSend – может содержать функцию, которая должна быть вызвана до передачи запроса. beforeSend – это Ajax Event (события рассмотрены в другой статье).

cache – опция добавлена в jQuery 1.2. По умолчанию – true. Если установить в false, запрашиваемая страница не будет кэшироваться браузером.

complete – определяет функцию, которая будет вызвана по окончанию запроса (успешного и ошибочного выполнения). Принимает два аргумента: объект XMLHttpRequest и строку, описывающую «успешность» запроса. complete – это Ajax Event (события рассмотрены в другой статье).

contentType – при передаче данных серверу сообщает content-type. По умолчанию – application/x-www-form-urlencoded.

data – данные, передаваемые на сервер. Могут быть объектом или строкой. Конвертируются в строку запроса, если уже не представляют собой строку. Добавляются в URL GET-запроса. Если используется объект, он должен представлять собой пары ключ/значение. Если значения представлены в виде массива, jQuery сериализует значения с некоторым ключом. Например: {foo:["bar1", "bar2"]} будет представлено как «&foo=bar1&foo=bar2″.

dataType – строка, описывает тип данных, которые ожидаются в качестве ответа сервера. Если не определена, то jQuery сам попытается определить тип, основываясь на MIME-типе ответа сервера. Доступные типы:
- xml: вернет XML документ, который может быть обработан через jQuery.
- html: вернет HTML как plain text.
- script: расценивает ответ как JavaScript и возвращает его как plain text.
- json: расценивает ответ как данные в формате JSON и возвращает JavaScript объект.
- jsonp: загружает данные в формате JSON используя JSONP. Необходимо дополнительно добавить «?callback=?» в конец строки запроса в URL, чтобы определить вызов. (Добавлено в jQuery 1.2).
- text: строка plain text.

error – определяет функцию, которая будет вызвана в случае неуспешного выполнения запроса.

global – true или false. Вызывать или нет глобальные обработчики событий Ajax для этого запроса. Может быть использована для контроля различных Ajax событий. По умолчанию – true.

ifModified – запрос будет успешным только в случае, если данные ответа изменились со времени последнего запроса. По умолчанию – false.

processData – по умолчанию true. В опции data данные представлены в виде объекта, который преобразуется в строку запроса, подходящую для content-type по умолчанию – «application/x-www-form-urlencoded». Если необходимо иное, установите опцию processData в false.

success – указывается функция, которая будет вызвана в случае успешного завершения запроса. Функция принимает два аргумента: данные, возвращенные с сервера и отформатированные с учетом параметра dataType и строка, описывающая статус ответа.

timeout – устанавливает локальный тайм-аут для запроса в миллисекундах. Отменяет глобальный тайм-аут для этого запроса, если тот определен через $.ajaxSetup.

type – тип запроса, POST или GET. По умолчанию установлен GET. Типы запроса PUT или DELETE тоже могут быть использованы, но они поддерживаются не всеми браузерами.

url – просто url запроса.