AJAX — это аббревиатура, обозначающая асинхронный JavaScript и XML, и эта технология помогает нам загружать данные с сервера без обновления страницы браузера.
Если вы новичок в AJAX, я бы рекомендовал вам пройти наш учебник по Ajax, прежде чем продолжить.
JQuery — отличный инструмент, предоставляющий богатый набор методов AJAX для разработки веб-приложений следующего поколения.
Загрузка простых данных
Это очень легко загрузить любые статические или динамические данные, используя JQuery AJAX. JQuery предоставляет метод load () для выполнения этой работы —
Синтаксис
Вот простой синтаксис для метода load () —
[selector]. load( URL, [data], [callback] );
Вот описание всех параметров —
- URL — URL-адрес ресурса на стороне сервера, на который отправляется запрос. Это может быть скрипт CGI, ASP, JSP или PHP, который генерирует данные динамически или из базы данных.
- data — этот необязательный параметр представляет объект, свойства которого сериализуются в правильно закодированные параметры для передачи в запрос. Если указано, запрос выполняется методом POST . Если опущен, используется метод GET .
- callback — функция обратного вызова, вызываемая после того, как данные ответа были загружены в элементы соответствующего набора. Первый параметр, передаваемый этой функции, представляет собой текст ответа, полученный от сервера, а второй параметр — код состояния.
URL — URL-адрес ресурса на стороне сервера, на который отправляется запрос. Это может быть скрипт CGI, ASP, JSP или PHP, который генерирует данные динамически или из базы данных.
data — этот необязательный параметр представляет объект, свойства которого сериализуются в правильно закодированные параметры для передачи в запрос. Если указано, запрос выполняется методом POST . Если опущен, используется метод GET .
callback — функция обратного вызова, вызываемая после того, как данные ответа были загружены в элементы соответствующего набора. Первый параметр, передаваемый этой функции, представляет собой текст ответа, полученный от сервера, а второй параметр — код состояния.
пример
Этот пример демонстрирует, как можно передать пользовательский ввод скрипту веб-сервера, который отправит тот же результат обратно, и мы его напечатаем —
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>
Вот код, написанный в скрипте result.php:
<?php
if( $_REQUEST["name"] ){
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
Теперь вы можете ввести любой текст в поле ввода и затем нажать кнопку «Показать результат», чтобы увидеть, что вы ввели в поле ввода.
Методы JQuery AJAX
Вы видели базовую концепцию AJAX с использованием JQuery. В следующей таблице перечислены все важные методы JQuery AJAX, которые вы можете использовать исходя из своих потребностей программирования.
Sr.No. Методы и описание
1 jQuery.ajax (варианты)
Загрузите удаленную страницу с помощью HTTP-запроса.
2 jQuery.ajaxSetup (варианты)
Настройте глобальные параметры для запросов AJAX.
3 jQuery.get (url, [data], [callback], [type])
Загрузите удаленную страницу с помощью HTTP-запроса GET.
4 jQuery.getJSON (url, [data], [callback])
Загрузите данные JSON с помощью HTTP-запроса GET.
5 jQuery.getScript (url, [callback])
Загружает и выполняет файл JavaScript, используя HTTP-запрос GET.
6 jQuery.post (url, [data], [callback], [type])
Загрузите удаленную страницу с помощью HTTP-запроса POST.
7 загрузить (URL, [данные], [обратный вызов])
Загрузите HTML из удаленного файла и вставьте его в DOM.
8 serialize ()
Сериализует набор входных элементов в строку данных.
9 serializeArray ()
Сериализует все формы и элементы формы, такие как метод .serialize (), но возвращает структуру данных JSON для работы с вами.
Загрузите удаленную страницу с помощью HTTP-запроса.
Настройте глобальные параметры для запросов AJAX.
Загрузите удаленную страницу с помощью HTTP-запроса GET.
Загрузите данные JSON с помощью HTTP-запроса GET.
Загружает и выполняет файл JavaScript, используя HTTP-запрос GET.
Загрузите удаленную страницу с помощью HTTP-запроса POST.
Загрузите HTML из удаленного файла и вставьте его в DOM.
Сериализует набор входных элементов в строку данных.
Сериализует все формы и элементы формы, такие как метод .serialize (), но возвращает структуру данных JSON для работы с вами.
JQuery AJAX События
Вы можете вызывать различные методы JQuery в течение жизненного цикла выполнения вызова AJAX. На основе различных событий / этапов доступны следующие методы —
Вы можете пройти через все AJAX События .
Присоедините функцию, которая будет выполняться всякий раз, когда завершается запрос AJAX.
Присоедините функцию, которая будет выполняться всякий раз, когда начинается запрос AJAX, и ни одна из них уже не активна.
Присоедините функцию, которая будет выполняться всякий раз, когда AJAX-запрос не выполняется.
Присоедините функцию, которая должна быть выполнена перед отправкой AJAX-запроса.
Присоедините функцию, которая будет выполняться всякий раз, когда все запросы AJAX закончились.
Присоедините функцию, которая будет выполняться всякий раз, когда запрос AJAX завершается успешно.