DOMTimeStampДата и время в приемлемом для конкретного языка формате. Например, в JavaScript это будет объект Date, а в Java — целое число типа long, содержащее количество миллисекунд. Ниже приведено краткое описание всех интерфейсов DOM с указанием уровня модели (DOM 1 или DOM 2), в которой определено то или иное свойство интерфейса. Спецификации W3C написаны на платформо-независимом языке IDL. Мы же приводим их в соответствии с синтаксисом JavaScript, который на сегодня является основным сценарным языком. Вместе с описание стандарта мы приводим краткое описание его реализации в объектных моделях Microsoft и Gecko. При этом следует учитывать, что реализации Microsoft для XML и HTML совершенно независимы (они реализуются соответственно программными компонентами XMLDOM и MSHTML), тогда как в Gecko объектная модель одинакова для HTML- и XML-документов. Основное внимание в последующем изложении уделено DOM для HTML; XML DOM подробно будет рассмотрена в Части VIII. 24. jQuery. Назначение и принципы синтаксиса. Работa с DOM. jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл: < head > < script type="text/javascript" src="путь к jQuery.js"></ script ></ head >Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать её синоним — jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким, можно писать его следующим образом: jQuery(function ($) { // здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery })Работу с jQuery можно разделить на 2 типа: · Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML, попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса. · Вызов глобальных методов у объекта $, например, удобных итераторов по массиву. Типичный пример манипуляции сразу несколькими узлами DOM заключается в вызове $ функции со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов HTML-страницы. Эти элементы затем обрабатываются методами jQuery. Например, $("div.test").add("p.quote").addClass("blue").slideDown("slow");находит все элементы div с классом test, а также все элементы p с классом quote, и затем добавляет им всем класс blue и визуально плавно спускает вниз. Здесь методы add,addClass и slideDown возвращают ссылку на исходный объект $("div.test"), поэтому возможно вести такую цепочку. Методы, начинающиеся с $., удобно применять для обработки глобальных объектов. Например: $.each([1,2,3], function () { document.write(this + 1);});добавит на страницу 234. $.ajax и соответствующие функции позволяют использовать методы AJAX. Например: $.ajax({ type: "POST", url: "some.php", data: {name: 'John', location: 'Boston'}, success: function (msg){ alert("Data Saved: " + msg); }});В этом примере идет обращение к скрипту some.php с параметрами name=John&location=Boston, и полученный результат выдается в сообщении посредством alert(). Пример добавления к элементу обработчика события click с помощью jQuery: $("a").click(function () { alert("Hello world!"); });В данном случае при нажатии на элемент <A> происходит вызов alert("Hello world!").
25. Технология Ajax. Основные принципы работы. Основные объекты. Примеры использования. JSON. AJAX — не самостоятельная технология, а концепция использования нескольких смежных технологий. AJAX базируется на двух основных принципах: · использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например: · с использованием XMLHttpRequest (основной объект); · через динамическое создание дочерних фреймов[1]; · через динамическое создание тега <script>[2]. · через динамическое создание тега <img>, как это реализовано в google analytics. · использование DHTML для динамического изменения содержания страницы; Действия с интерфейсом преобразуются в операции с элементами DOM (англ. Document Object Model), с помощью которых обрабатываются данные, доступные пользователю, в результате чего представление их изменяется. Здесь же производится обработка перемещений и щелчков мышью, а также нажатий клавиш. Каскадные таблицы стилей, или CSS (англ. Cascading Style Sheets), обеспечивают согласованный внешний вид элементов приложения и упрощают обращение к DOM-объектам. Объект XMLHttpRequest (или подобные механизмы) используется для асинхронного взаимодействия с сервером, обработки запросов пользователя и загрузки в процессе работы необходимых данных. Три из этих четырех технологий — CSS, DOM и JavaScript — составляют DHTML (англ. Dynamic HTML). По мнению некоторых специалистов[ каких? ] средства DHTML, появившиеся в1997 году, подавали большие надежды, но так и не оправдали их. В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML. Пример использования JSON Следующий пример Javascript-кода показывает, как браузер может использовать XMLHttpRequest, чтобы запрашивать с сервера объект в формате JSON (cерверная часть программы опущена; в ней должен быть размещён код, отправляющий данные в формате JSON-строки в ответ на запросы по url). var the_object; var http_request = new XMLHttpRequest();http_request.open("GET", url, true);http_request.send(null);http_request.onreadystatechange = function () { if (http_request.readyState == 4) { if (http_request.status == 200) { the_object = JSON.parse(http_request.responseText); } else { alert("There was a problem with the URL."); } http_request = null; }};Заметим, что данный пример применения XMLHttpRequest не является универсальным для всех браузеров (для браузеров, основанных на Internet Explorer, Opera, Safari и Mozilla, в коде должны быть те или иные отличия). Возможности применения XMLHttpRequest ограничены из-за правила ограничения домена (same origin policy): URL ответа на запрос должен находиться в том же DNS домене, что и сервер, на котором находится страница, запрашивающая ответ. В качестве альтернативы применяется подход JSONP, включающий в себя использование закодированного вызова функции, передающегося между клиентом и сервером, чтобы клиент мог загружать закодированные в JSON данные со сторонних доменов, и уведомлять о завершении вызывающую сторону, хотя это приводит к некоторым рискам для безопасности и дополнительным требованиям к серверу. Как вариант, в коде страницы можно использовать элементы <iframe> для асинхронного запроса JSON данных, или просто <form action="url_to_cgi_script" target="name_of_hidden_iframe">. Эти подходы были распространены до появления широкой поддержки XMLHttpRequest. Также можно использовать для передачи JSON-данных динамические теги <script>. С помощью этого метода можно обойти правило ограничения домена (same origin policy), но он приводит к появлению уязвимого кода. В качестве более безопасной альтернативы было предложено использовать JSONRequest.
|
