Пример работы с AJAX

Опубликовано 2012.06.21

Использовать технологию AJAX можно достаточно просто,не вдаваясь в дебри программирования Web 2.0. Очень часто возникает необходимость отправить запрос и получить на него ответ, на основании которого принять какое-то решение. Самый простой вариант-это использовать технологию jQuery. Для этого потребуется подключить к сайту саму библиотеку. Можно скачать её и закинуть на свой сайт,либо использовать гугловое хранилище кода.Например так:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Такое подключение даст небольшой прирост в скорости загрузки страницы,поскольку сервера гугла работают быстрее, чем ваш. К тому же именно этот файл уже может быть закэширован на стороне клиента. И плюс сжатие gzip. Далее создаем простенькую запрос к странице, с передачей ей параметров:

var res=$.ajax({
     url:'project?action=addPersonForm&className=Person',
     async: false
}).responseText;

Это самый простой образец кода. Теперь переменная res будет хранить в себе ответ страницы project?action=addPersonForm&className=Person на вашем сервере. Кстати,если вы хотите отправить переменные методом POST, то в код строчку type: "POST"

var res=$.ajax({
     url:'project?action=addPersonForm&className=Person',
     type: "POST",
     async: false
}).responseText;

Ну раз получаете ответ-его нужно где-то использовать. Например вывести его в контейнере div. Создаём сам контейнер:

<div id="my_resp"></div>

И после ajax запроса дописываем:

$("#my_resp").html(res);

Таким нехитрым образом вы сможете, как говорят в народе, "подтянуть контент аяксом". У метода ajax есть и множество других параметров и настроек. Их можно легко найти в документации на офф сайте.