Ajax-функции в jQuery — некоторые подробности

Сам заголовок статьи выглядит довольно уныло. Если не нелепо. Да и сама потребность написать подобный опукс вгоняет в некоторую депрессию. Потому как, наверное самая существенная причина появления  JavaScript фрэймворков, таких как Protype, jQuery, dojo  и пр прочие motools, является именно удобная организация взаимодействия веб страницы с веб сервером, без перезагрузки. Почему я не выразился проще и не произнёс сакральное слово «асинхронное»? Если вы поняли почему, то по крайне мере два сведущих абзаца можно приопустить.

В процессе собеседования, при приёме на работу, я обычно задаю претенденту на высокое звание веб-программиста такой, не очень приятный вопрос (вообще два, но об этом потом):

-Расскажите, как отправить Ajax запрос на сервер и обработать ответ, средствами чистого JavaScrpt, без использования каких-либо библиотек и фрэймворков?

Вы думаете это это слишком простой вопрос? Да вот -ничего подобного! По крайней мере половина людей, считающих себя веб-программистами ответить не может! И это при том, что я не требую писать код  (синтаксис я сам могу по памяти не воспроизвести), просто описать основные моменты.

Впрочем возможно вы так не думаете, возможно вы согласны с высказыванием одного из претендентов на работу:

-Да зачем и кому это сейчас надо? Сейчас, когда есть jQuery, dojo  и т д? И работают они везде?

Надо сказать, что доля истины в этих словах есть, более того, возможно через пяток лет ниписание кода на читстом JavaScript будет сродни созданию прикладных программ на ассемблере в эпоху языпков высокого уровня, но пока татакое время не настапло, да и немного знать ассемблер, для понимания «что и капк работает» бывает не лишним.

Второй вопрос, который, к моему удивлению тоже у многих вызывает затруднение звучит примерно так:

-Ajax.как следует из назваия технлогия асинхронная. Но допустим есть JavaScript код, в котором присутствует AJAX запрос, после которого идёт код, который должен выпоплниться гарантировано поле получения ответа сервера. Как это обеспечить?

Вы не поверите, иногда  предлагают sleep()…

Конечно, в методах jQuery, таких как get(), post(), можно указать в качестве параметра функцию обратного вызова, но это рне всегда спасает. Примитивный пример:

$('#select1').find('option').each(
  function(){
  $.get("action/visa.php?user="+this.value);
 });
 $('#select1').get(0).submit();

Понятно в чём подвох? Последняя строчка выполняет сабмит родительского элемента (очевидно формы), после того, как  в цикле выполнится некоторое количество ajax запросов. Вернее так предполагается, но успеют ли они гарантированно ворполниться?
В моём вопросе всё проще, и ответ, который я хочу получить – указвние параметра asyn при создании AJAX запроса. А какак это сделать в jQuery? Тоже просто – вместо get(). post(), load(), getJSON и т д использовать низкоуровневую функцию, на которой основаны все эти методы - $.ajax.

$.ajax. Просто $.ajax

Тем, кому не лень читать документацию можнео дальше не читать, для остальных кратпко поясню её использование. Вот её использование в почти самом простом сплучае:

$.ajax({
  url: “test.php”,
  type: post
});

Тут я думаю всё понятно. Аргумент у фунпкции только один – объект. А вот по полям этого обыекта мы сейчас пройдёмся.

Поля url и type вопросов вызывать не должны (по умоплчанию type: get)

data позволяет передовать в запросе данные, в формате Параметр: Значение. Пример:

$.ajax({
  url: “test.php”,
  data: { 
     foo: 'bar',
     level:"1"
    }
});

[два замечания]

acync - как раз овечает за исинхронность запроса. true (по умолчанию) – запрос выполняется асинхронно, false – синхронно.

dataType – ожидаемый тип данных, возвращаемый сервером. Это может быть text, html, xml, json, jsonp script. По умолчанию этот параметр опредепляется по MIME типу в заголовпке ответа.

success, complete, error – ссылки на фунпкции вызываемые, соответственно при успшном завершении запрпоса, любом завершении запроса и при ошибке. Применяются они примерно так:

$.ajax({
  url: "test.php",
  success: function(data, status){
  alert("Статус - "+status+" Получено: "+data);
  },
  error: function(obj, text){
  alert(“Бида! - ”+ text);
  },
  complete: function(obj, status){
  alert(“Запрос завершен”);
  }
});

[три замечания]

dataFilter указывает на функцию, вызываему после получения ответа сервера, но то ккой либо обработки данных jQuery. Функция, директивой return, должна возвращать обработанные данные.

Ещё одна опция из этой компании, beforeSend, как следует из её названия, выполняется непосредственно перед запросом:

$.ajax({
  url: "test.php",
  beforeSend: function(obj){
  //изменяем попле заголовка запроса
  obj.setRequestHeader("User-Agent", "lynks");
  alert("Поехали!");
  // и махнул рукой
  }

Timeout – максимальное время выполнения запроса в миллисекундах (по умолчанию этот параметр определяется браузером).

cache – опция управляет кэшированием, когда значение равно false, к строке запроса добавляется параметр _ со случайным значением. В сплучае true кэширование осуществляется только в случае, если в загопловках ответа сераера не указан запрет кэширования.

contentType – тут всё понятно из названия.

processData – опция отвечает за пребразование данных объекта data в строку запроса. По умолчанию запрос вида:

$.ajax({
  url: “test.php”,
  data: { foo: "bar",
  level: "1"
  }
});

преобразуется в test.php?foo=bar&level=1. Это не всегда нужно – допустим мы хотим передать массив. Делаем следующий запрос:

$.ajax({
  url: "test.php",
  processData: false,
  data: {[1,5,7]},
  type: get
  });

Получаем строку: test.php? 1,5,7

Если запрос требует HTTP авторизации, то логин и пароль можно указать с помощью опций username и password

ifModefield, в значении true позволяет успешно завершить запрос, тлько если данные изменились по сравнению с предыдущим. При ответе сервера с пкодом статуса 304, секция success не сработае.

Нескольпко опций предназначены для специфических типов данных:

scriptChapset – указывает кодировку данных для типов script, json, jsonp.

jsonp – позволяет указать callback параметр для json запроса, не прописывая его в url:

$.ajax({
  url: "http://superpupersite/test.php",
  data: {
  foo: "bar",
  mlevel: "1"
  },
  dataType: "jsonp",
  jsonp: "callback"
  });

Уф… кажеться всё.

.