jQuery - Ajax

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- Функция обратного вызова, вызываемая после загрузки данных ответа в элементы согласованного набора. Первый параметр, передаваемый этой функции, - это текст ответа, полученный от сервера, а второй параметр - это код состояния.

пример

Рассмотрим следующий 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 против вашего запроса. Служебная функция JQuerygetJSON() анализирует возвращенную строку JSON и делает полученную строку доступной для функции обратного вызова в качестве первого параметра для выполнения дальнейших действий.

Синтаксис

Вот простой синтаксис для getJSON() метод -

[selector].getJSON( URL, [data], [callback] );

Вот описание всех параметров -

URL - URL-адрес ресурса на стороне сервера, к которому осуществляется связь с помощью метода GET.
data - Объект, свойства которого служат парами имя / значение, используемыми для создания строки запроса, добавляемой к URL-адресу, или предварительно отформатированной и закодированной строки запроса.
callback- Функция, вызываемая после завершения запроса. Значение данных, полученное в результате переваривания тела ответа в виде строки 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 stage . Предположим, наш файл result.json имеет следующее содержимое в формате json:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Когда вы нажимаете данную кнопку, загружается файл result.json.

Передача данных на сервер

Много раз вы собираете ввод от пользователя и передаете его на сервер для дальнейшей обработки. JQuery AJAX упростил передачу собранных данных на сервер, используяdata параметр любого доступного метода 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, [данные], [обратный вызов], [тип]) Загрузите удаленную страницу с помощью HTTP-запроса GET.
4	jQuery.getJSON (URL, [данные], [обратный вызов]) Загрузите данные JSON с помощью HTTP-запроса GET.
5	jQuery.getScript (URL, [обратный вызов]) Загружает и выполняет файл JavaScript с помощью запроса HTTP GET.
6	jQuery.post (URL, [данные], [обратный вызов], [тип]) Загрузите удаленную страницу с помощью запроса HTTP POST.
7	load (url, [data], [callback]) Загрузите HTML из удаленного файла и вставьте его в DOM.
8	сериализовать () Сериализует набор входных элементов в строку данных.
9	serializeArray () Сериализует все формы и элементы форм, такие как метод .serialize (), но возвращает структуру данных JSON, с которой вы можете работать.

События JQuery AJAX

Вы можете вызывать различные методы JQuery в течение жизненного цикла выполнения вызова AJAX. На основе различных событий / этапов доступны следующие методы -

Вы можете просмотреть все события AJAX .

Sr. No.	Методы и описание
1	ajaxComplete (обратный вызов) Присоедините функцию, которая будет выполняться при завершении запроса AJAX.
2	ajaxStart (обратный вызов) Прикрепите функцию, которая будет выполняться всякий раз, когда начинается запрос AJAX, и ни один из них еще не активен.
3	ajaxError (обратный вызов) Прикрепите функцию, которая будет выполняться при сбое запроса AJAX.
4	ajaxSend (обратный вызов) Присоедините функцию, которая будет выполняться перед отправкой запроса AJAX.
5	ajaxStop (обратный вызов) Прикрепите функцию, которая будет выполняться после завершения всех запросов AJAX.
6	ajaxSuccess (обратный вызов) Прикрепите функцию, которая будет выполняться всякий раз, когда запрос AJAX завершается успешно.