Óêðà¿íñüêîþ
Ðóññêèé

Êðîñ-áðàóçåðíà àâòîìàòèçàö³ÿ AJAX.

Ó äàí³é ñòàòò³ îïèñàíèé ìåõàí³çì àñèíõðîííîãî «ñï³ëêóâàííÿ» ç ñåðâåðîì çà äîïîìîãîþ AJAX (Asynchronous Javascript and XML), ÿêèé äîçâîëÿº äèíàì³÷íî çàâàíòàæóâàòè äàí³ ç ñåðâåðà íå ïåðåçàâàíòàæóþ÷è ñòîð³íêó.

 

///////////////////AJAX START//////////////////////////

//Ôóíêö³ÿ ÿêà ñòâîðþº òà ïîâåðòຠîá’ºêò XMLHttpRequest äëÿ ðåàë³çàö³¿ AJAX-çàïèò³â

function createXmlHttpRequestObject(){

                var xmlHttp;

                try {xmlHttp = new XMLHttpRequest();}

                catch(e)

                {

                               var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");

                               for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){

                                               try{xmlHttp = new ActiveXObject(XmlHttpVersions[i]);}

                                               catch (e) {}

                               }

                }

                if(!xmlHttp)alert("Error creating the XMLHttpRequest object.");

                else return(xmlHttp);

}

 

//Ôóíêö³ÿ âèêîíóº â³äïðàâëåííÿ äàíèõ òà ïåðåíàïðàâëÿº íà ôóíêö³þ-îáðîáíèê ïðè îòðèìàíí³ â³äïîâ³ä³ ç ñåðâåðó.

requestXmlHttp = function(obj/*îá’ºêò XMLHttpRequest */,url/*Àäðåñà ñêðèïòà, ôàéëà, ñòîð³íêè äî ÿêî¿ çâåðòàºìîñü*/,hFunction/*Ôóíêö³ÿ-îáðîáíèê*/,method/*Ìåòîä ïåðåäà÷³ äàíèõ p=POST, g=GET*/,values/*Ðÿäîê ç ïàðàìåòðàìè (äàíèìè) ÿê³ íåîáõ³äíî ïåðåäàòè íà ñåðâåð*/){

                if(obj){

                               try{

                                               if(obj.readyState == 4 || obj.readyState == 0){

                                                               method = (method=='g')?'GET':'POST';

                                                               values = (values)?values:(method=='POST')?'':null;

                                                               obj.open(method, url, true);

                                                               obj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                                                               obj.send(values);

                                                               obj.onreadystatechange = function(){recieveXmlHttp(obj,hFunction);};

}

                                }

                                catch(e){ }

                }

};

 

//Ôóíêö³ÿ ÿêà ïåðåâ³ðÿº ñòàí â³äïîâ³ä³ readyState, òà ÿêùî âñå íîìàëüíî – âèêëèêຠôóíêö³þ-îáðîáíèê.

recieveXmlHttp = function(obj,f){

                if(!obj)return 1;

                if (obj.readyState == 4) {

                               if (obj.status == 200) {

                                               try {

                                                               response=obj.responseText;//³äïîâ³äü ó ôîðì³ òåêñòó

                                                               if(response!=''){f(response,obj.responseXML}//³äïîâ³äü ó ôîðìàò³ XML

                                               }

                                               catch(e){}

}

                               else {alert(obj.statusText);}

                }

};

 

/////////////////// AJAX  END//////////////////////////

 

 

Ïðèêëàä 1: Îíîâëåííÿ êóðñó âàëþò çà äîïîìîãîþ AJAX

//Ñòâîðþºìî îá’ºêò

XmlHttpCourse = createXmlHttpRequestObject();

 

//Çâåðíåííÿ äî ñåðâåðó

function checkcours(){

                               requestXmlHttp(XmlHttpCourse,"course.xml",appendCheckcours,'g','');

}

 

//Îáðîáêà ïîâåðíåíèõ äàíèõ

function appendCheckcours(cont,rXML)

{

                if(!cont)return false;

                try{USD = rXML.getElementsByTagName('USD').item(0).firstChild.data;}

catch(e){ USD = false;}

 

try{EUR = rXML.getElementsByTagName('EUR').item(0).firstChild.data;}

catch(e){ EUR = false;}

               

                d.getElementById('cusd').innerHTML = (USD)?((USD/1)?parseFloat(USD).toFixed(3):rcV.USD):'...';

                d.getElementById('ceur').innerHTML = (EUR)?((EUR/1)?parseFloat(EUR).toFixed(3):rcV.EUR):'...';

}

 

 

Ïðèêëàä 2: Äèíàì³÷íå çàâàíòàæåííÿ çì³ñòó

//Ñòâîðþºìî îá’ºêò

XmlHttpContent = createXmlHttpRequestObject();

 

//Çâåðíåííÿ äî ñåðâåðó

function loadcontent(num){

requestXmlHttp(XmlHttpContent,"indention"+num+".txt",function(cont){appendIndention(num,cont)},'g','');

d.getElementById('indention'+num).innerHTML = "Çàâàíòàæåííÿ...";

}

 

//Îáðîáêà ïîâåðíåíèõ äàíèõ

function appendIndention(num,content)

{

                if(!content)return false;

                d.getElementById('indention'+num).innerHTML = content;

}



Àâòîð: Ïåòêóñ Ìàêñèì; e-mail: me [ÀÒ] petkus.info