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

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

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

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

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

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

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

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

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

 

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

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

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

Читайте также  jQuery, AJAX и русские буквы - проблема с кодировкой
jQuery, AJAX и русские буквы — проблема с ко... При использовании AJAX в jQuery и особенно совместно с базами данных MySQL, могут возникнуть проблемы с передачей русских букв (кодировкой) между...
Простая PHP, jQuery, and AJAX форма обратной связи... Sep 30, 2013Build a Simple PHP, jQuery, and AJAX Powered Contact Form (Updated 02/05/2014) Download Updated 02/05/2014I have updated the scrip...

Сохрани, чтобы не потерять