30. Технология Ajax: разновидности запросов на сервер по типу запрашиваемых файлов и методу передачи данных, кэширование результата при get-запросах.

Метод объекта XMLHttpRequest() open создает запрос , метод send выполняет отправку

Open(метод передачи, url,способ передачи запроса)

Send([данные]); (при post)

Var xhttp;

Xhttp= new XMLHttpRequest();

Xhttp.open (“get”,”textfile.txt”,true);

Xhttp.send();

кэширование get –может прислать данные запроса из КЭШа а не данные нового запроса

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

get – проще и быстрее при запросах, однако post более надежен и безопасен. Рекомендуется использовать get, однако его использование недопустимо если:

• Необходимо передать секретные данные

• Необходимо передать большой объем данных

• Необходимо получит не кэшированный результат

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

xhttp.open(‘GET’,’add.php?x=’+x’&y=’+y+’&t=’+math.random(), true);

31. Технология Ajax, обработка ответа сервера: возможные состояния готовности сервера, проверка состояния готовности, определение кода ответа сервера на запрос. Использование jQuery для генерации Ajax-запросов.

1. Состояние готовности сервера

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

3. Принятие ответа сервера

4. Передача данных на сервер

1.

Что бы узнать состояние готовности сервера используется свойство readyState

Всего существует 5 состояний

Состояние готовности сервера:

• Запрос не инециализорован(0)

• Установлено соединение с сервером(1)

• Запрос получен (2)

• Идет обработка запроса (3)

• Обработка запроса закончена и ответ готов (4)

Во время обработки запроса свойство readyState поочередно принимает значения от 0 до 4.

Событие onreadystatechange выполняет код при изменение содержимого свойства readyState (в теле прописывается ограничение)

Xhttp=new XMLHttpRequest();

Xhhtp.onreadystatechange=function()

{

If (xhttp.readystate=4)&&(xhttp.status==200)

{

Document.getElementById(‘res’)=xhttp.responseText;

Xhttp.open(“get”,filetext.txt,true);

Xhttp.send();

}

}

2.

Код ответа сервера можно получить при помощи свойства status

• 200 – успешно обработано

3

Для того что бы принять ответ сервера, используется свойство resposeText и resposeXML

resposeText –хранит ответ сервера как строку символов

resposeXML – хранит ответ сервера виде XML файла

4

Пример выполняющий суммирование двух чисел

Var x=document.getElementById(‘t1’).value;

Var y=document.getElementById(‘t2’).value;

var xhttp=new XMLRequest();

xhttp.onreadystatechange=function() {

if (xhttp.readyState==4)&&(xhttp.status==200){

document.getElementById(‘res’).innerHTML=xhttp.responseText;}}

xhttp.open(‘GET’,’add.php?x=’+x’&y=’+y, true); //add.php?x=5&y=6

xhttp.send();

пример 2, специально для нади

Var x=document.getElementById(‘t1’).value;

Var y=document.getElementById(‘t2’).value;

var xhttp=new XMLEequest();

xhttp.onreadystatechange=function {

if (xhttp.readyState==4)&&(xhttp.status==200){

document.getElementById(‘res’).innerHTML=xhttp.responseText;}}

setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’); //определяется тип передоваемого содержимога, в данном случае данные с формы

xhttp.open(‘post’,’add.php’,true);

var str=’x=’+x+’&y=’+y;

xhttp.send(str);

5.4 Генерация и обработка XML данных

1. Работа с DOM JS

2. Свойства responseXML

3. Обработка ошибок связанных с некорректной структурой XML

4. Генерация XML-документа в PHP

5. Обработка ошибок на стороне сервера

1.

DOM – это объектная модель используемая для HTML и XML документов.

Каждый HTML или XML тэг образует узел дерева с типом элемент. Для представления текста создаются узлы с типом текст

Навигация в DOM

Доступ к элементам DOM и текстовым узлам начинается с объекта документ document

Получить корень дерева можно 2 способами:

• Document.documentElement

• Document.body

Оба способа практически аналогичны, однако при доступе document.body в момент обработки тега head он может быть равен null

Из узла родителя можно получить все дочерние элементы, путем обращения к массивам childNodes или children

Массив childNodes хранит все дочерние элементы включая текстовые(нумерация как и везде с 0)

Массив children содержит только дочерние узлы соответствующие тэгам, т.е. узлы элементы

<html>

<head> </head>

<body>

<div>

Na4alo </div>

<ul>

<li> soderjanie

</ul>

<div> finih</div>

</body>

</html>

Body

# div # ul # div #

Na4alo # li # finih

Soderjanie

Для быстрого доступа к первому и последнему потомку используется свойство firstchild (childNodes[0]) и lastchild(childNodes[childNodes.length-1])

FirstelementChild lastElementChild(только узлы элементы) аналоги firstChild lastChild.

Ссылки на родительский узел используется свойство parentNode

Свойство previousSibling и nextSibling дают доступ к левому и правому соседу

Так же к свойствам DOM узлов относятся :

• nodeType тип узла возвращает 1, если узел –элемент, 3 – текст

• nodeName/tageName –название элементов(тэгнаме), а также элементов и текстовых узлов (ноденаме)

• innerHTML – изменение\получение содержимого элемента в виде HTML

• outerHTML –содержит полный HTML код узла элемента

• nodeValue/data – содержимое текстового узла или комментария

Для создания элементов используется метод createElement для создания текстового узла- createtextNode

Document.createElement(‘name teg’);

Document.createTextNode(‘ tekst’);

(на странице не размещены)

Для того что бы добавить элемент на страницу используются методы appendChild и insertBefole

parElem.appendChild(elem);

parElem.insertBefore(elem,nestSibling); (parElem –родительский элемент, при создание заменяется на имя родительского)

пример:

body

div div2

1 2

<div id=’i1’> B</div>

Создание и добавление элемента на страницу между div div2:

Var myDiv=document.createElement(‘div’);

myDiv.id=’i1’;

myDiv.innerHTML=’B’;

body.insertBefore (myDiv, body.children[1]);

Для удаления узлов используется 2 метода.

Для удаления узла используется метод removeChild для замены replaceChild

parElem.removeChild(elem);

parElem.replaceChild(elem,changeElem); (changeElem имя элемента на который заменяем)

Свойства responseXML

Test.xml :

<books>

<book>

<title> </title>

<language> </language>

<language> </language>

</book>

</books>

Запросить док, найти первую книгу(содержимое первого тэга title), вывести название и все языки, на который переведена.(примечание тэги language определены только для первой книги/ считываются все тэги language)(div id=”ajax”)

Var xhrrp=newXMLHttpRequest();

Xhttp.onreadystatechange=function(){

If(xhttp.readyState==4&&xhttp.status==200){

Var z==xhttp.resposeXML;

Var str=”name 1 book”+z.getElementsByTagName(‘title’)[0].childNodes[0].nodeValue;

Str+=”</br>Soderjimoe language”;

Var lang=z.getElementsByTagNAme(‘language’);

For(i=0;i<lang.length;i++){

Str+=lang[i].childNodes[0].nodeValue+”/”;

}

Document.getElementsById(‘ajax’).innerHTML=str;

}}

//создание и отправка запроса

Xhttp.open (“Get”,”test.xml”,”true”);

Xhttp.send ();

Language есть в разных тэгах

Var b=z.getElementsByTagName(‘book’);

For(i=0;i<b.length;i++){

For (j=0; j<b.children.length;j++){

If b[i].children[j].tageName==’LAGUAGE’){

Str+=b.[i].children[j].childNode[0].data;

}

}