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-файл с небольшой кодировкой JQuery:
<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){ $('#stage').load('/jquery/result.html'); }); }); </script> </head> <body> <p>Click on the button to load /jquery/result.html file −</p> <div id = "stage" style = "background-color:cc0;"> STAGE </div> <input type = "button" id = "driver" value = "Load Data" /> </body> </html>
Здесь load () инициирует Ajax-запрос к указанному файлу URL /jquery/result.html . После загрузки этого файла все содержимое будет заполнено внутри тега <div> с тегом ID stage . Предполагая, что наш файл /jquery/result.html имеет только одну строку HTML —
<h1>THIS IS RESULT...</h1>
Когда вы нажимаете данную кнопку, файл result.html загружается.
Получение данных JSON
Там может быть ситуация, когда сервер будет возвращать строку JSON против вашего запроса. Служебная функция JQuery getJSON () анализирует возвращенную строку JSON и делает полученную строку доступной для функции обратного вызова в качестве первого параметра для выполнения дальнейших действий.
Синтаксис
Вот простой синтаксис для метода getJSON () —
[selector]. getJSON( URL, [data], [callback] );
Вот описание всех параметров —
-
URL — URL-адрес ресурса на стороне сервера, с которым связался метод GET.
-
data — объект, свойства которого служат парами имя / значение, используемыми для создания строки запроса, которая будет добавлена к URL-адресу, или предварительно отформатированной и закодированной строки запроса.
-
обратный вызов — функция вызывается после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки JSON, передается в качестве первого параметра этому обратному вызову, а состояние — в качестве второго.
URL — URL-адрес ресурса на стороне сервера, с которым связался метод GET.
data — объект, свойства которого служат парами имя / значение, используемыми для создания строки запроса, которая будет добавлена к URL-адресу, или предварительно отформатированной и закодированной строки запроса.
обратный вызов — функция вызывается после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки JSON, передается в качестве первого параметра этому обратному вызову, а состояние — в качестве второго.
пример
Рассмотрим следующий HTML-файл с небольшой кодировкой JQuery:
<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){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Здесь служебный метод JQuery getJSON () инициирует Ajax-запрос к указанному файлу URL result.json . После загрузки этого файла все содержимое будет передано в функцию обратного вызова, которая в конечном итоге будет заполнена внутри тега <div>, помеченного этапом ID. Предполагается, что наш файл result.json имеет следующее содержимое в формате json —
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
При нажатии на данную кнопку загружается файл result.json.
Передача данных на сервер
Много раз вы собираете данные от пользователя и передаете их на сервер для дальнейшей обработки. JQuery AJAX позволил достаточно легко передавать собранные данные на сервер, используя параметр данных любого доступного метода Ajax.
пример
Этот пример демонстрирует, как можно передать пользовательский ввод скрипту веб-сервера, который отправит тот же результат обратно, и мы его напечатаем —
<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 завершается успешно.