Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Використанння елементів технології AJAX. Опис мовою XML
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Інститут післядипломної освіти
Факультет:
Не вказано
Кафедра:
Кафедра програмного забезпечення
Інформація про роботу
Рік:
2024
Тип роботи:
Звіт до лабораторної роботи
Предмет:
Інші
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ "ЛЬВІВСЬКА ПОЛІТЕХНІКА"
ІНСТИТУТ ПІСЛЯДИПЛОМНОЇ ОСВІТИ
КАФЕДРА ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
/
ЗВІТ ДО ЛАБОРАТОРНОЇ РОБОТИ №2 на тему:
"Використанння елементів технології AJAX.
Опис мовою XML"
Мета: Оволодіти технологією Ajax та методами створення сценаріїв взаємодії з сервером.
КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ
Головним об’єктом Ajax для обміну клієнта з сервером є XMLHttpRequest (IE6 потребує замість нього ActiveXObject ).
В синхронному режимі користувач чекає на нову сторінку, в асинхронному – працює зі сторінкою, фіксуючи в певні моменти оновлення даних на сторінці. Технологія Ajax зменшує потоки даних для трафіку обмін у. Схема взаємодії елементів клієнта та сервера (мова, модель, об’єкти, методи та властивості) позначена на рис. 1.1.
Методи основного об’єкта XMLHttpRequest в AJAX:
abort,
getAllResponseHeaders,
getResponseHeader,
open("GET", url, true) - відкриває з’єднання з сервером,
send(data), send(null) – надсилає запит (з даними або без) на сервер,
setRequestHeader – формує заголовок протоколу запиту,
onreadystatechange – вказує на зміну стану властивоті readyState,
readyState – властивість, що містить статус об’єкта XMLHttpRequest:
responseText - містить текстовий файл, отриманий від сервера,
responseXML - містить XML файл, отриманий від сервера,
status - 200 - успішне завершення, 404 –файл не знайдено,
statusText - текст повідомлення.
Наведемо приклад використання об’єкта XMLHttpRequest, що буде фрагментом обробника певної події
var url=”http://www.xul.ua/somefile.xml';
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function_A;
ajax.open("GET", url, true);
ajax.send(null);
Поширеною мовою опису даних є XML. Мова XML призначена для опису та зберігання даних ієрархічного типу. Вона використовується для зберігання та обміну форматизованими даними між різними програмними системами:
дані Web-серверів;
дані результатів запитів до серверів баз даних;
дані Web-сервісів;
новини RSS блоків.
мова XHTML є підмножиною XML.
Виконанння роботи:
Умова завдання:
Вибрати тематику веб-сайту.
Засобами AJAX створити програму формування запиту на веб-сайті.
Розробити програму засобами AJAX опрацювання відповіді на веб-сайті.
Розробити програму модифікації вузлів дерева DOM засобами AJAX.
Приклад запиту Ajax XML
Для прикладу створимо форму на нашому локальному сайті test.ua, яка буде слугувати для виконання реєстрації даних користувача та видавати відподь проуспішне отримання даних
XML форма
Форма XML це текстовий опис структурованих даних. Наприклад, ми можемо описати людину за допомогою наступного синтаксису.
<data>
<type>text</type>
<format>XML</format>
<value>Текстовий вміст</value>
</data>
Наведений опис і є XML формат опису даних. XML призначений в першу чергу для для зберігання і перенесення складних даних, наприклад, вмісту баз даних, між програмами і навіть різними платформами.
Реалізація AJAX запиту в XML формі
Нижче представлені рядки для введення, даних з які потім відправляються на сервер. Приклад простенький, але наше завдання, не здивувати своїм умінням, а розповісти побільше про AJAX запит.
Реалізація AJAX запиту в XML формі
/
Вкажіть своє ім'я:
Вкажіть своє прізвище:
Ваш вік:
Відповідь сервера: Дані успішно отримано!!!
Скрипт, який використовується при AJAX XML запиті
<script type="text/javascript">
var human = new Object (); / / в цьому об'єкті будутбь збиратись дані про користувача
var xmlstr = "" ;
var xmlHttp = new XMLHttpRequest ();
var url = " script / php / getXML.php " ;
function sendData ( ) {/ / загальне управління запитом
xmlstr = getData ();
if (! checkInputs ( )) return ;
xmlHttp = createAjax ();
if ( xmlHttp ) {/ / xmlHttp was created
try {
xmlHttp.open ( " POST " , url , true ) ;
xmlHttp.setRequestHeader ( " Content- Type " , " text / xml " ) ;
xmlHttp.setRequestHeader ( "Accept - Charset " , " windows -1251 " ) ;
xmlHttp.onreadystatechange = updPage ;
xmlHttp.send ( xmlstr ) ;
} Catch ( e ) {
alert ( " Неможливо з'єднатися з сервером : \ n " + e.toString ( ) + "\ n " + e.description ) ;
}
} Else { alert (' xmlHttp undefined '); } / / xmlHttp не визначений
}
function getData ( ) {/ / опитує рядки введення даних
human.name = document.getElementById ( " name " ) . value ;
human.family = document.getElementById ( " family " ) . value ;
human.age = document.getElementById ( " age " ) . value ;
return "" +
"" + Escape ( human.name ) + "" +
"" + Escape ( human.family ) + "" +
"" + Escape ( human.age ) + "" +
"" ;
}
function createAjax ( ) {// створюємо об'єкт , в якому зібрані функції передачі даних на сервер
var obj ;
try {
obj = new XMLHttpRequest ();
} Catch ( e ) { alert (' e :' + e.toString ( )) ;
try {
obj = new ActiveXObject ( " Msxml2.XMLHTTP " ) ;
} Catch ( e1 ) { alert (' e1 :' + e1.toString ( )) ;
try {
obj = new ActiveXObject ( " Microsoft.XMLHTTP " ) ;
} Catch ( e2 ) { alert (' e2 :' + e2.toString ( )) ;
obj = false ;
}
}
}
if (! obj ) alert ( " Об'єкт xmlHttp не створений " ) ;
else return obj ;
}
function checkInputs ( ) {/ / перевіряємо введення на відсутність порожніх полів
var ret = true ;
if ( human.name == "" | | human.family == "" | | human.age == "" ) {
alert (' Ви заповнили не всі поля !') ;
ret = false ;
}
return ret ;
}
function updPage () { функція , обробник відповідей
var response = document.getElementById ( " response " ) ;
if ( xmlHttp.readyState == 4 ) {
if ( xmlHttp.status == 200 ) {
try { response.innerHTML + = xmlHttp.responseText ;}
catch ( e4 ) { alert ( " Помилка доступу до вмісту сторінки " ) ;}
}
else if ( xmlHttp.status == 404 ) { alert ( " Requested URL is not found . " ) ;}
else if ( request.status == 403 ) { alert ( " Access denied . " ) ;} ;
}
}
</ script >
Використаний скрипт з дозволяє перетворити дані в XML формат. Дані на сервер відправляються методом POST, про що і зазначено в методі xmlHttp.open , крім того , в методі xmlHttp.setRequestHeader ми повідомляємо серверу, що відправляємо дані в XML форматі і вказуємо кодування символів. Оскільки дані відправляються не через адресний рядок, а в тілі запиту, у нас змінився вид методу xmlHttp.send (xmlstr), йому в параметрах треба передати XML рядок для відправки на сервер.
DOM - Об'єктна модель документа
Об'єктна модель документа (Document Object Model - DOM) є стандартом, запропонованим веб- консорціумом, і регламентує спосіб представлення вмісту документа (зокрема веб- сторінки) у вигляді набору об'єктів. Під вмістом розуміється все, що може перебувати на веб-сторінці: малюнки, посилання, абзаци, текст і т. д. На відміну від об'єктної моделі браузера ( BOM ), яка унікальна для кожного браузера, об'єктна модель документа є стандартом і повинна підтримуватися всіма браузерами. І хоча на практиці підтримка DOM реалізована не повною мірою, проте необхідно прагнути слідувати вимогам цього стандарту як виробникам браузерів, так і розробникам веб -сайтів.
Слід зауважити , що DOM може застосовуватися не тільки у веб-сторінках , але і до будь інших документам. Зокрема, вона може використовуватися з будь-якими словниками XML , причому одним з таких словників є HTML, а точніше, XHTML.
DOM розбитий на три рівні. Перший рівень є першою версією стандарту і поки що єдиною закінченою. Він складається з двох розділів: перший є ядром і визначає принципи маніпуляції зі структурою документа (генерація і навігація), а другий присвячений поданням в DOM елементів HTML, що визначаються однойменними тегами.
Другий і третій рівні описують модель подій, доповнюють таблиці стилів, проходи за структурою.
Подання документа у вигляді дерева
У DOM документ представляється у вигляді дерева (рис. 1) , що є однією з найбільш уживаних структур в програмуванні. Це забезпечує уніфікований спосіб навігації по документу.
<html>
<head>
<tytle>Приклад представлення html документа у вигляді дерева</tytle>
<head>
<body>
<h1>Представлення html документа у вигляді дерева</h1>
<script language = "JavaScript">
<p> <script>
...
</script></p>
</body>
</html>
25.01.2014 19:01-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора