AJAXAJAXТехнология AJAX Asynchronous JavaScript and XML Обычный вызов функции JavaScript приостанавливает отображение страницы, пока он не завершится При. - презентация

1 AJAX

2 Технология AJAX Asynchronous JavaScript and XML Обычный вызов функции JavaScript приостанавливает отображение страницы, пока он не завершится При использовании загрузки функции (или данных) отображение страницы также приостанавливается Идея в том, чтобы послать запрос на данные, а обработать их в момент их получения В момент получения данных происходит специальное событие

3 Создание объекта XMLHttp if(typeof(XMLHttpRequest)!='undefined'){ var getXMLHttpObj = function(){ return new XMLHttpRequest(); } } else { var getXMLHttpObj = function(){ return new ActiveXObject('Microsoft.XMLHTTP'); }

4 Запрос объекту XMLHttp var oXml = getXMLHttpObj(); oXml.open('GET', 'getData.php', true); oXml.onreadystatechange = processingFunction; oXml.send(); function processingFunction(){ if(oXml.readyState!=4) return; // запрос не выполнен // Результаты обрабатываются здесь. }

5 Пример получения XML данных function processingFunction(){ if(oXml.readyState!=4) return; var xmlDoc = oXml.responseXML; var contacts = xmlDoc.selectNodes('/xml/contacts/person'); alert('There are '+contacts.length+' contacts!'); for(var i=0; i

6 XML данные для примера

7 Пример получения текстовых данных function processingFunction(){ if(oXml.readyState!=4) return; var json = eval('('+oXml.responseText+')'); alert('There are '+json.contacts.length+' contacts!'); for(var i=0; i

8 Текстовые данные для примера {contacts:[ {"firstname":"Joe", "lastname":"Smith", "phone":" "}, {"firstname":"Sam", "lastname":"Stevens", "phone":" "} ]}

9 Пример изменения страницы function doneLoading(oXML){ if(oXML.readyState!=4) return; var json = eval('('+oXML.responseText+')'); var tbl = document.getElementById('contactListTable'); for(var i=tbl.childNodes.length-1;i>0;i--){tbl.removeChild(tbl.childNodes[i]);} for(var i=0; i