Методы класса XMLHttpRequest

abort() отменяет текущий запрос;

getAllResponseHeaders () возвращает полный список HTTP-заголовков в виде строки;

getResponseHeader(headerName) возвращает значение указанного заголовка;

open (method, URL, async, userName, password) определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме;

send (content) отправляет запрос на сервер;

setRequestHeader (label, value) добавляет HTTP-заголовок к запросу.

Свойства класса XMLHttpRequest

Onreadystatechange обработчик события, которое происходит при каждой смене состояния объекта;

readyState возвращает текущее состояние объекта (0 - неинициализирован, 1 - открыт, 2 – отправка данных, 3 – получение данных и 4 – данные загружены);

responseText текст ответа на запрос;

responseXML текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM;

status возвращает HTTP-статус в виде числа (404 – «Not Found», 200 – «OK» и т.д.)

statusText возвращает статус в виде строки («Not Found», «OK» и т.д.)

Преимущества

Экономия трафика

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

Уменьшение нагрузки на сервер

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

Ускорение реакции интерфейса

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

Недостатки

Отсутствие интеграции со стандартными инструментами браузера

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

Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Проблему можно успешно решить с помощью History.pushState.

Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest)

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

Старые методы учёта статистики сайтов становятся неактуальными

Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.

Задание: Создать web-страницу с двумя таблицами:

· должна быть предусмотрена возможность сортировки по одному — двум столбцам в каждой таблице;

· должна быть предусмотрена возможность изменения содержимого (удаление, редактирование и добавление) в одной таблице;

· таблицы должны изменяться динамически: без перезагрузки всей страницы;

· при заполнении данных должны учитываться их тип (определённый в физической модели IDEF1x) и формат (наличие первой заглавной буквы, только символом кириллицы, количества нулей после запятой, запрет на пустую строку и т.д.);

· выделение неверно заполненного поля (например, изменением цвета подписи) и предоставление примера правильного заполнения;

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

Задачи:

1. Изучить основные подходы к созданию динамических web–страниц

2. Изучить способ реализации технологии AJAX

3. Изучить назначение, методы и свойства класса XMLHttpRequest

4. Изучить проблемы построения кроссбраузерных приложений на основе класса XMLHttpRequest

5. Изучить вопросы передачи информации между «клиентом» и «сервером» (кодировка,безопасность)

 

 

Ст руктура отчёта:

1. Титульный

2. Содержание

3. Описание целей и задач

4. Описание системы

5. Исходные коды всех файлов, необходимые для развёртывания работоспособной версии работы

 

Пример лабораторной работы №6:

XML файл: остается без изменений

XSLT файл: остается без изменений, только между тегами head добавляется ссылка на JavaScript < script src =" sort. js "></ script >

PHP добавление client: остается без изменений

PHP  добавление employee: остается без изменений

PHP удаление: остается без изменений

PHP  замена: остается без изменений

JavaScript:

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

var TableSort = function (idTbl, defSortCol, firstRow, classes) {

var curSortCol = defSortCol; // номер колонки, по которой выполнена текущая сортировка, считаем с 0

var curImgCol = defSortCol; // номер колонки, у которой отрисовать картинку, показывающую направление сортировки, считаем с 0

var curSortUp = true; // направление сортировки вверх

var curIdTbl = idTbl; // id таблицы, в которой производим сортировку

var numColTr = (firstRow == null)? 1: firstRow; // номер строки, с которой идут данные, считаем с 0

if (classes == null) { // нужно ли учитывать классы для строк

var style = false;

} else {

var style = true;

var needClasses = classes [0]    // список классов, которые нужно сохранить

var listClasses = classes [1]; } // список классов, которые чередуются

 var tbl = document.getElementById(curIdTbl);

var allImgs = new Array(); // all imgs-arrow

allThs = tbl.getElementsByTagName('tr').item(0).getElementsByTagName('th');

for (i=0; i<allThs.length; i++){

if (allThs.item(i).getElementsByTagName('img')!= null) {

allImgs[i] = allThs.item(i).getElementsByTagName('img').item(0);

} else {

allImgs[i] = null; } }

var tblData = new Array();

this.initSort = function (newCol, imgCol) { // начинаем сортировку по колонке newCol, картинку рисуем у колонки imgCol

if (newCol == curSortCol) {

curSortUp =! curSortUp; // кликнули на отсортированную колонку, меняем сортировку на обратную

 } else {

curSortCol = newCol; // сортируем по новой колонке

curImgCol = (imgCol == null)? newCol: imgCol;

curSortUp = true;   }

showArrow();

 getDataTable();

 showSortTable();

 if (style) {

doStyle ();   } };

function showArrow(){ // показать / изменить стрелку

for (i=0; i<allImgs.length; i++){

 if (allImgs[i]!= null) {

if (i == curImgCol) {

 allImgs[i].style.visibility = "visible";

if (curSortUp) {

allImgs[i].src = "./img/up.png";

 } else {

allImgs[i].src = "./img/down.png"; }

} else {

allImgs[i].style.visibility = "hidden"; } } } }

function getDataTable () { // получить новые данные из таблицы

allTrs = tbl.getElementsByTagName('tr');

for (i=numColTr; i<allTrs.length; i++){

tblData[i-numColTr] = new Array();

for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) {

tblData[i-numColTr][j] = allTrs[i].getElementsByTagName('td').item(j).innerHTML; }

if (style) {

 tblData[i-numColTr] [allTrs[i].getElementsByTagName('td').length]=allTrs[i].className; } }

 tblData.sort(_sort);

if (!curSortUp) {

 tblData.reverse(); } }

function _sort(a1, b1) { // правила сортировки

var a = a1[curSortCol];

var b = b1[curSortCol];

if (parseFloat(a) && parseFloat(b)) {

return parseFloat(a) - parseFloat(b);

} else {

 if (a.toLowerCase() < b.toLowerCase()) {

 return -1;

} else if (a.toLowerCase() > b.toLowerCase()) {

return 1;

} else {

return 0;  } } }

function showSortTable() {

allTrs = tbl.getElementsByTagName('tr');

for (i=numColTr; i<allTrs.length; i++){

for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) {

allTrs[i].getElementsByTagName('td').item(j).innerHTML = tblData[i-numColTr][j]; }

if (style) {

allTrs[i].className=tblData[i-numColTr][allTrs[i].getElementsByTagName('td').length]; } } }

function doStyle(){

allTrs = tbl.getElementsByTagName('tr');

for (i=numColTr; i<allTrs.length; i++){

if (allTrs[i] == null) {

continue; }

if(needClasses.indexOf(allTrs[i].className)!= -1) {

continue; }

allTrs[i].className = listClasses[(i % listClasses.length)]; } } }

 

Рис. 10. Сортировка таблицы client по столбцу name