Our Blog

Разбираемся с ajax запросом

Перед этой статьей был написан пример сайта на ajax. Но там не разбирался javascript код, потому что я хочу разобрать его отдельной статьей.
Итак, пойдем прям по строчкам.

$(document).ready(function(){

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

$("a").click(function(){

Здесь мы отслеживаем нажатие на элемент a. Дело в том, что на странице несколько ссылок a и нам надо, чтоб код исполнялся на любую из них. Это один из способов так называемой выборки элементов страницы, подробнее о нем Вы можете почитать здесь.

var id=$(this).attr('id');

Мы нажали на ссылку, но как же понять на какую именно? В jQuery есть такая штука как this. Теперь вместо выборки элементов можно просто использовать аргумент this. Это и есть та самая ссылка, на которую нажали. Но помните, для чего мы делали у каждой ссылки id? Вот теперь нам как раз id и нужен. Этой функцией мы записываем в новую переменную id идентификатор нажатой ссылки. Теперь мы точно знаем, какая именно ссылка нажата.

$.ajax({

А здесь начинается интересное. Именно эта функция выполняет ajax запросы в jQuery.
type: «GET», Типа отправки — GET или POST. Если Вы не знаете, GET используется для передачи простых данных, а POST для секретных, например, паролей. При передаче методом POST, данные шифруются.
data: «go=»+id, Здесь перечисляются те данные, которые отправляются серверу. Строки имеет вид:
var1=asd&var2=fgh&var3=jkl
Я уже привык так передавать заголовки, поэтому использую такой способ. Если Вам он не нравится, то есть еще один:

data: {var1: 'asd', var2: 'fgh', var3: 'jkl'},

Возможно, так удобнее.

cache: false,

Включает или отключает функцию кеширования.

url: "index.php",

Адрес скрипта, к которому направляется ajax запрос. Он может быть тот же (как у нас) или вынесен в отдельный файл.

beforeSend: function(){

Внутри этой функции располагаются те действия, которые будут сделаны перед отправкой данных. Здесь, например, можно вывести надпись «Загрузка, пожалуйста, подождите», или что-то подобное. Такое Вы можете наблюдать на многих сайтах, использующих ajax.

success: function(response){

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

$("#content").html (response);

В элемент в id=»content» (напомню, у нас это был обычный div) помещается содержание переменной response, то бишь ответа сервера.

return false;

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

Comments ( 0 )
    -->