Easy Web Development: AJAX si XMLHttpRequest

Pentru a putea face o cerere catre server de pe calculatorul personal, intai si intai, trebuie sa vedem pe ce partitie este instalat sistemul de operare (de exemplu, la mine este C:\Windows).

Verificati daca aveti folderul "inetpub" pe partitia "C".

Daca exista, deschideti-l si uitati-va dupa un alt folder, numit "wwwroot".

Daca si acesta exista, atunci creati un nou folder, numit "projects".

Calea completa catre acest folder trebuie sa fie aceasta: "C:\inetpub\wwwroot\projects".

In cazul in care nu aveti folderul "inetpub", creati un folder si redenumiti-l "inetpub".

Dupa care, deschideti-l si creati un nou folder pe care il numiti "wwwroot".

Apoi, creati un nou folder in "wwwroot" pe care il numiti "projects"

In folderul projects vom crea alte doua foldere:

- pe unul il vom numi "res"

- iar pe celalalt il vom numi "scripts"

Deschideti folderul "res" si creati doua noi documente:

- unul numit "reqStyles" cu extensia ".css". Acest document va contine clasele pentru formatarea textului.

- si un document numit "RequestedPage" cu extensia ".html". Aceasta pagina va contine mesajul pe care ni-l va returna serverul.

Deschideti apoi folderul "scripts" si creati un nou document numit "serverRequest" cu extensia ".js".

Acest folder va contine scriptul necesar apelarii metodei "XMLHttpRequest".

Acum vom deschide fisierul "reqStyles.css" si vom adauga urmatoarele doua clase:

.DefaultView

{

background-color: #ffffff;

border: solid 1px #ffffff;

font: 9pt Verdana, sans-serif;

color: #000000;

width: auto;

height: auto;

padding: 3px 3px 3px 3px;

}

.RequestCompleted

{

background-color: #ffffcc;

border: solid 1px #cccccc;

font: 9pt Verdana, sans-serif;

color: #000000;

width: auto;

height: auto;

padding: 3px 3px 3px 3px;

}

Apoi deschidem pagina "RequestedPage.html" si stergem tot ce exista in ea, dupa care introducem urmatorul text:

<h2>This is message</h2>

and there's some markup here 

as well as an <a href="http://ajaxpatterns.org">AjaxPatterns link</a>.

Deschidem apoi fisierul "serverRequest.js" si introducem urmatoarele linii de cod:

Cu ajutorul acestui script vom putea face cererea noastra catre server si primi ulterior rezultatul.

Acum nu ne-a mai ramas decat sa mai umblam putin la pagina principala.

Aceasta ar trebui sa arate astfel:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>O utilizare simpla a XMLHttpRequest</title>

<link href="../XmlHttpRequest/res/reqStyles.css" media="screen" rel="stylesheet"
type="text/css" />

<script src="scripts/serverRequest.js" type="text/javascript"
language="javascript"></script>

</head>

<body>

<h2>O utilizare simpla a XMLHttpRequest</h2>

<hr align="left" color="#0000cd" noshade="noshade" width="75%" size="2px" />

 

 

<label id="MakeRequestlabel" onclick="GetServerResponse('RequestedContentDiv');"

style="cursor: hand; font-size: 12pt; color: #ff9966; font-family: Georgia,
Serif;">Click aici pentru a face cerearea catre server</label> 

 

<div id="RequestedContentDiv" class="DefaultView">

</div>

 

 

</body>

</html>

Bun. Pentru a testa, trebuie sa deschidem o fereastra de browser in care sa introducem urmatoarea cale:
"http://localhost/projects/default.html"

Dupa ce ni s-a afisat pagina noastra, putem da click pe linkul "Click aici pentru a face cerearea catre server" si vom vedea daca cererea nostra a avut succes sau nu.

Interesant de observat faptul ca nu se face reimprospatarea (refresh) intregului continut al paginii!

Reimprospatarea este una partiala si se aplica doar elementului "div" in care se afiseaza raspunsul serverului!

Cool!

De notat ar fi ca in cazul mutarii folderului "projects" din folderul "wwwroot" serverul local nu mai poate procesa cererea noastra si va returna un mesaj de eroare.

Asta e tot !

Acum pagina noastra ar trebui sa arate astfel:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Ajax si XMLHttpRequest</title>

</head>

<body>



Pentru a putea face o cerere catre server de pe calculatorul personal, intai si
intai, trebuie sa vedem pe ce partitie este instalat sistemul de operare (de
exemplu, la mine este C:\Windows).





Verificati daca aveti folderul "inetpub" pe partitia "C". 

Daca exista, deschideti-l si uitati-va dupa un alt folder, numit "wwwroot". 

Daca si acesta exista, atunci creati un nou folder, numit "projects". 

Calea completa catre acest folder trebuie sa fie aceasta: "C:\inetpub\wwwroot\projects". 





In cazul in care nu aveti folderul "inetpub", creati un folder si redenumiti-l "inetpub". 

Dupa care, deschideti-l si creati un nou folder pe care il numiti "wwwroot". 

Apoi, creati un nou folder in "wwwroot" pe care il numiti "projects" 





In folderul projects vom crea alte doua foldere: 

- pe unul il vom numi "res" 

- iar pe celalalt il vom numi "scripts"



Deschideti folderul "res" si creati doua noi documente: 

- unul numit "reqStyles" cu extensia ".css". Acest document va contine clasele
pentru formatarea textului. 

- si un document numit "RequestedPage" cu extensia ".html". Aceasta pagina va
contine mesajul pe care ni-l va returna serverul. 

 





Deschideti apoi folderul "scripts" si creati un nou document numit
"serverRequest" cu extensia ".js". 

Acest folder va contine scriptul necesar apelarii metodei "XMLHttpRequest". 





Acum vom deschide fisierul "reqStyles.css" si vom adauga urmatoarele doua
clase: 

 

.DefaultView 

{ 

background-color: #ffffff; 

border: solid 1px #ffffff; 

font: 9pt Verdana, sans-serif; 

color: #000000; 

width: auto; 

height: auto; 

padding: 3px 3px 3px 3px; 

} 

 

.RequestCompleted 

{ 

background-color: #ffffcc; 

border: solid 1px #cccccc; 

font: 9pt Verdana, sans-serif; 

color: #000000; 

width: auto; 

height: auto; 

padding: 3px 3px 3px 3px; 

} 



 Apoi deschidem pagina "RequestedPage.html" si stergem tot ce exista in ea,
dupa care introducem urmatorul text: 

 

<h2>This is message</h2> 

and there's some markup here 

as well as an <a href="http://ajaxpatterns.org">AjaxPatterns
link</a>. 

 



Deschidem apoi fisierul "serverRequest.js" si introducem urmatoarele linii de
cod: 

function $(id) { return document.getElementById(id); } 

 

 

// create the XMLHttpRequest 

window.onload = 

function createXMLHttpRequest( ) 

{ 

try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} 

try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e)
{} 

try { return new XMLHttpRequest( ); } catch(e) {} 

 

alert("XMLHttpRequest not supported"); 

 

return null; 

} 

 

 

// when user clickes the MakeRequestLabel make the request 

function GetServerResponse(/* STRING */ elementId) 

{ 

var theContainer = $(elementId); 

var req = createXMLHttpRequest(); 

 

req.onreadystatechange = 

function() 

{ 

if (req.readyState == 4) { 

if (req.status == 200) { 

theContainer.innerHTML = "Retrieved data from server... "; 

theContainer.innerHTML += req.responseText; 

theContainer.className = "RequestCompleted"; 

} 

else { 

alert("Message returned, but with error status. \n" + "Server
error: " +

req.status); 

} 

} 

} 

// insert here the path to the page wich will be requested 

req.open("GET", "res/RequestedPage.htm", true); 

req.send(null); 

//req.send( ) will complete the request. 

//The argument is null because the request only has headers, but no body. 

} 

 



Cu ajutorul acestui script vom putea face cererea noastra catre server si primi
ulterior rezultatul.

 

 



Acum nu ne-a mai ramas decat sa mai umblam putin la pagina principala. 

Aceasta ar trebui sa arate astfel:

 

<html xmlns="http://www.w3.org/1999/xhtml"> 

 

<head> 

<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" /> 

<title>O utilizare simpla a XMLHttpRequest</title> 

<link href="../XmlHttpRequest/res/reqStyles.css"
media="screen" rel="stylesheet"

type="text/css" /> 

 

<script src="scripts/serverRequest.js"
type="text/javascript"

language="javascript"></script> 

</head> 

 

<body> 

 

<h2>O utilizare simpla a XMLHttpRequest</h2> 

<hr align="left" color="#0000cd"
noshade="noshade" width="75%" size="2px" /> 

 

 

<label id="MakeRequestlabel"
onclick="GetServerResponse('RequestedContentDiv');" 

style="cursor: hand; font-size: 12pt; color: #ff9966; font-family: Georgia,

Serif;">Click aici pentru a face cerearea catre
server</label> 

 

<div id="RequestedContentDiv" class="DefaultView"> 

</div> 

 

 

 

</body> 

</html> 

 



Bun. Pentru a testa, trebuie sa deschidem o fereastra de browser in care sa
introducem urmatoarea cale:

"http://localhost/projects/default.html"





Dupa ce ni s-a afisat pagina noastra, putem da click pe linkul "Click aici
pentru a face cerearea catre server" si vom vedea daca cererea nostra a avut
succes sau nu.



 Interesant de observat faptul ca nu se face reimprospatarea (refresh)
intregului continut al paginii! 

Reimprospatarea este una partiala si se aplica doar elementului "div" in care se
afiseaza raspunsul serverului! 

Cool!

 

De notat ar fi ca in cazul mutarii folderului "projects" din folderul "wwwroot"
serverul local nu mai poate procesa cererea noastra si va returna un mesaj de
eroare.





Asta a fost tot !



</body>

</html>

Easy Web Development

13 November 2006

AJAX si XMLHttpRequest

No comments:

Archive

Tags

Forums

For Developers

Bloggers

Reciprocal Links

Easy Web Development