Май
29
2011

Изучаем jQuery | Урок 3 «Ajax и jQuery»

Итак, в предедущей статье мы изучали действия с элементами, а здесь я вам покажу использование Ajax в библиотеке jQuery.
Для тех, кто не знает что такое Ajax, вот подробное описание, а вкратце скажу что Ajax используют для передачи переменных методом GET, POST подгружение элементов страници, выполнение PHP скриптов и т.д. без перезагрузки страници.

Итак первое это не Ajax, но очень помогает при подгрузке некоторых файлов в страницу:

$(document).ready(function(){              // по окончанию загрузки страницы
    $('#example').click(function(){      /
        $(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html
    });
});

Для примера покажу вам стандартный AJAX запрос без библиотеки jQuery:

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax/example.html",true);
xmlhttp.send();
}

Вот теперь видите какая экономия кода и времени :-) ???? Тогда идем дальше.
Передача переменных методом GET:

$.ajax({
    url: 'example.php?some=1&some2=3',             // указываем URL
    type : "GET",                     // метод
    dataType: "JSON", // форматы могут быть: JSON, XML, HTML, text 
    success: function () { // функция после отправки данных
    }
});

Передача переменных методом POST:

$.ajax({
    url: 'example.php?some=1&some2=3',             // указываем URL
    type : "POST",                     // метод
    dataType: "JSON", // форматы могут быть: JSON, XML, HTML, text 
    success: function () { // функция после отправки данных
    }
});

Некоторые функции которые вам помогут в разработке:
beforeSend — функция перед отправкой данных
contentType — тип содержания передаваемого на сервер. При сабмите форм используют application/x-www/form-urlencoded.
data — данные отправляемые на сервер.

Вот простой пример передачи текста методом GET:

$(document).ready(function() {
$(".submit").click(function() { // при клике по кнопке
names = $("#name").val(); // вытянуть имя
surnames = $("#surname").val(); // вытянуть фамилию
/* Отправить в файл методом GET */
$.ajax({
    url: 'test.php?name='+name+'&surname='+surname,     // указываем URL
    type : "GET",                     // метод
    beforeSend: function() { $(".load").hide(); $("#loading").fadeIn(); }
    success: function () { $(".load").load("test.php").slideDown(); $("#loading").fadeOut();    }
    });
  });
});

И немного HTML:

<div id="loading" style="display:none">
<center><img src="http://mksite.com.ua/images/lightbox-ico-loading.gif"/></center>
</div>
<div class="load">
</div><br>
Имя: <input type="text" id="name">
Фамилия: <input type="text" id="surname">
<input type="button" class="submit" value="Внести в список">

При клике на кнопку передадутся введеные переменные в файл test.php
В нем можно пропиать в PHP прием и вывод етих переменных:

<?php
$name = $_GET['name'];
$surname = $_GET['surname'];
echo "Имя: $name, Фамилия: $surname";
?>

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

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    // Если к нам идёт Ajax запрос, то ловим его
    echo 'Это ajax запрос!';
} else {
//Если это не ajax запрос
echo 'Это не ajax запрос!';
}
?>

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

Вам будет интересно прочитать и это:

Об авторе: Петро Бородатий

Создаю веб-сайты, пишу скрипты для популярных CMS, веду блог. Программист портала AdvertsMarket.net.

Оставить комментарий

Услуги

Веб-студия "MKSITE"

Реклама от Google

Социальные сети

Партнеры

Система Orphus