Динамические запросы и функции - скриптовые веб технологии.

Фреймворк jQuery - что это такое и как работает.

...

...

Большинство начинающих непрофессиональных веб-кодеров - HTML / CSS верстальщики домашних страничек ... Даже - поверхностное знание HTML (а старые спецификации не требовали даже подключения CSS, довольствуясь включением в код тега style) - позволяет создавать примитивные, но эффективно рабочие (в браузере) - интернет страницы ... И, конечно, большинство - позже услышали магическое слово jQuery, но столкнувшись с приличными трудностями его использования - отбрасывали за ненадобностью в сторону ...

Фреймворк jQuery.

Что же это такое, фреймворк jQuery и как он работает ... Если посмотреть на его код, то можно сломать не только ногу, но и голову ))) ... Для этого - я сильно обезжирил источник, удалив все печатные и непечатные символы, оставив только скриптовые конструкции языка, так как jQuery предназначен работать с JavaScript и HTML DOM объектной моделью документа ...

(){()(){()()()}()}((){[]{}(){}(){}(){}{}(){(||)}}) ... Ну и - так далее ...

Что сразу бросается в глаза, так это - неприменяемая в стандартном JS конструкция вложения функций, вида : ...
func1 ( ) { func2 ( func3 ( ) [ ] ... очень сильно запутанный, практически нечитаемый код ...
В отличии от обычно примера JS функции : func() {code;} ...

Ну - это и понятно, потому-что framework работает - как конструктор на прототипах функций ... Однако, если внимательно приглядеться, то - кое-что - найти все же можно ... toArray ... get ... pushStack ... each ... map ... slice ... first ... last ... eq ... end ... error ... noop ... isPlainObject ... isEmptyObject ... globalEval ... trim ... makeArray ... inArray ... merge ... grep ... map ... Здесь - вперемешку внешние и встроенные функции конструкций языка ... Дальше я разбираться не стал, так как становится понятно, что без знания основных команд и формы запроса / обращения к фрейворку - никаких подвижек, в изучении - не намечается ... Нужен справочник команд - и он есть, и, даже - на русском языке ...

# ... Wisdomweb - Онлайн учебники по веб программированию ... jQuery Учебник - Введение ...

Из справочника можно узнать, что не обязательно ломать код jQuery ... Достаточно скачать структурированную версию для разработчиков (development) с комментариями и внятным (не сжатым) читабельным кодом ... Очень хорошо ... Framework jQuery - одна из немногих web разработок, где отсутствует Hello World и обучение сразу начинается со сложных примеров ... Это не есть гуд ... А / потому-что - тырят друг у друга одинаковый контент с примерами, вместо того, чтобы написать что-то свое ...

Важное примечание : Яндекс Турбо XML мобильные страницы (сами, работающие на скриптах) - лояльно относятся к символам ( ), { }, [ ] и даже к внедренному коду скриптов, но не воспринимают HTML коды замены угловых скобок, с амперсандом : lt; и gt; ... В приведенных примерах - нельзя оставить их в чистом виде, по той же причине ... Поэтому, чтобы смысл был понятен - я заменил их на ...
-= открывающая угловая скобка ...
=- закрывающая угловая скобка ...

Что нужно знать главное про jQuery, чтобы начать с ним (фреймворком) работать ? ... То, что его девиз : меньше пиши кода, получай больше результатов ... Пока я с этим никак не согласен ))) ... Хотя-бы потому-что, чтобы писать - нужно знать, что писать ...

# Нужно подключить скрипт jQuery в коде HTML страницы (локально [скачать] или с загрузкой по интернет - неважно, как нравится) ... Подключение обычно выполняется между тегами head /head , как обычный JavaScript скрипт ...

# Framework не будет работать до полной загрузки страницы в браузер ... DOM / зеркальная структурированная копия всех элементов, идентификаторов и значений (включая содержимое) будет построена после полной загрузки веб-документа и только тогда будет позволена работа скриптам ... Окончание загрузки (document).ready - отслеживается ...

# Фреймворк jQuery тесно работает с селекторами / идентификаторами CSS, поэтому можно обращаться по любым доступным указателям на объект : -=tag id="name"=- или их комбинациям с подстановочными символами и служебными командами ...

# Символ $ - является указателем обращения к функциям jQuery ... Во многих примерах вызов функций также прописывается между head /head, но я думаю - это уже непринципиально (позже проверим) ... Конструкция запроса : ...

Символ обращения / вызова $ (документ) . готовность ( функция () {
Обязательно повторяется / продолжается обращение $ ( " указатель " ) . функция обработки ( код действия );
Закрывающие скобки с новой строки }); и точка с запятой, как окончание строки ...

# Это, конечно - примитивная конструкция запроса, но, она - уже вполне работоспособна ... Теперь самое время посмотреть первый пример кода на jQuery ... Фреймворк не содержит подобия команды ALERT() всплывающего сообщения или ECHO - поэтому текст вписывается прямо в код только-что испеченного документа ... Да, и у автора - вызов идет прямо из тела документа, а не из HEAD секции HTML (как - в большинстве примеров) ... Однако отсутствие команды не запрещает использование стандартной яваскрипт функции alert() - (без $ значка впереди ; получается смешанный jQuery + JS код скрипта) ...

Подключение скрипта в код страницы.

# ... Пример - jQuery Hello World ...

Подключаю библиотеку скрипта jQuery на страницу и модифицирую этот пример на действие от нажатия кнопки ... Кстати (на момент написания статьи) - я подключал библиотеку - прямо в документе, перед обработчиком ... Без подключения - jQuery код работать не будет ... Экспериментировал с версией v3.3.1 jquery.min.js ... Для такого простого примера, думаю - подойдет любая версия библиотеки ...

Важное примечание : локальное подключение скрипта было работоспособно, но при размещении страницы на сервере - возникли проблемы с загрузкой jQuery, поэтому пришлось подключить его через Google CDN (также - не в HEAD, а прямо в тексте) ...

-=script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"=- -=/script=- ...

Тест Hello World на jQuery.


-=script=-
$(document).ready(function(){
$("#testbtn1").click(function(){
$("#test1").html("Ура, работает! ... Hello World by JQuery ...");
});
});
-=/script=-

-=span id="test1"=- -=input type="button" id="testbtn1" value="Test HW 1"=- ... Кнопка тест JQuery ... -=/span=-

Для работы скриптов нужен тег с селектором - для вывода кода в текст документа ... В примере использован span с id=test1 ...


Так, как jQuery можно комбинировать с обычными JavaScript функциями - перепишу пример на alert() окно взаимодействия с пользователем ...

-=script=-
$(document).ready(function(){
$("#testbtn2").click(function(){
alert("Ура, работает! ... Hello World by JQuery ...");
});
});
-=/script=-

-=input type="button" id="testbtn2" value="Test HW 2"=- ... Кнопка тест alert() ...

Здесь : тег с селектором - не нужен ... Для вывода кода используется стандартное окно сообщения ... Такой способ взаимодействия называется - модальное окно ... Дальнейшая работа блокируется до тех пор, пока пользователь не отреагирует на сообщение - действием ... Через модальные окна реализованы диалоговые взаимодействия с пользователем и обработка привлечения внимания к важным или критическим ситуациям ... Обычные ответы : Ок, Отмена, Закрыть ...


Хорошо ... Простые примеры работают ... Но самая главная особенность Framework jQuery - это его умение работать с серверными асинхронными запросами AJAX для получения дополнительной информации и модификации части HTML кода / данных - без перезагрузки страницы (ускорение работы веб-приложений и снижение нагрузки на сервер) ... Однако - поведение AJAX - не совсем обычно и, также, имеет различные ограничения безопасности на исполнение, что не позволит получить результат ожидаемым образом ... Варианты ответа : функция / код запроса не поддерживается, ошибка обработки доступа, недостоверный ответ ... И только % 20 - 25 обработки правильных запросов принесет удовлетворительный ответ ... Причина в том, что обработчик отправки никак не обрабатывает запросы : либо передача данных / либо свой код непосредственно внутри функции успешной обработки ... Это сложно понять, сложно объяснить на простых примерах, поэтому - еще сложнее реализовать на практике ...

Простая задача : получить код ответа сервера - становится, практически, невыполнимой ...

Консоль разработчика в браузере.

Отступление : ... Во многих примерах ( для простоты / избегания сложности / или, неработоспособности конструкции - непонятно ... ) - данные сбрасываются в console.log ...

# ... JavaScript console.log() с примерами ...

Это функция в JavaScript, которая используется для печати любого типа переменных, определенных ранее в скрипте или просто печать любого сообщения, которое должно отображаться для контроля / отладки пользователем в визуальной консоли результатов работы скрипта ... Сама консоль находится в браузере ... Пример консоли отладки для браузера Google Chrome ...

Кстати, обратите внимание на значок в зеленом кружке - Toggle Device Toolbar ... Нажатие на эту иконку переключает отображение сайта в мобильный вид, что очень удобно для локального тестирования, включая ... Responsive представление для разных мобильных устройств ... Настройка ширины / высоты и Zoom ... Throttling (дросселирование / регулировка скорости работы CPU и сети) : Online, Mid-Tier / Low-End Mobile, Offline ... Rotate (поворот / вращение) между альбомным и портретным отображением ...

Пример JS консоли отладки Chrome ...

# ... Developer Mozilla Web API Console ... Интерфейсы веб API - MDN ...

Объект Сonsole ... Служит для доступа к средствам отладки браузера : Web Console / Веб-консоль или окно браузера / Window.console ... Почему вывод данных в отладку, а не, например, в alert() ? ... На первый взгляд - нет никакой разницы ... Возможно, изучая логи - проще читать код, понять результаты и найти требуемое решение ... Плюс - разные форматы отображения данных (если поддерживается браузером) ...

Пример отладки JavaScript в консоли ...

Технологии обмена данными между языками программирования веб приложений.

Также, в примерах скриптов - нет, нет / да и появляется обращение к JSON ...

# ... Введение в JSON ... ECMA-404 The JSON Data Interchange Standard ...

JSON / JavaScript Object Notation - простой текстовый формат обмена данными, основанный на языке программирования JavaScript и удобный для восприятия, как человеком - так и компьютером ... Поддержка конструкций C-подобных языков : C, C++, C#, Java, JavaScript, Perl, Python и других - делают JSON идеальным языком обмена данными ...

В поисках примеров кода и использования функций (кроме стандартной документации) - можно обратиться к сервису веб поиска Java и JavaScript кода ...

# ... Search for JavaScript code ... Get Codota AI autocomplete in your IDE ... Code / Module Index ...

Для чего здесь было так много слов ? Для того, чтобы понять суть взаимодействия языков программирования и природу ограничения CORS для запросов на стороне клиента ... Cross-origin resource sharing, технология ограничения браузером запросов к сторонним (от источника) серверам, основанная на правиле SOP / Same Origin Policy - блокирование работы с разными сайтами, без запрета на любые запросы в пределах сайта / оригинала, пока совпадают три признака : домен ; порт ; протокол ... Отсюда берут свое начало атаки XSS / Cross-Site Scripting, межсайтовый скриптинг и CSRF / XSRF - Сross Site Request Forgery, межсайтовая подделка запроса ... Другими словами - запрос к постороннему веб ресурсу будет запрещен, пока оригинальный сайт / источник не будет специально настроен отдавать в заголовке ответа Access-Control-Allow-Origin - список доверенных доменов, доступ к которым должен быть разрешен ...

# ... Эмуляция CORS на стороне клиента ... Кроссбраузерное решение некоторых пользовательских задач без расширений ... Как - адекватное решение прямого вмешательства в механизмы политики ограничения для возможностей работы кода скриптов JavaScript ...

Тестирование HTTP запросов скрипта на локальном сервере.

Описание работы этого механизма частично объясняет, почему я не могу с локальной странички отправить запрос на свой собственный сервер ... С другой стороны, кто мне мешает запустить XAMMP сервер и тестировать запросы localhost ? ... Если, через браузер, обратиться по адресу (http:// - необязательно) localhost/index.php ...

Будет выполнена переадресация на страницу http://localhost/dashboard/ ... Чтобы заполнить информацией консоль лога - возможно потребуется нажатие сочетания клавиш CTRL + R ...

# Примечание : ... Эти примеры на основе локального тестирования ... Сейчас, я - понятия не имею, какое ожидается поведение / как будут вести себя кнопки скриптов после размещении страницы на сервере ... Хотя, после загрузки документа в браузер пользователя - localhost на компьютере клиента должен остаться самим собой ... Не совсем верно ... Загруженная онлайн страничка будет придерживаться хоста загрузки ... Открытая сохраненная страничка будет придерживаться корня root / буквы диска HDD, на котором была сохранена ...

На вкладке Network расположены кнопки ресурсов : URL, ALL, XHR (and Fetch), JS (Scripts), CSS (Stylesheets), Img (Images), Media, Font, Doc, WS (Web Sockets), Manifest, Other ... Вся доступная информация о ресурсах, запросах, соединениях и ответах собирается в консоли ... На вкладке XHR содержится большинство технической информации о соединении ...


Следующий код работает для локального сервера ... Я использовал XAMMP и поэтому могу привести пример только на картинке ...

-=script=-
$(document).ready(function(){
$("#testbtn3").click(function(){
$.getJSON('http://localhost/dashboard/', function(r){ console.log(r.header); });
});
});
-=/script=-

-=input type="button" id="testbtn3" value="Test HW 3"=- ... Кнопка тест Dashboard - Console Log ...

XHR в консоли отладки, тест XAMMP index.php ...


XHR / Xml Http Request - это API поддержки серверных запросов скриптовых языков и часть технологии AJAX / Asynchronous JavaScript And XML ... Вызывающий скрипт напрямую получает данные ... Метод GET (Fetch, получение), ориентированный на использование структурированных XML данных - поддерживает любые типы текстовых данных, JSON, HTML и кодированные бинарные данные, например в base64 ... Метод POST не требует кодирования bin data ... В следствии ограничения кросс / серверных запросов и, по умолчанию, запрета пересылки данных без специального разрешения - в этом случае XHR не используется ...

# ... jQuery вариант jqXHR объекта XmlHttpRequest ... jQuery создает объект jqXHR и заполняет его доступными входными данными ...

# ... jQuery $.get() сложный эквивалент $.ajax() ... Шпаргалка jQuery ... Сложные конструкции функций базируются на основе более простых ...

В серверную папку C:\xampp\htdocs копирую этот файл (framework-jquery.htm), скрипт (jquery.3.3.1.min.js - начинал с локальными экспериментами подключения, затем переподключил на онлайн CDN, с загрузкой по интернету) и картинки, чтобы не было ошибок загрузки ресурсов в консоли ... Первый раз картинки грузятся ; после перезагрузки страницы - кэшируются, с указанием : Served from memory cache, resource size, Kb ...
Кнопкой Test 3 запускаю простую функцию ...
$.get("/index.php", function() {console.log();});

... Внимание ... Кнопки Test 3, 4 - будут работать, но не дадут результата при загрузке с сервера (только - локально) ... Кнопка Test 5 - будет работать частично ... Кнопка Test 6 - должна работать только при загрузке с сервера ... Ошибки запросов будут в логах консоли разработчика - в браузере ... В частности, в сообщениях разработчику - будут видны две строки действия скрипта : кнопка нажата, запуск скрипта ... конец скрипта ... И - ошибки доступа ...


Код скрипта - немного модифицирован от предыдущего ...

-=script=-
$(document).ready(function(){
$("#testbtn3").click(function(){
console.log("кнопка нажата, запуск скрипта");
$.get("/index.php", function() {
console.log();
});
console.log("конец скрипта");
});
});
-=/script=-

-=input type="button" id="testbtn3" value="Test 3"=-

Простой тест jQuery GET на localhost ...


Результат работы - минимальный лог в 4 строчки ... До сих пор остается непонятно, какие параметры и как - можно вывести в result ... До полной загрузки - скрипты не выполняются ... Сам jQuery никаких результатов - не выдает ... Все запросы нужно прописывать самостоятельно внутри успешного (или, неуспешного ?) выполнения функции скрипта ... В частности, в этом случае используются внутренние переменные jQuery скрипта : u, k - одна, из которых, и выводит текст страницы в лог консоли (подсмотрел на ошибке исполнения) ... То есть,

$.get("/index.php", function(u) {console.log(u);}); - уже выведет весь код страницы index.php в лог консоли ... Вместо u - может быть любая буква или слово ...
Получив код страницы - предполагаю, что с ним можно всячески манипулировать, выводить объекты DOM и их значения, изменять их, удалять или создавать новые, сортировать и менять стили отображения ... Все, что не запрещено ...

Адрес источника и обработчики событий.

Коды статусов отображаются ... Как их вывести в консоль ? ... Для начала - нужно разобраться, как работают функции обработчиков стандартных состояний jqXHR : done, fail, always ...

Чтобы получить доступ к jqXHR нужно представить объект, как переменную : var jqXHR = ... А в качестве значения параметра - указать саму jQuery функцию $.get() ... Я в шоке ! ... var jqXHR = $.get() ... Только после этого можно получить доступ к свойствам и функциям объекта jqXHR ... Смотрим пример - кнопка Test 4 ... Действие обработчиков, в этом примере, основано на окнах взаимодействия - alert() ... Сами обработчики - части объекта, поэтому обращаться к ним, как : jqXHR.done ... jqXHR.fail ... jqXHR.always ...


-=script=-
$(document).ready(function(){
$("#testbtn4").click(function(){
console.log("кнопка нажата, запуск скрипта");
var jqXHR = $.get("/index.php", function() {
jqXHR.done(function() { alert("Now is DONE"); })
jqXHR.fail(function() { alert("Now is ERROR"); })
jqXHR.always(function() { alert("Now is FINISH"); });
});
console.log("конец скрипта");
});
});
-=/script=-

-=input type="button" id="testbtn4" value="Test 4"=-

Так выглядит реакция скрипта, в браузере, при локальном запросе : ...

Работа обработчиков объекта jqXHR ...


Теперь, так как уже известно, что XHR / Fetch / Get знает много различной технической информации о соединении - можно попытаться выудить ее из данных ...

URL, адрес страницы - известен jQuery из свойств Windows (location, href), поэтому достаточно простой переменной, чтобы получить его ... Команды запроса адреса выполняются напрямую, без заморочек ...

Статус ответа сервера - это уже jqXHR ... Создать переменную = функция $.get и уже внутри нее создать новую переменную var status = jqXHR.status; потому-что получить результат можно только внутри функции ...

В функции get() указан URL = /index.php ... Если использовать localhost/index.php - то, в ответе будет localhost/localhost/index.php - не найдено ... То есть - при работающем локальном сервере запрос к ROOT / в корень - производится автоматически ...


-=script=-
$(document).ready(function(){
$("#testbtn5").click(function(jqxhr){
alert("Кнопка нажата, запуск скрипта ...");
var url = $(location).attr('href');
alert("Адрес страницы : "+url);
alert("Инициализация переменной jqXHR ...");
alert("Запрос статуса ... Он будет отображен только после завершения работы скрипта ...");
var jqXHR = $.get("/index.php", function() {
var status = jqXHR.status;
alert("Код ответа сервера : "+status);
});
alert("Конец скрипта ...");
});
});
-=/script=-

-=input type="button" id="testbtn5" value="Test 5"=-


Если у вас не работает XAMMP или другой локальный сервер - ответом будет : ...
GET http://localhost/index.php net :: ERR_CONNECTION_REFUSED ...

Если не будет страницы localhost/index.php - должно быть 404, редирект 301, 302 или что-то подобное, в зависимости от настроек сервера, включая : не авторизировано или 503 отказ в обслуживании - неважно, просто другой код ...

У Google Chrome, также - иная политика обработки CORS policy : запросы поддерживаются для схемы протокола : http, data, chrome, chrome-extension, https ...

Просто - интересно ... Чисто теоретически ... Если объект var jqXHR - был создан ... Он же существует вне функции и не разрушается при ее отработке ? ... Почему - нельзя обратится к нему позже ? Чтение переменной автоматически инициирует повторное исполнение функции ... Кажется, что-то / где-то про это писали на форумах ... Это крамольные фантазии, которые требуют фактической проверки ... Как, минимум - ожидается снижение функциональности объекта и доступ - только к статическим данным ...

Код ответа сервера.

Попытка получить код ответа с сервера ... При этом - видно, что страница techstop-ekb.ru/index.htm была загружена браузером и отдает код 200 [ сейчас этой страницы - вообще нет на сервере ))) ] ... Ограничение касается только исполняемого кода скриптов, которые могут вносить различные изменения и модификации в код оригинальной страницы и поэтому - просто не получают к ней доступа ...

Ограничение скриптов при меж серверных запросах ...

При локальном исполнении будет ошибка CORB / Cross-Origin Read Blocking - блокирование меж-серверного запроса ...

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


-=script=-
$(document).ready(function(){
$("#testbtn6").click(function(jqxhr){
alert("Кнопка нажата, запуск скрипта ...");
alert("Инициализация переменной jqXHR ...");
alert("Запрос статуса для techstop-ekb.ru/index.htm ... Он будет отображен только после завершения работы скрипта ...");
var jqXHR = $.get("https://techstop-ekb.ru/index.htm", function() {
var status = jqXHR.status;
alert("Код ответа сервера : "+status);
});
alert("Конец скрипта ...");
});
});
-=/script=-

-=input type="button" id="testbtn6" value="Test 6"=-


Выводы :

# Когда документ грузится с сервера - он как-бы принадлежит к окружению хоста загрузки ... Не знаю, как это реализовано, но / хотя страница имеет локальную копию - серверные скрипты в пределах хоста - работают ...

# Если страница загружена локально - для нее все хосты, кроме localhost - считаются чужими, и скрипты работать не будут ...

# Если из скрипта нужны запросы к другим хостам - должно быть прописано разрешение Access-Control-Allow-Origin - список доверенных доменов ...

# Необязательно подключать jQuery в HEAD, если не требуется исполнение кода в этой секции ... Достаточно просто указать вызов в коде страницы ... Не знаю, почему вызов библиотеки из файла не сработал на стороне сервера и пришлось использовать онлайн подключение из CDN ... Там, что-то указывалось, что если сервер не использует TLS выше версии v1.0 / v1.1 - то он может быть признан, как небезопасный, и исполняемый код скриптов может быть заблокирован ... Но, это уже - проблема, не веб / кодера - а системного администратора сервера / хоста ... Поэтому, для работы скриптов - достаточно перенаправить вызов библиотеки из кода страницы - на надежные CDN онлайн источники ...

...

...

Быстрый поиск по сайту :


Популярное : ...

... | ... Найти ... | ... Тюнинг ... | ... Радио ... | ... Читать ... | ... Торрент ... | ... Погода ... | ... Компьютер ... | ... Идея ... | ... Программы ... | ... Ремонт ... | ... Авто ... | ...

Пройти тест на коронавирус - онлайн, сейчас и сразу ... Быстрый экспресс-анализ по научным симптомам и признакам ...

TechStop-Ekb.ru : познавательные развлечения, техника, технологии ... На сайте, для работы и соответствия спецификациям - используются ... Протокол HTTPS шифрования для безопасного соединения с сервером и защиты пользовательских данных ... Антивирус DrWeb для превентивной защиты пользователей от интернет угроз и вирусов ... Ресурс входит в рейтинги Рамблер Топ 100 (познавательно-развлекательные сайты) и Mail Top 100 (авто мото информация) ...

Тех Стоп Екб RU (РФ) официальный сайт, популярные темы, погода, новости, обзоры с картинками, бесплатно, актуально, без регистрации ... Смотреть утром, днем, вечером и ночью - круглосуточно онлайн ...

Меню раздела, новости и новые страницы.

Фреймворк jQuery - что это такое и как работает.


© techstop-ekb.ru, 2016++, 2020.