AJAX

1. AJAX

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

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<contacts.length; i++){ alert('Contact #'+(i+1)+':\n\n'+ 'First Name: '+contacts[i].getAttribute('firstname')+'\n'+ 'Last Name: '+contacts[i].getAttribute('lastname') +'\n'+ 'Phone #: '+contacts[i].getAttribute('phone') +'\n'); } }

6. XML данные для примера <xml> <contacts> <person firstname="Joe" lastname="Smith" phone="555-1212" /> <person firstname="Sam" lastname="Stevens" phone="123-4567" /> </contacts> </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<json.contacts.length; i++){ alert('Contact #'+(i+1)+':\n\n'+ 'First Name: '+json.contacts[i].firstname+'\n'+ 'Last Name: '+json.contacts[i].lastname +'\n'+ 'Phone #: '+json.contacts[i].phone +'\n'); } }

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

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<json.contacts.length; i++){ var tr = document.createElement('TR'); var td1 = document.createElement('TD'); var td2 = document.createElement('TD'); tbl.appendChild(tr); tr.appendChild(td1); tr.appendChild(td2); td1.appendChild(document.createTextNode(json.contacts[i].lastname)); td2.appendChild(document.createTextNode(json.contacts[i].phone)); }}