Учебники

AJAX — Краткое руководство

Сентябрь 24, 2018

Что такое AJAX?

AJAX расшифровывается как A синхронный Ja vaScript и X ML. AJAX — это новый метод создания более совершенных, быстрых и интерактивных веб-приложений с помощью XML, HTML, CSS и Java Script.

  • Ajax использует XHTML для контента, CSS для представления, наряду с объектной моделью документа и JavaScript для динамического отображения контента.

  • Обычные веб-приложения передают информацию на сервер и с сервера, используя синхронные запросы. Это означает, что вы заполняете форму, нажимаете «Отправить», и вас перенаправляют на новую страницу с новой информацией с сервера.

  • С помощью AJAX, когда вы нажимаете «Отправить», JavaScript отправляет запрос на сервер, интерпретирует результаты и обновляет текущий экран. В чистом смысле пользователь никогда не узнает, что что-либо даже было передано на сервер.

  • XML обычно используется в качестве формата для получения данных сервера, хотя может использоваться любой формат, включая простой текст.

  • AJAX — это технология веб-браузера, независимая от программного обеспечения веб-сервера.

  • Пользователь может продолжать использовать приложение, пока клиентская программа запрашивает информацию с сервера в фоновом режиме.

  • Интуитивное и естественное взаимодействие с пользователем. Нажатие не требуется, движение мыши является достаточным триггером события.

  • Управление данными, а не управление страницами.

Ajax использует XHTML для контента, CSS для представления, наряду с объектной моделью документа и JavaScript для динамического отображения контента.

Обычные веб-приложения передают информацию на сервер и с сервера, используя синхронные запросы. Это означает, что вы заполняете форму, нажимаете «Отправить», и вас перенаправляют на новую страницу с новой информацией с сервера.

С помощью AJAX, когда вы нажимаете «Отправить», JavaScript отправляет запрос на сервер, интерпретирует результаты и обновляет текущий экран. В чистом смысле пользователь никогда не узнает, что что-либо даже было передано на сервер.

XML обычно используется в качестве формата для получения данных сервера, хотя может использоваться любой формат, включая простой текст.

AJAX — это технология веб-браузера, независимая от программного обеспечения веб-сервера.

Пользователь может продолжать использовать приложение, пока клиентская программа запрашивает информацию с сервера в фоновом режиме.

Интуитивное и естественное взаимодействие с пользователем. Нажатие не требуется, движение мыши является достаточным триггером события.

Управление данными, а не управление страницами.

Богатая технология интернет-приложений

На сегодняшний день AJAX является самой жизнеспособной технологией Rich Internet Application (RIA). Он набирает обороты в отрасли и появляется несколько наборов инструментов и структур. Но в то же время AJAX имеет несовместимость браузера и поддерживается JavaScript, который сложно поддерживать и отлаживать.

AJAX основан на открытых стандартах

AJAX основан на следующих открытых стандартах —

  • Презентация в браузере с использованием HTML и каскадных таблиц стилей (CSS).
  • Данные хранятся в формате XML и извлекаются с сервера.
  • Закулисное извлечение данных с использованием объектов XMLHttpRequest в браузере.
  • JavaScript, чтобы все произошло.

AJAX — Технологии

AJAX не может работать независимо. Он используется в сочетании с другими технологиями для создания интерактивных веб-страниц.

JavaScript

  • Свободно типизированный язык сценариев.
  • Функция JavaScript вызывается, когда на странице происходит событие.
  • Клей для всей операции AJAX.

DOM

  • API для доступа и управления структурированными документами.
  • Представляет структуру документов XML и HTML.

CSS

  • Позволяет четко отделить стиль представления от содержимого и может быть программно изменен с помощью JavaScript

XMLHttpRequest

  • JavaScript-объект, который выполняет асинхронное взаимодействие с сервером.

AJAX — Примеры

Вот список некоторых известных веб-приложений, использующих AJAX.

Карты Гугл

Пользователь может перетащить всю карту, используя мышь, а не нажимая кнопку.

https://maps.google.com/

Google Suggest

По мере ввода Google предлагает предложения. Используйте клавиши со стрелками для навигации по результатам.

https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail — это веб-почта, основанная на идее, что электронные письма могут быть более интуитивными, эффективными и полезными.

https://gmail.com/

Yahoo Maps (новый)

Теперь стало еще проще и веселее добраться туда, куда вы идете!

https://maps.yahoo.com/

Разница между AJAX и обычной программой CGI

Попробуйте эти два примера один за другим, и вы почувствуете разницу. При использовании примера AJAX разрывов нет, и вы очень быстро получаете ответ, но когда вы пробуете стандартный пример GCI, вам придется ждать ответа, и ваша страница также обновляется.

Пример AJAX

* знак равно

Стандартный пример

* знак равно

ПРИМЕЧАНИЕ. — Мы привели более сложный пример в базе данных AJAX .

AJAX — поддержка браузера

Все доступные браузеры не могут поддерживать AJAX. Вот список основных браузеров, которые поддерживают AJAX.

  • Mozilla Firefox 1.0 и выше.
  • Netscape версии 7.1 и выше.
  • Apple Safari 1.2 и выше.
  • Microsoft Internet Explorer 5 и выше.
  • Konqueror.
  • Опера 7,6 и выше.

Когда вы пишете свое следующее приложение, подумайте о браузерах, которые не поддерживают AJAX.

ПРИМЕЧАНИЕ. — Когда мы говорим, что браузер не поддерживает AJAX, это просто означает, что браузер не поддерживает создание объекта Javascript — объекта XMLHttpRequest.

Написание кода для браузера

Самый простой способ сделать ваш исходный код совместимым с браузером — это использовать блоки try … catch в вашем JavaScript. 

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

В приведенном выше коде JavaScript мы трижды пытаемся создать наш объект XMLHttpRequest. Наша первая попытка —

  • ajaxRequest = new XMLHttpRequest ();

Это для браузеров Opera 8.0+, Firefox и Safari. Если это не удается, мы пытаемся еще два раза создать правильный объект для браузера Internet Explorer с —

  • ajaxRequest = новый ActiveXObject («Msxml2.XMLHTTP»);
  • ajaxRequest = новый ActiveXObject («Microsoft.XMLHTTP»);

Если это не работает, то мы можем использовать очень устаревший браузер, который не поддерживает XMLHttpRequest, что также означает, что он не поддерживает AJAX.

Скорее всего, наша переменная ajaxRequest теперь будет установлена ​​в соответствии со стандартом XMLHttpRequest, который использует браузер, и мы можем начать отправку данных на сервер. Пошаговый рабочий процесс AJAX описан в следующей главе.

AJAX — Действие

Эта глава дает вам четкое представление о точных шагах работы AJAX.

Шаги работы AJAX

  • Событие клиента происходит.
  • Объект XMLHttpRequest создан.
  • Объект XMLHttpRequest настроен.
  • Объект XMLHttpRequest выполняет асинхронный запрос к веб-серверу.
  • Веб-сервер возвращает результат, содержащий документ XML.
  • Объект XMLHttpRequest вызывает функцию callback () и обрабатывает результат.
  • HTML DOM обновлен.

Давайте сделаем эти шаги один за другим.

Происходит событие клиента

  • Функция JavaScript вызывается как результат события.

  • Пример — validateUserId () Функция JavaScript отображается в качестве обработчика события на событие onkeyup в поле формы ввода, идентификатор которого установлен на «идентификатор пользователя»

  • <input type = «text» size = «20» id = «userid» name = «id» onkeyup = «validateUserId ();»>.

Функция JavaScript вызывается как результат события.

Пример — validateUserId () Функция JavaScript отображается в качестве обработчика события на событие onkeyup в поле формы ввода, идентификатор которого установлен на «идентификатор пользователя»

<input type = «text» size = «20» id = «userid» name = «id» onkeyup = «validateUserId ();»>.

Объект XMLHttpRequest создан 

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

Объект XMLHttpRequest настроен

На этом шаге мы напишем функцию, которая будет вызвана клиентским событием, а функция обратного вызова processRequest () будет зарегистрирована. 

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Выполнение асинхронного запроса к веб-серверу

Исходный код доступен в приведенном выше фрагменте кода. Код, написанный жирным шрифтом, отвечает за запрос к веб-серверу. Все это делается с помощью объекта XMLHttpRequest ajaxRequest . 

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id = " + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Предположим, вы вводите Zara в поле идентификатора пользователя, а затем в приведенном выше запросе устанавливается URL «validate? Id = Zara».

Веб-сервер возвращает результат, содержащий XML-документ

Вы можете реализовать свой серверный скрипт на любом языке, однако его логика должна быть следующей.

  • Получить запрос от клиента.
  • Разобрать ввод от клиента.
  • Делать необходимые обработки.
  • Отправьте вывод клиенту.

Если мы предполагаем, что вы собираетесь написать сервлет, то вот фрагмент кода. 

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Вызвана функция обратного вызова processRequest ()

Объект XMLHttpRequest был настроен для вызова функции processRequest () при изменении состояния readyState объекта XMLHttpRequest . Теперь эта функция получит результат от сервера и выполнит необходимую обработку. Как и в следующем примере, он устанавливает для сообщения переменной значение true или false на основе возвращенного значения с веб-сервера. 

 
function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML DOM обновлен

Это последний шаг, и на этом этапе ваша HTML-страница будет обновлена. Это происходит следующим образом —

  • JavaScript получает ссылку на любой элемент на странице, используя DOM API.
  • Рекомендуемый способ получить ссылку на элемент — вызвать. 
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

  • Теперь JavaScript можно использовать для изменения атрибутов элемента; изменить свойства стиля элемента; или добавить, удалить или изменить дочерние элементы. Вот пример —

Теперь JavaScript можно использовать для изменения атрибутов элемента; изменить свойства стиля элемента; или добавить, удалить или изменить дочерние элементы. Вот пример — 

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Если вы поняли вышеупомянутые семь шагов, то вы почти закончили с AJAX. В следующей главе мы увидим объект XMLHttpRequest более подробно.

AJAX — XMLHttpRequest

Объект XMLHttpRequest является ключом к AJAX. Он был доступен с тех пор, как Internet Explorer 5.5 был выпущен в июле 2000 года, но не был полностью обнаружен, пока AJAX и Web 2.0 в 2005 году не стали популярными.

XMLHttpRequest (XHR) — это API, который может использоваться JavaScript, JScript, VBScript и другими языками сценариев веб-браузера для передачи и обработки данных XML на веб-сервер и с него с помощью HTTP, устанавливая независимый канал соединения между клиентской стороной веб-страницы и Серверное.

Данные, возвращаемые вызовами XMLHttpRequest, часто предоставляются внутренними базами данных. Помимо XML, XMLHttpRequest может использоваться для извлечения данных в других форматах, например, в формате JSON или даже в виде простого текста.

Вы уже видели несколько примеров того, как создать объект XMLHttpRequest.

Ниже перечислены некоторые методы и свойства, с которыми вы должны ознакомиться.

Методы XMLHttpRequest

  • прервать ()

    Отменяет текущий запрос.

  • getAllResponseHeaders ()

    Возвращает полный набор заголовков HTTP в виде строки.

  • getResponseHeader (headerName)

    Возвращает значение указанного HTTP-заголовка.

  • открыть (метод, URL)

  • открыть (метод, URL, асинхронный)

  • открыть (метод, URL, асинхронный, имя пользователя)

  • открыть (метод, URL, асинхронный, имя пользователя, пароль)

    Определяет метод, URL и другие необязательные атрибуты запроса.

    Параметр метода может иметь значение «GET», «POST» или «HEAD». Могут быть возможны другие методы HTTP, такие как «PUT» и «DELETE» (в основном используемые в приложениях REST).

    Параметр «async» указывает, должен ли запрос обрабатываться асинхронно или нет. «true» означает, что обработка сценария продолжается после метода send () без ожидания ответа, а «false» означает, что сценарий ожидает ответа, прежде чем продолжить обработку сценария.

  • отправить (содержание)

    Отправляет запрос.

  • setRequestHeader (метка, значение)

    Добавляет пару метка / значение в заголовок HTTP для отправки.

прервать ()

Отменяет текущий запрос.

getAllResponseHeaders ()

Возвращает полный набор заголовков HTTP в виде строки.

getResponseHeader (headerName)

Возвращает значение указанного HTTP-заголовка.

открыть (метод, URL)

открыть (метод, URL, асинхронный)

открыть (метод, URL, асинхронный, имя пользователя)

открыть (метод, URL, асинхронный, имя пользователя, пароль)

Определяет метод, URL и другие необязательные атрибуты запроса.

Параметр метода может иметь значение «GET», «POST» или «HEAD». Могут быть возможны другие методы HTTP, такие как «PUT» и «DELETE» (в основном используемые в приложениях REST).

Параметр «async» указывает, должен ли запрос обрабатываться асинхронно или нет. «true» означает, что обработка сценария продолжается после метода send () без ожидания ответа, а «false» означает, что сценарий ожидает ответа, прежде чем продолжить обработку сценария.

отправить (содержание)

Отправляет запрос.

setRequestHeader (метка, значение)

Добавляет пару метка / значение в заголовок HTTP для отправки.

Свойства XMLHttpRequest

  • onreadystatechange

    Обработчик события, которое срабатывает при каждом изменении состояния.

  • readyState

    Свойство readyState определяет текущее состояние объекта XMLHttpRequest.

    В следующей таблице приведен список возможных значений свойства readyState.

onreadystatechange

Обработчик события, которое срабатывает при каждом изменении состояния.

readyState

Свойство readyState определяет текущее состояние объекта XMLHttpRequest.

В следующей таблице приведен список возможных значений свойства readyState.

государственный Описание
0 Запрос не инициализирован.
1 Запрос был настроен.
2 Запрос был отправлен.
3 Запрос в процессе.
4 Запрос завершен.

readyState = 0 После того, как вы создали объект XMLHttpRequest, но до того, как вызвали метод open ().

readyState = 1 После вызова метода open (), но до вызова send ().

readyState = 2 После того, как вы вызвали send ().

readyState = 3 После того, как браузер установил связь с сервером, но до того, как сервер завершил ответ.

readyState = 4 После того, как запрос был выполнен, и данные ответа были полностью получены с сервера.

  • responseText

    Возвращает ответ в виде строки.

  • responseXML

    Возвращает ответ в виде XML. Это свойство возвращает объект документа XML, который можно изучить и проанализировать с помощью методов и свойств дерева узлов DOM W3C.

  • статус

    Возвращает статус в виде числа (например, 404 для «Не найдено» и 200 для «ОК»).

  • его статус

    Возвращает статус в виде строки (например, «Не найдено» или «ОК»).

responseText

Возвращает ответ в виде строки.

responseXML

Возвращает ответ в виде XML. Это свойство возвращает объект документа XML, который можно изучить и проанализировать с помощью методов и свойств дерева узлов DOM W3C.

статус

Возвращает статус в виде числа (например, 404 для «Не найдено» и 200 для «ОК»).

его статус

Возвращает статус в виде строки (например, «Не найдено» или «ОК»).

AJAX — Операции с базами данных

Чтобы наглядно продемонстрировать, как легко получить доступ к информации из базы данных с помощью AJAX, мы собираемся на лету строить запросы MySQL и отображать результаты в «ajax.html». Но прежде чем мы продолжим, давайте сделаем основную работу. Создайте таблицу с помощью следующей команды.

ПРИМЕЧАНИЕ. — Мы предполагаем, что у вас достаточно прав для выполнения следующих операций MySQL. 

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Теперь поместите следующие данные в эту таблицу, используя следующие операторы SQL: 

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

HTML-файл на стороне клиента

Теперь давайте создадим HTML-файл на стороне клиента, который называется ajax.html, и он будет иметь следующий код: 

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

ПРИМЕЧАНИЕ. — Способ передачи переменных в запросе соответствует стандарту HTTP и имеет форму FormA. 

URL?variable1 = value1;&variable2 = value2;

Приведенный выше код даст вам экран, как показано ниже —

Максимальный возраст:

Макс WPM:

Пол:

Максимальный возраст:

Макс WPM:

Пол:

Ваш результат будет отображаться здесь в этом разделе после того, как вы сделали свою запись.

ПРИМЕЧАНИЕ. — Это фиктивный экран.

PHP-файл на стороне сервера

Ваш клиентский скрипт готов. Теперь мы должны написать наш серверный скрипт, который будет извлекать возраст, wpm и пол из базы данных и отправлять их обратно клиенту. Поместите следующий код в файл «ajax-example.php». 

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	
//Select Database
mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age))
   $query .= " AND age <= $age";

if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}

echo "Query: " . $query . "<br />";
$display_string .= "</table>";

echo $display_string;
?>

Теперь попробуйте ввести правильное значение (например, 120) в Max Age или любом другом поле, а затем нажмите кнопку Query MySQL.

Максимальный возраст:

Макс WPM:

Пол:

Максимальный возраст:

Макс WPM:

Пол:

Ваш результат будет отображаться здесь в этом разделе после того, как вы сделали свою запись.

Если вы успешно завершили этот урок, то вы знаете, как использовать MySQL, PHP, HTML и Javascript в тандеме для написания AJAX-приложений.

AJAX — Безопасность

AJAX Security: серверная сторона

  • Веб-приложения на основе AJAX используют те же схемы безопасности на стороне сервера, что и обычные веб-приложения.

  • Вы указываете требования к аутентификации, авторизации и защите данных в своем файле web.xml (декларативном) или в вашей программе (программной).

  • Веб-приложения на основе AJAX подвержены тем же угрозам безопасности, что и обычные веб-приложения.

Веб-приложения на основе AJAX используют те же схемы безопасности на стороне сервера, что и обычные веб-приложения.

Вы указываете требования к аутентификации, авторизации и защите данных в своем файле web.xml (декларативном) или в вашей программе (программной).

Веб-приложения на основе AJAX подвержены тем же угрозам безопасности, что и обычные веб-приложения.

AJAX Security: клиентская сторона

  • Код JavaScript виден пользователю / хакеру. Хакер может использовать код JavaScript для определения слабых мест на стороне сервера.

  • Код JavaScript загружается с сервера и выполняется («eval») на клиенте и может скомпрометировать клиента из-за неправильного кода.

  • Загруженный код JavaScript ограничен моделью безопасности песочницы и может быть ослаблен для подписанного JavaScript.

Код JavaScript виден пользователю / хакеру. Хакер может использовать код JavaScript для определения слабых мест на стороне сервера.

Код JavaScript загружается с сервера и выполняется («eval») на клиенте и может скомпрометировать клиента из-за неправильного кода.

Загруженный код JavaScript ограничен моделью безопасности песочницы и может быть ослаблен для подписанного JavaScript.

AJAX — текущие проблемы

AJAX растет очень быстро, и именно поэтому в нем много проблем. Мы надеемся, что с течением времени они будут решены, и AJAX станет идеальным для веб-приложений. Мы перечисляем несколько проблем, от которых в настоящее время страдает AJAX.

Сложность увеличивается

  • Разработчики на стороне сервера должны понимать, что логика представления будет требоваться как на клиентских страницах HTML, так и на стороне сервера.

  • Разработчики страниц должны владеть технологиями JavaScript.

Разработчики на стороне сервера должны понимать, что логика представления будет требоваться как на клиентских страницах HTML, так и на стороне сервера.

Разработчики страниц должны владеть технологиями JavaScript.

Приложения на основе AJAX могут быть сложны для отладки, тестирования и обслуживания

  • JavaScript сложно проверить — автоматическое тестирование сложно.
  • Слабая модульность в JavaScript.
  • Отсутствие шаблонов проектирования или рекомендаций по передовому опыту.

Инструментарий / Рамки еще не созрели

  • Большинство из них находятся в бета-фазе.

Никакой стандартизации XMLHttpRequest пока нет

  • Будущая версия IE решит эту проблему.

Нет поддержки XMLHttpRequest в старых браузерах

  • Ифраме поможет.

Зависимость и несовместимость технологии JavaScript

  • Должен быть включен для приложений, чтобы функционировать.
  • Тем не менее, существуют некоторые несовместимости браузеров.

Код JavaScript виден хакеру

12569
Share: