Acum trebuie sa invatam sa utilizam proprietatile si metodele obiectului XMLHTTPRequest pentru a-i permite sa trimita cereri catre server si sa primeasca date de la acesta.
Dupa cum ati vazut in tutorialul trecut:
Dupa cum ati vazut in tutorialul trecut:
Crearea obiectului XMLHTTPRequest este destul de simplu, urmeaza sa creem si trimite cereri catre server si analiza raspunsurile primite.
Sa trecem direct la lucru si sa creem un obiect XMLHTTPRequest si apoi o functie JavaScript pentru a trimite o cerere asincrona:
-------------------------------------------
function getXMLHTTPRequest(){
var req = false;
try {
req = new XMLHTTPRequest();
}
catch(err1)
}
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(err2)
{
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3)
{
req = false;
}
}
}
return req;
}
var myRequest = getXMLHTTPRequest();
function callAjax() {
//declararea unei variabile care sa pastreze informatiile transmise catre server
var lastname='Smith';
//construirea adresei URL a scriptului de server pe care dorim sa-l apelam
var url = "myserverscript.php?surname=" + lastname;
//cerem obiectului nostru XMLHTTPRequest sa deschida o conexiune la server
myRequet.open("GET", url, true);
//pregatirea unei functii responseAjax() care va rula la sosirea raspunsului
myRequest.onreadystatechange = responseAjax;
// trimiterea cererii
myRequest.sent(null);
---------------------------------------------------------------------------------------------------------------
Sa dezvoltam aplicatia sa vedem daca functioneaza. Avem nevoie de urmatoarele fisiere:
- index.html
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ajaxreq.js">
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
------------------------------------------------------------------------------
- ajaxreq.js
--------------------------------------------------------------------------------
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.txt",true);
xmlhttp.send();
}
-------------------------------------------------------------------------------------
- index.txt
----------------------------------------------------------------------------------------
Salut!
Acesta este un fisier de pe Server.
-----------------------------------------------------------------------------------------
Dupa rularea scriptului trebuie sa fie afisat mesajul din index.txt.
"+"Joe Reed
"+"Joe Reed
