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