Объясните технологии, используемые AJAX.
В этой статье мы увидим различные технологии, используемые AJAX. Ajaxis — акроним для асинхронного Javascript и XML . Он используется для связи с сервером без обновления веб-страницы и, таким образом, повышает удобство работы пользователей и повышает производительность. Это метод, а не язык программирования, который используется разработчиками для того, чтобы веб-сайты вели себя как настольные приложения. Он работает на стороне клиента для создания асинхронных веб-приложений.
Что такое АЯКС?
Ajax — это группа технологий, которые используются для разработки адаптивных веб-приложений. Используя эти технологии вместе, мы делаем веб-страницы более отзывчивыми, поскольку с сервером обмениваются небольшими объемами данных, а веб-страницы не перезагружаются и не обновляются, когда пользователь вносит изменения. Ajax позволяет пользователю взаимодействовать с веб-страницей без прерывания постоянной перезагрузки веб-страницы веб-приложений. Взаимодействие с веб-сайтом происходит быстро, только часть страницы перезагружается и обновляется.
Различные технологии AJAX: AJAX — это не язык программирования или скриптов, он использует другие языки программирования, чтобы веб-сайты реагировали. Это комбинация взаимосвязанных технологий, таких как JavaScript, dom, XML, HTML, CSS и т. д. AJAX был разработан Google и популярен в 2005 году благодаря Google Suggest. Это алгоритм, похожий на Dynamic Html. Асинхронность означает, что пользователю не нужно ждать ответа сервера. Ajax используется для создания подключений к серверу в фоновом режиме, пока пользователь взаимодействует с веб-интерфейсом. Эти соединения могут быть созданы асинхронно. Существует разнообразный список технологий, используемых в Ajax. Мы обсудим каждый из них и поймем их реализацию на иллюстрации.
HTML/XHTML и CSS: XHTML означает расширяемый язык гипертекстовой разметки. Эти технологии используются для отображения содержимого и стиля в пользовательском интерфейсе. В основном используется для представления информации. CSS предназначен для создания более интерактивных веб-страниц и не зависит от HTML. CSS можно использовать с любым языком разметки на основе XML.
Синтаксис:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Объектная модель документа (DOM): это API для доступа к структурированным документам и управления ими. По сути, это программный интерфейс для документов HTML (язык гипертекстовой разметки) и XML (расширяемый язык разметки). Он определяет логическую структуру документов и способ доступа к документу и манипулирования им. DOM — это способ представить веб-страницу в структурированном иерархическом виде, чтобы программистам и пользователям было легче перемещаться по документу. С помощью DOM мы можем легко получать доступ к тегам, идентификаторам, классам, атрибутам или элементам HTML и управлять ими с помощью команд или методов, предоставляемых объектом Document. Используя DOM, JavaScript получает доступ к HTML, а также к CSS веб-страницы, а также может добавлять поведение к элементам HTML.
Синтаксис:
<!DOCTYPE>
<html>
<head>
<title>
<style></style>
</title>
</head>
<body>
<a href="#"></a>
<h1></h1>
<p></p>
<script></script>
</body>
</html>Javascript : JavaScript — это скриптовый язык HTML и Интернета. Он используется для связи между технологиями HTML, CSS и XML. Он в основном используется для проверки на стороне клиента, которая проверяет ввод пользователя в форму HTML перед отправкой данных на сервер. JavaScript является ключевым или средним в операциях AJAX.
Синтаксис:
<script src="example.js"></script>
XMLHttpRequest: Он используется для асинхронной связи между клиентом и сервером. Это объект JavaScript, который выполняет асинхронное взаимодействие. Объект XMLHttpRequest можно использовать для запроса данных с веб-сервера.
Синтаксис:
variable = new XMLHttpRequest();
XML и JSON: JSON и XML имеют иерархическую структуру. И JSON, и XML могут использоваться на стороне сервера для переноса данных на сервер и с сервера. JSON (обозначение объектов Javascript) похож на XML, но короче и быстрее, чем XML.
Синтаксис:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<child>
<subchild>.....</subchild>
</child>
</root>ASP и JSP: JSP (серверные страницы Java) и ASP (активные серверные страницы) — это языки сценариев на стороне сервера. JSP имеет доступ ко всей библиотеке API Java. Он также имеет доступ к корпоративным базам данных.
Синтаксис:
<% //write the script. %>
Ajax объединяет эти технологии для создания нового подхода к разработке веб-приложений без перезагрузки. Ajax использует технологии, которые инициируют взаимодействие между клиентом и сервером без перезагрузки страницы. Он предоставляет способ включения частичного обновления страницы. Это означает улучшенное взаимодействие с веб-приложением, которое создает удобную для пользователя среду, подобную среде настольного приложения.
Мы поймем вышеприведенную концепцию на примерах.
Пример 1: (запрос Ajax): в этом примере мы используем PHP для POST данных и отображения их с помощью функции эха. Это простой пример AJAX, который использует HTML и PHP для публикации данных.
Индекс.php:
PHP
<html> <body> <h1 style="color:green">Geeksforgeeks</h1> <form action="" method="post"> Name: <input type=text name="t1"> <br><br> <input type=submit name="s"> <?php if(isset($_POST["s"])) { // Accessing value from the text field $a=$_POST["t1"]; // Displaying result echo "The name of the person is:-".$a; } ?> </form></body> </html> |
Выход:
Пример 2: (с ответом JSON): в этом примере мы используем JSON RESPONSE, PHP и HTML для отображения проверенного списка с помощью функции массива с именем checked_arr. Ajax предоставляет такие параметры, как тип запроса (отправить или получить), данные, тип данных и статус.
Индекс.php:
PHP
<?php // Handle AJAX request (start)if( isset($_POST["ajax"]) && isset($_POST["checked"]) ){ $checked_arr = $_POST["checked"]; echo json_encode($checked_arr); exit;} // Handle AJAX request (end)?><!DOCTYPE html><html> <body> <h1 style="color:green">Geeksforgeeks</h1> <form method="post" action> <input type="checkbox" value="JavaScript"> JavaScript <br /> <input type="checkbox" value="PHP"> PHP <br /> <input type="checkbox" value="jQuery"> jQuery <br /> <input type="checkbox" value="AJAX"> AJAX <br /> <input type="button" value="click" id="but"> <div id="response"></div> </form> <!-- Script --> <script src= </script> <script> $(document).ready(function(){ $("#but").click(function(){ var checkarr = []; $("input[type=checkbox]:checked").each(function(index,element){ checkarr.push($(element).val()); }); if(checkarr.length > 0){ $.ajax({ type: "post", data: {ajax: 1,checked: checkarr}, dataType: "json", success: function(response){ $("#response").text("response : " + JSON.stringify(response) ); } }); } }); }); </script></body> </html> |
Выход: