AJAX — искусство взаимодействия с интерфейсом

Зачем использовать AJAX?

Когда мы отправляем контент на сервер, отправляя форму, или выполняем какие-то другие операции, это включает взаимодействие с браузером.Традиционный метод отличается от метода AJAX.

традиционный способ: пользователь инициирует HTTP-запрос к веб-серверу, сервер получает и обрабатывает входящие данные, а затем отправляет обратно новую страницу.
- Анализ 1: этот метод тратит много ресурсов и пропускной способности. Во многих случаях большая часть HTML-кода возвращенной страницы одинаково
- Анализ 2: клиент может только ждать и не может выполнять операции, пока сервер обрабатывает запрос
AJAX-метод: AJAX может только отправить запрос на сервер и получить необходимые данные, а клиент использует JavaScript для обработки ответа от сервера
- Анализ 1: Объем данных значительно уменьшается, сервер быстрее отвечает, а часть обработки передается клиенту, что снижает нагрузку на сервер
- Анализ 2: Асинхронная связь между клиентом и сервером может быть реализована (описано позже)

Например:

Если мы пройдем «традиционным способом» на этой странице содержимого страницы, в этом случае каждая страница будет обновлять всю страницу, в результате чего информация заголовка будет успешно отображена, а оставшаяся фиксированная информация будет получена с сервера, что приведет к пропускной способности Sun Huan. и ресурсы сервера, а также увеличиваете время ожидания,
Если мы реализуем пейджинг контента с помощью «метода AJAX», AJAX нужно только получить необходимую информацию с сервера, то есть данные в красной области на рисунке, поэтому нет необходимости обновлять всю страницу, только требуется частичное обновление. Это может не только сэкономить ресурсы, но и улучшить взаимодействие с пользователем.

Что такое АЯКС

AJAX (асинхронный JavaScript и XML) Асинхронный JavaScript и XML относится к технологии веб-разработки для создания интерактивных веб-приложений.

Первое чтение: AJAX - ['eidʒæks] стандартное фонетическое чтение
Второе чтение: «Аякс»

(Контент из:what is AjaxКитайский перевожу сам, а познания слишком поверхностные, что может быть не идеально)

Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

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

Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.

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

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

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

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

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

AJAX is a web browser technology independent of web server software.

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

A user can continue to use the application while the client program requests information from the server in the background.

Когда клиент запрашивает данные на сервер, пользователь может продолжать использовать приложение.

Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.

(AJAX представляет собой) интуитивно понятное и естественное взаимодействие с пользователем, события щелчка больше не нужны, достаточно событий движения мыши.

Data-driven as opposed to page-driven.

(AJAX) Используйте управление данными вместо управления страницами.

Прочитав эти инструкции, давайте объясним два ключевых понятия в определении:

(1) Что такое асинхронность?

(1) Основная концепция асинхронности

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

Синхронизировать: Клиент должен дождаться ответа от сервера, во время которого никакие другие операции выполнять нельзя
асинхронный: В отличие от синхронного, клиенту не нужно ждать ответа сервера, и он может делать что угодно в это время.

Краткий обзор процесса:

Синхронный: отправить запрос → дождаться обработки сервером → вернуть

Асинхронный: событие инициировано → обработка сервером (без ожидания) → обработка завершается

(2) Преимущества асинхронности

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

Проще говоря, вы можете изменить часть содержимого веб-страницы, не обновляя всю веб-страницу.

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

(2) Формат передачи данных

Полное английское название Aajx — асинхронный JavaScript и XML, хотя он содержит XML, формат данных также может включать JSON и т. д.

Вот такое описание его формата передачи данных:

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

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

Две форматы передачи данных AJAX часто используются как: XML / JSON, но теперь больше состоит в том, чтобы использовать формат JSON, в качестве легкого формата обмена данными, меньшим, быстрее и легче разрешены

Если вы недостаточно знакомы с XML/JSON, вы можете сначала понять некоторые основные понятия и их использование (но это не влияет на эту статью).

Преимущества, недостатки и сценарии применения AJAX

(1) Преимущества и недостатки

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

(2) Сценарии применения

① Список ассоциаций окна поиска

② Эффект частичного обновления страницы

③ Загрузить больше данных на той же странице

④ Проверка данных формы

XMLHttpRequest — основной объект

XMLHttpRequest=AJAX?

Как новичок, я ограничен несколькими приложениями, которые не слишком глубоки.У меня часто возникает такое ощущение, неужели XMLHttpRequest = AJAX?

(Контент из:what is AjaxКитайский перевожу сам, а познания слишком поверхностные, что может быть не идеально)

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

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.

То, что означает AJAX, — это JavaScript и XML. AJAX — это новая технология, которая использует XML, HTML, CSS и JavaScript для создания более качественных, быстрых и интерактивных веб-приложений.

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

AJAX основан на следующих публичных стандартах

Browser-based presentation using HTML and Cascading Style Sheets (CSS).

Браузеры используют HTML и CSS для представления.

Data is stored in XML format and fetched from the server.

Данные, полученные с сервера, хранятся в формате XML.

Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

Запросить данные с помощью XMLHttpRequest в фоновом режиме.

JavaScript to make everything happen.

JavaScript отвечает за реализацию всего процесса

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

Далее, давайте сосредоточимся на этом

(1) Основной принцип XMLHttpRequest

Самая большая особенность Ajax заключается в том, что запрос будетИнкапсулируется асинхронным объектом XMLHttpRequest,после этогоОтправить на сервер, то сервер запускается сформа течениявернуть данные в браузер

Именно потому, что данные, возвращаемые сервером, отправляются в виде потока**, объект XMLHttpRequest будет постоянно отслеживать сервер** и получать данные сервера, поэтому браузер может получать данные на стороне сервера без обновления.

(2) методы и атрибуты XMLHttpRequest

Примечание. Ниже будет объяснено конкретное использование, здесь только в качестве основных методов и свойств индукции и расчесывания, не слишком конкретные инструкции можно просмотреть кратко, пока не прочитаешь статью, а затем вернешься, чтобы прочитать

метод:

open( )

Готов инициировать запрос AJAX
- open( method, URL )
- open( method, URL, async )
- open( method, URL, async, userName )
- open( method, URL, async, userName, password )
send( content )

послать запрос
setRequestHeader( label, value )

Установить информацию заголовка запроса
getAllResponseHeaders()

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

Возвращает указанную информацию заголовка ответа
abort()

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

Атрибуты:

onreadystatechange

слушать события, когдаreadyStateЗапускается при изменении свойства
readyState

Определяет текущее состояние объекта XMLHttpRequest (0 1 2 3 4)
responseText

Вернуть ответ в виде строки
responseXML

Возвращает ответ в формате XML, это свойство возвращает объект документа XML.
status

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

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

Приложение: интеллект-карта

Шаги по использованию AJAX

(1) Создать объект XMLHttpRequest

Для разных версий браузеров существуют разные методы создания объектов XMLHttpRequest, которые делятся на две категории:

Новые современные браузеры: IE7 +, Firefox, Chrome, Opera, Safari
Старые версии браузеров IE: IE6, IE5

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

<script language="javascript" type="text/javascript">
    
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, 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) {
                    return false;
                }
            }
        }
    }

</script>

Это легко написать

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr=new XMLHttpRequest();
        }
        else {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    
</script>

(2) Подготовка запросов AJAX

xhr.open(method, URL, async);

Параметр 1: Метод запроса (Get, Post)
- get: параметры запроса пишутся после URL-адреса, а метод отправки пуст.
- Post: Параметры запроса записываются в методе отправки, и только URL можно записать в методе открытия
Параметр 2: URL-адрес запроса
Параметр 3: true-асинхронный, false-синхронный (обычно true)

(1) GET и POST, которые должны быть известны

ПОЛУЧИТЬ запрос:

GET-запросы часто используются для получения данных с сервера, например, мы используем ссылки (href) или URL-адреса для инициирования запросов, и нам часто нужно передать параметры страницы в бэкэнд для позиционирования или обработки.Метод GET-запроса будет конкатенация данных.После RUL серверу удобно парсить

Формат:？,начало,&Строки с разделителями, между параметрами не требуется пробелов, а значения параметров не нужно заключать в одинарные и двойные кавычки, например:

loginServlet?username=admin&password=admin

POST-запрос:

POST-запросы используются для отправки обработанных данных на сервер,представить формуМожно использовать GET или POST,Рекомендуется метод POST,При запросе данных рекомендуется использовать метод GET.

GET: тело запроса отсутствует, но есть пустые строки, присоединяемые параметры ограничены, а объем данных не может превышать 1k.

POST: есть тело запроса, и данные могут быть отправлены на сервер в запрошенном содержимом объекта, а количество передаваемых данных не ограничено.

(2) Формат запроса метода GET:

xhr.open("GET","loginServlet?username=admin&password=admin",true);

(3) Формат POST-запроса:

xhr.open("POST",loginServlet,true);

При использовании метода Post для отправки данных необходимо отправить как это сделать? Ответ: в процессе отправляют пропущенные как параметр, отправляется на сервер

(III) запрос передачи AJAX

xhr.send();

(1) Формат запроса метода GET:

xhr.send(null);

Использовать метод GET относительно просто, просто передайте нулевое значение в методе отправки.

(2) Формат POST-запроса:

Если вам нужны данные POST, такие как HTML-форма, используйте setRequestHeader() для добавления заголовков HTTP. Затем укажите данные, которые вы хотите отправить, в методе send():

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=admin&password=admin");

(4) Обработка ответа

xhr.onreadystatechange=function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xhr.readyState==4 && xhr.status==200) {
	//获取服务器的响应结果
	var responseText = xhr.responseText;
	alert(responseText);
	}
}

государство	описывать
readyState = 0	Запрос не инициализируется: после создания объекта XMLHttpRequest, но до вызова метода open()
readyState = 1	Запрос был установлен: после вызова метода open(), но до вызова send()
readyState = 2	Запрос отправлен: после вызова send()
readyState = 3	Выполняется запрос: после того, как браузер установит связь с сервером, но до того, как сервер завершит ответ
readyState = 4	Запрос завершен: когда запрос завершен и данные ответа полностью получены с сервера.

код состояния	объяснять
200	запрос выполнен
302	запросить перенаправление
304	Запрошенный ресурс не изменился
404	Запрошенное дополнение к ресурсу не существует, ошибка клиента атрибута
500	Внутренняя Ошибка Сервера

Напишите простую программу AJAX (нативным способом). Мы просто моделируем программу проверки формы.

index.html

ПРИМЕЧАНИЕ. Чтобы упростить понять эффект, установите кнопку Click Event для проверки, и фактически используйте методы, связанные с потери / получения фокусировки для оптимизации.

<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后台判断用户名是否存在"></br>
<div id="msgError">校验显示区域</div>

JavaScript-код

<script language="javascript" type="text/javascript">
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, 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) {
                    return false;
                }
            }
        }
        //准备请求
        ajaxRequest.open("POST", "loginServlet", true);

        //由于是POST提交方式，所以添加 HTTP 头
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //获取到表单中输入的值
        var name_input = document.getElementById("username").value;

        //发送请求
        ajaxRequest.send("username=" + name_input);

        ajaxRequest.onreadystatechange = function () {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                //获取服务器的响应结果
                var responseText = ajaxRequest.responseText;

                var div = document.getElementById("msgError");
                div.innerText = responseText;

            }
        }
    }
</script>

loginServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
		
    	//此语句仅为方便判断是否后端正常收到了前端的数据，可选择删除
        System.out.println("接收到的数据：" + username);

        try {
            if (username.equals("admin")) {
                Thread.sleep(5000);
                response.getWriter().print("该用户名已经存在");
            } else {
                Thread.sleep(5000);
                response.getWriter().print("该用户名可以注册");
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

Это позволяет нам общаться с клиентом и сервером без перезагрузки всей веб-страницы.Асинхронная связь, чтобы продемонстрировать, в то же время мы активно устанавливаем задержку ответа в 5 секунд в фоновом режиме, но наши пользователи все еще могут работать в течение этого периода.Для конкретных ситуаций вы можете просто смоделировать тест самостоятельно

Реализация JQuery

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

Например:

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>

URL: путь запроса
тип: метод запроса
date: параметр запроса, соответствующий нативной реализации JS, data: "username=admin&age=20"
успех: функция обратного вызова после успешного ответа
error: функция обратного вызова, которая будет выполнена, если в ответе на запрос есть ошибка
dateType: установите формат полученных данных ответа (не записывается в приведенном выше примере)

Конечно, его параметры и возможности настройки не только это, только некоторые относительно простые или необходимые, подробности могут быть отнесены к документации jQuery API.

Например:

Основываясь на том, что и сервлет, и html остаются неизменными, мы модифицируем код js и используем jquery для достижения той же функции.

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>

Результаты теста одинаковые

JQuery действительно значительно упрощает наш код, но если вы просто хотите быстро реализовать это требование, JQuery на самом деле предоставляет два более простых способа заменить сложный $.ajax

(1) метод $.get()

Описание: это простая функция запроса GET для замены сложного $.ajax

Полная структура:$.get(url,[data],callback,type)

url: URL-адрес загружаемой страницы.
data: Параметры ключ/значение для отправки
callback: Функция обратного вызова при успешной загрузке
type: вернуть формат содержимого, xml, html, скрипт, json, текст, _default

Этот метод предназначен для быстрой реализации запроса.При успешном выполнении запроса может быть вызвана функция обратного вызова.Если вам нужно выполнить функцию при возникновении ошибки, то все равно нужно использовать $.ajax()

(2) метод $.post()

Описание: Это простая функция запроса POST для замены сложного $.ajax

Полная структура:$.post(url, [data], [callback], [type])

url: отправить адрес запроса
data: Параметры ключ/значение для отправки
callback: Функция обратного вызова при успешной отправке
type: возвращает формат содержимого, xml, html, скрипт, json, текст, _default.

Или используйте приведенный выше html и сервлет, измените код функции

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.get("loginServlet",{username:name_input},function (data) {
            var div = document.getElementById("msgError");
            div.innerText = data;
        },"text");
    }

</script>

Суммировать:$.get()Методы и$.post()Методы и способы позволяют быстро и лаконично выполнить некоторые основные операции.Если операция более сложная, все равно нужно использовать$.ajax()Способ

Суммировать:

Базовые знания AJAX, а также два метода реализации с использованием JavaScript и JQuery, которые мы уже представили, пока что, как инициировать и получать ответы, уже не проблема, и у нас есть определенное понимание AJAX, но AJAX Some сценарии применения и то, как AJAX работает с распространенными форматами данных, такими как JSON, для обеспечения взаимодействия с интерфейсом и сервером, мы не упоминали об этом, мы поместим все это в конце, соберем все содержимое вместе, будь то по длине или содержанию Актуальность недостаточно сильна, но AJAX действительно является технологией, которую мы должны изучить на пути к росту.Если что-то непонятно, можно попробовать посмотреть на некоторых отечественных и зарубежных ресурсных сайтах, w3chool, tutorialspoint и т. д., читайте дальше Глядя на документы API, особенно на некоторые документы и материалы на английском языке, я чувствую, что они по-прежнему очень полезны для меня лично.

Также спасибо всем за вашу поддержку! Спасибо!

Каждое чтение и хвалить все, как вам нравится! ❤️

конец:

Если в статье есть какие-либо недостатки или ошибки, пожалуйста, оставьте сообщение, чтобы поделиться своими идеями, спасибо за вашу поддержку!

Следуйте за мной, если вы можете помочь! Если вы предпочитаете способ чтения статей WeChat, вы также можете обратить внимание на мой паблик-аккаунт.

Мы здесь незнакомцы, но мы все усердно работаем для своей мечты ❤

Публичный аккаунт, настаивающий на размещении оригинальных технических статей о разработке: в идеале — более двух дней.