{"time":1741594017729,"blocks":[{"id":"DIpiNJaNuY","type":"paragraph","data":{"text":"Технология AJAX (Asynchronous JavaScript and XML) — мощный инструмент разработки динамичных и производительных интерактивных веб-приложений. AJAX меняет подход к обновлению содержимого страниц и позволяет загружать данные в асинхронном режиме без перезагрузки. Благодаря этой технологии сохраняется высокая скорость загрузки, юзерам удобнее пользоваться сайтами."}},{"id":"NiTGrugBe3","type":"paragraph","data":{"text":"Узнаем, что собой представляет технология, как формируются AJAX запросы, как работает инструмент, каковы его преимущества, недостатки и ограничения."}},{"id":"cJLjXNXVPS","type":"header2","data":{"text":"Основные компоненты AJAX","level":2},"tunes":{}},{"id":"SIb3O5MtN7","type":"paragraph","data":{"text":"Термин AJAX используется в программировании с 2005 года, хотя подобные способы обмена данными применялись и ранее. Это универсальное решение для веб-приложений, которое объединяет несколько компонентов. Именно благодаря AJAX реализованы такие проекты, как современные соцсети, Google Maps, Gmail, Google Docs и многие другие. "}},{"id":"a2cad50b-7b55-45c2-9682-af18e68e35ae","type":"embed","data":{"data":{"id":254483,"name":"-umnejwij-ii-v-istorii--grok-3-predstavlen-oficialno---mask-obeshhaet-revolyuciyu-254483","type":"post","title":"«Умнейший ИИ в истории» Grok 3 представлен официально — Маск обещает революцию","author":94744,"parent":72711,"status":"publish","content":"

Компания xAI Илона Маска представила Grok 3 — новую версию чат-бота, которую разработчики называют «самым умным ИИ на планете».

\r\n\r\n

Что умеет Grok 3?

\r\n\r\n

Глубокий анализ данных: модель обучалась на суперкомпьютере Colossus, использующем 100 000 чипов Nvidia H100. Это позволило существенно улучшить логику рассуждений.
DeepSearch: новый алгоритм поиска, который перелопачивает весь интернет для получения точного ответа.
Самокоррекция: Grok 3 умеет исправлять собственные ошибки без вмешательства человека.
Игровая генерация: прямо на презентации бот создал гибрид Tetris и Bejeweled за несколько минут.

\r\n\r\n

Чем Grok 3 пугает разработчиков?

\r\n\r\n

По словам инженеров xAI, модель настолько продвинута, что «их пугает её потенциал». Grok 3 уже обошёл ChatGPT-4o, Claude 3.5 и DeepSeek-V3 в тестах по математике, кодингу и научным задачам.

\r\n\r\n

Особенно удивил демонстрационный запуск: ИИ рассчитал траекторию полёта на Марс и обратно в режиме реального времени, учитывая климатические особенности планеты и сроки возвращения.

\r\n\r\n

Кто уже в зоне риска?

\r\n\r\n

Google: функция DeepSearch позиционируется как прямой конкурент традиционным поисковым системам.
OpenAI: несмотря на успехи GPT-4o, тесты показывают, что Grok 3 работает эффективнее в задачах, требующих аналитического мышления.
DeepSeek: китайская компания, недавно обогнавшая многих конкурентов, теперь получила серьёзного соперника.

\r\n\r\n

Когда ждать?

\r\n\r\n

Пока что доступ к Grok 3 предоставляется ограниченно. Маск обещает открытую регистрацию уже в марте 2025 года.

\r\n\r\n

А вскоре после этого компания планирует запустить игровую студию, в которой кодить и придумывать механики будет… сам Grok 3.

\r\n\r\n","created_at":"2025-02-18T08:30:49.000+03:00","updated_at":"2025-02-18T08:30:49.000+03:00","created_at_gmt":"2025-02-18T05:30:49.000+03:00","updated_at_gmt":"2025-02-18T05:30:49.000+03:00"},"link":"https://tproger.ru/news/-umnejwij-ii-v-istorii--grok-3-predstavlen-oficialno---mask-obeshhaet-revolyuciyu-254483","type":"tproger","image":null,"title":"«Умнейший ИИ в истории» Grok 3 представлен официально — Маск обещает революцию","subType":"tproger_post","viewDomain":"tproger.ru"}},{"id":"9jLTt8lXYI","type":"paragraph","data":{"text":"Основная задача AJAX — запросы к серверу в обход перезагрузки страницы. Это уменьшает время отклика и позволяет веб-приложению работать в интерактивном режиме. Несмотря на присутствие в названии отсылки к XML, использовать этот язык разметки не обязательно."}},{"id":"ZsA6ffHR8C","type":"paragraph","data":{"text":"Технология реализуется через JavaScript — происходит заданный скриптом асинхронный обмен данными между сервером и браузером. Именно на JS создаются запросы для коммуникации с сервером и динамического изменения страницы."}},{"id":"WVbf1g4Jy6","type":"paragraph","data":{"text":"Асинхронность — ключевое условие запросов AJAX. Они выполняются в фоновом режиме, пока пользователь продолжает работу с сайтом. Загрузка и обработка данных выполняются параллельно."}},{"id":"QxFhRTOuid","type":"paragraph","data":{"text":"Код на JavaScript — не единственный компонент AJAX. В него также входят форматы хранения данных XML или JSON. При этом JSON для отправки запросов AJAX используется чаще, поскольку код у этого формата короче, что существенно упрощает передачу данных. "}},{"id":"PPxxyk5mQd","type":"paragraph","data":{"text":"Важнейший компонент технологии — объект XMLHttpRequest, который отвечает за все запросы AJAX. Этот API предоставляет клиенту полноценный функционал для взаимного обмена данными с сервером. Раньше XHR поддерживали не все браузеры — разработчикам приходилось дополнительно подключать библиотеку jQuery с встроенным объектом. Сейчас большинство популярных браузеров, включая Chrome и Firefox, работают с XMLHttpRequest напрямую."}},{"id":"CiPrNDD1Vk","type":"hint","data":{"text":"Примечание. В современных программных веб-продуктах вместо XHR нередко используют Fetch AP, но говорить о массовом тренде преждевременно.","fullWidth":true}},{"id":"vCWhq_t-Yb","type":"paragraph","data":{"text":"Передача данных выполняется через стандартный протокол взаимодействия клиента и сервера HTTP. Браузер инициирует запрос, получает в ответ HTML-страницу, либо сообщение об ошибке (если в запросе есть неточности). Используются стандартные методы получения данных — GET и POST. Первый (GET) применяется при получении данных от сервера, второй (POST) используется для отправки данных на сервер в теле HTTP-запроса."}},{"id":"7dfaaac5-7468-4a00-9ffd-e2ed4ac43df1","type":"embed","data":{"data":{"id":252560,"name":"obuchavwij-chatgpt-razrabotchik-obvinil-openai-v-naruwenii-avtorskih-prav","type":"post","title":"Обучавший ChatGPT разработчик обвинил OpenAI в нарушении авторских прав","author":94744,"parent":72711,"status":"publish","content":"

Экс-исследователь OpenAI обвинил компанию в нарушении авторских прав при обучении ИИ-моделей.

\r\n\r\n

По данным The New York Times, 25-летний Сучир Балажи, проработавший в OpenAI четыре года, решил уйти из-за этических разногласий.

\r\n\r\n

Он считает, что поскольку продукты, такие как ChatGPT, стали сильно коммерциализированы, практика OpenAI по массовому сбору материалов из Интернета для обучения своих моделей больше не соответствует критериям добросовестного использования.

\r\n\r\n

Изменение отношения к OpenAI

\r\n\r\n

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

\r\n\r\n

В то время компания ещё оставалась исследовательской и вопрос авторских прав не вызывал серьёзных опасений.

\r\n\r\n

«С исследовательским проектом, в целом, можно обучаться на любых данных», — пояснил Балажи. Но после выпуска ChatGPT в ноябре 2022 года его отношение изменилось, так как проект стал коммерческим и теперь использование данных затрагивает интересы и доходы авторов этих материалов.

\r\n\r\n

Реакция на коммерциализацию ИИ

\r\n\r\n

Балажи подчеркнул, что текущая модель не является устойчивой для интернет-экосистемы в целом.

\r\n\r\n

К нему присоединились и другие голоса — адвокат по интеллектуальной собственности Брэдли Халберт отметил, что «пора Конгрессу вмешаться», так как развитие ИИ идёт слишком быстро и требует регулирования.

\r\n\r\n

Позиция OpenAI

\r\n\r\n

В свою очередь, OpenAI заявила, что её модели обучаются на общедоступных данных, в рамках, защищённых принципами добросовестного использования.

\r\n\r\n","created_at":"2024-10-25T07:33:04.000+03:00","updated_at":"2024-10-25T07:36:53.000+03:00","created_at_gmt":"2024-10-25T04:33:04.000+03:00","updated_at_gmt":"2024-10-25T04:36:53.000+03:00"},"link":"https://tproger.ru/news/obuchavwij-chatgpt-razrabotchik-obvinil-openai-v-naruwenii-avtorskih-prav","type":"tproger","image":null,"title":"Обучавший ChatGPT разработчик обвинил OpenAI в нарушении авторских прав","subType":"tproger_post","viewDomain":"tproger.ru"}},{"id":"RkwEVX5Wgz","type":"paragraph","data":{"text":"Благодаря способности AJAX работать с разными форматами, типами данных и серверными API, эта методика универсальна. Асинхронный обмен позволяет веб-приложениям быстро загружаться, плавно работать и не перезагружаться после каждого запроса пользователя к серверу. Это особенно актуально для приложений, требующих постоянного взаимодействия с сетевым устройством — социальных сетей, онлайн-магазинов, браузерных версий мессенджеров."}},{"id":"cy1hXmzwaG","type":"header2","data":{"text":"Как работает AJAX","level":2},"tunes":{}},{"id":"NyBKUHzcqi","type":"paragraph","data":{"text":"Магия асинхронных запросов AJAX базируется на взаимодействии с DOM-объектами браузерной страницы. Процесс выглядит следующим образом:"}},{"id":"pVIKwngpXW","type":"list","data":{"style":"ordered","items":["С помощью JavaScript браузер отправляет HTTP-запрос на сервер, где происходит обработка данных и отправка ответа. Чтобы отправить запрос, потребуется создать объект XMLHttpRequest — без него отправлять запросы и получать ответы без перезагрузки не получится. ","При этом запрос необходимо настроить — указать метод GET/POST, URL и перейти на асинхронный режим работы. ","Сервер возвращает данные, с которыми начинает работать JavaScript. Когда браузер принимает исходный код страницы, он выстраивает множество виртуальных элементов на базе этого кода — сюда входят заголовки, изображения, текст, ссылки и прочее. ","При этом к каждому компоненту виртуальной модели можно обращаться отдельно с целью изменить его свойства или содержание. JavaScript позволяет поменять фон страницы, изменить заголовок и внести другие изменения, не перегружая страницу. "]}},{"id":"cXWkEKNwDQ","type":"paragraph","data":{"text":"Простой пример запроса AJAX выглядит следующим образом (используется метод получения данных GET):"}},{"id":"ti6nksZhqS","type":"code","data":{"code":"const xhr = new XMLHttpRequest();\n\nxhr.open(‘GET’, ‘https://api.example.com/data’, true);\n\nxhr.onload = function() {\n\n if (xhr.status === 200) {\n\n console.log(JSON.parse(xhr.responseText));\n\n }\n\n};\n\nxhr.send();","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"1PMnTfnbYN","type":"paragraph","data":{"text":"В этом примере мы создаем объект XMLHttpRequest, настраиваем запрос, обрабатываем ответ и данные, отправляем запрос на сервер. Данные выводятся в консоль без перезагрузки страницы — обновляется только нужный элемент интерфейса."}},{"id":"htWC7AMOd0","type":"paragraph","data":{"text":"В следующем примере показан код для отправки формы с использованием запроса AJAX:"}},{"id":"DflhjnFCXp","type":"code","data":{"code":"$(‘#myForm’).submit(function(event) {\n\n event.preventDefault();\n\n $.ajax({\n\n url: ‘/Form/Submit’,\n\n type: ‘POST’,\n\n data: $(this).serialize(),\n\n success: function(response) {\n\n $(‘#result’).html(‘Форма отправлена.’);\n\n },\n\n error: function() {\n\n $(‘#result’).html(‘При отправке формы произошла ошибка.’);\n\n }\n\n });\n\n});","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"3TejlWX9on","type":"paragraph","data":{"text":"С помощью этого кода пользователь отправляет данные формы на сервер и получает ответ без перезагрузки страницы. В браузере запускается скрипт, привязанный к кнопке «Отправить». Все процессы происходят внутри скрипта — новая информация встроена в уже открытую страницу."}},{"id":"DYcMIGi7F_","type":"header3","data":{"text":"Отладка AJAX-запросов","level":3},"tunes":{}},{"id":"CnXNhhLExx","type":"paragraph","data":{"text":"Для эффективной разработки и поддержки приложений программистам важно научиться отлаживать и тестировать запросы AJAX. Для этого необходимы встроенные инструменты браузеров Chrome, Firefox, Edge и других."}},{"id":"HsANwI-gp6","type":"paragraph","data":{"text":"Эти инструменты позволяют:"}},{"id":"wAS7LVEY9m","type":"list","data":{"style":"unordered","items":["просматривать отправленные на сервер запросы во вкладке Network;","проверять атрибуты запросов/ответов и их содержимое;","следить за временем выполнения отправленных запросов, выявлять узкие места и оптимизировать процессы."]}},{"id":"ArbT0RxxiR","type":"paragraph","data":{"text":"Для тестирования запросов полезно создавать фейковые API или проверять работу реальных интерфейсов вне контакта браузера с помощью библиотек MSW или Postman."}},{"id":"a9d73263-4ae7-42c7-b66e-7703da081dc1","type":"banner-blank","data":{}},{"id":"u-2jppELLG","type":"paragraph","data":{"text":"Прогерам будут полезны ценные советы по оптимизации процессов при работе с запросами:"}},{"id":"PSw2VhcEub","type":"list","data":{"style":"unordered","items":["Используйте кэширование, чтобы уменьшить количество запросов. Это снижает нагрузку на сервер и повышает производительность. ","Применяете сжатие данных для снижения объема отправляемой информации. Это ускоряет процесс передачи и обработки данных.","Всегда обрабатывайте ошибки для улучшения пользовательского опыта. Лучше заранее предусмотреть все варианты, чтобы снизить риск возможных проблем при использовании приложения."]}},{"id":"1VX4DjhBuR","type":"header2","data":{"text":"Преимущества AJAX","level":2},"tunes":{}},{"id":"3-Tqom36H3","type":"paragraph","data":{"text":"Перечислим основные плюсы технологии:"}},{"id":"tva2edKGGn","type":"list","data":{"style":"unordered","items":["Обновление данных без необходимости перезагружать страницу. Это улучшает опыт пользователей и делает взаимодействие с приложением более плавным и быстрым. Юзерам гораздо удобнее видеть обновление на той же странице, чем загружать новую. ","Уменьшение трафика. Поскольку браузер получает от сервера не всю страницу полностью, а только ограниченную запросом информацию, тратится меньше ресурсов на передачу данных.","Снижение нагрузки на сервер. Если приложение открывает страницы «на лету», достаточно один раз прогрузить стандартные элементы (шапку, меню, подвал), а остальные части загружать по необходимости. ","Быстрота и отзывчивость приложений. Чем меньше данных в запросе AJAX, тем быстрее придет ответ от сервера. В современных продуктах скорость и удобство — ключевые конкурентные преимущества.","Экономия ресурсов. Безлимитный интернет есть не у всех и не везде, а запросы AJAX используют ресурсы в минимальном режиме."]}},{"id":"0YS8Jzk3Ie","type":"paragraph","data":{"text":"Необходимо также понимать, что технология не универсальна и подходит не для всех ситуаций и приложений."}},{"id":"SEDp-2Qf4y","type":"header2","data":{"text":"Недостатки AJAX","level":2},"tunes":{}},{"id":"ddqQS76Ldc","type":"paragraph","data":{"text":"В числе основных минусов AJAX:"}},{"id":"CFlFAd2XWG","type":"list","data":{"style":"unordered","items":["Потенциальные проблемы с SEO-контентом. Содержание страниц, которое подгружается с помощью AJAX, часто недоступно для поисковиков, что негативно сказывается на индексации. Поисковые системы видят исходный ход, но не данные с серверов. Это может быть проблемой для сайтов, которые нуждаются в привлечении пользователей. Для сеошников работа с сайтами на AJAX — головная боль. ","Кэширование. Динамическое содержание может создать сложности с кэшированием, что приводит к загрузке неактуальных данных.","Зависимость от JavaScript. Пользователь может отключить JavaScript, что ограничит функциональность сайта. Данные не смогут прийти с сервера, интерактивного обновления не получится.","Усложнение проекта. Работа с запросами AJAX требует от разработчиков определенной квалификации. Они должны предвидеть различные внештатные ситуации, связанные с асинхронными запросами, и заранее прописать скрипты на такие случаи. Потребуется также продумать бэкенд — ответы сервера на различные запросы. "]}},{"id":"cPKILLkJr3","type":"hint","data":{"text":"При нестабильной связи AJAX может не получить ответа от сервера либо не отправить запрос. Такая ситуация нарушает логику загрузки страницы — ее придется все-таки перезагружать и начинать все с нуля.","fullWidth":true}},{"id":"m25BbIomw9","type":"header2","data":{"text":"Где используется AJAX","level":2},"tunes":{}},{"id":"8xsWuuo_Vf","type":"paragraph","data":{"text":"Технологию используют для улучшения пользовательского опыта при работе с сайтами и веб-приложениями. AJAX-запросы решают множество подзадач:"}},{"id":"dNvZk3rvif","type":"list","data":{"style":"unordered","items":["Динамическое обновление. С помощью AJAX обновляются отдельные элементы страниц — таблицы, списки, графики. Это особенно удобно на сайтах, где применяются фильтры — например, на страницах онлайн-магазинов.","Автозаполнение и поиск. AJAX используется для мгновенной выдачи результатов поиска. Юзер только начинает вводить текст в поисковую строку и уже видит релевантные варианты. Это удобно для формирования точных и подробных поисковых запросов. ","Отправка формы. Чтобы отправить данные заполненных форм, пользователю не нужно ждать обновления, что делает работу более плавной. Например, можно залогиниться после просмотра сайта, оставшись на той же странице. ","Загрузка данных для конкретного пользователя. В соцсетях или на сайтах с интерактивными опциями новые сообщения, уведомления и комментарии подгружаются без обновления страницы. ","Динамические интерфейсы. Этот процесс вы можете наглядно наблюдать на Гугл-картах и в подобных приложениях — по мере прокрутки подгружаются новые части территории. Аналогичная опция реализована на сайтах с интерактивными прогулками по гостиницам, музеям и другим локациям. "]}},{"id":"NTBQiV5Z96","type":"hint","data":{"text":"Иными словами, AJAX-запросы используются везде, где требуются обновления содержания без перезагрузки: чтобы получить список новых сообщений в чате или в общей ленте; подгрузить позиции на витрине товаров; увидеть рекламные баннеры и т.д.. В Ютубе на этой технологии основано сворачивание видео в компактный плеер в углу.","fullWidth":true}},{"id":"hwDYxx4Li3","type":"paragraph","data":{"text":"AJAX — незаменимый инструмент для разработки динамических интерфейсов и улучшения пользовательского опыта. Механизм основан на асинхронности работы браузера и сервера. При нормальной скорости интернета данные передаются мгновенно, так что пользователям даже не приходится ждать. При этом AJAX универсален и может работать с разными форматами данных и серверными API."}}],"version":"2.25.0"}

Ошибка в настройках сайта