AJAX (Asynchronous JavaScript and XML) se ocupa cu schimbul unei cantitati mici de informatii cu serverul al unei pagini web, in fundal, fara sa fie nevoie de reincarcarea intregii pagini pentru a obtine informatiile necesare.
Un exemplu simplu: utilizatorul introduce o parola intr-un textbox si primeste instant un feedback privind puterea parolei sale. Am considerat ca o parola slaba inseamna mai putin de 5 caractere, una medie cu mai mai mult de 5 caractere, fara numere, si una puternica o parola ce contine peste 5 caractere din care cel putin unul este o cifra (evident in realitate nu este asa).
---------------------------- index.html --------------------------------------------
<html>
<head>
<script type="text/javascript">
function getStrength(input) {
var request;
var str;
if (input.length<5) {
document.getElementById("strength").innerHTML= 'slaba';
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
request.onreadystatechange=function() {
if (request.readyState==4 && request.status==200)
document.getElementById("strength").innerHTML=request.responseText;
}
request.open("GET","script.php?data="+input,true); // async
request.send();
}
</script>
</head>
<body>
<form action="">
Parola: <input type="text" id="txt1" onKeyUp="getStrength(this.value)" />
</form>
<p>Putere: <font color="#009900"><span id="strength"></span></font></p>
</body>
</html>
---------------------------- script.php --------------------------------------------
<?php
if (isset($_GET['data'])) {
$pass = $_GET['data'];
$response = 'medie';
if (preg_match('#[0-9]#',$pass)) {
$response = 'puternica';
}
echo $response;
}
?>
----------------------------------------------------------------------------------------
Dacă am fi folosit metoda POST în loc de GET, atunci ar fi fost obligatoriu trimiterea a cel puțin 2 antete: Content-Type și Content-length - folosind metoda setRequestHeader pe obiectul request, iar în send să fie trimis ca parametru obiectul de date (format JSON, xml, etc).
Un exemplu simplu: utilizatorul introduce o parola intr-un textbox si primeste instant un feedback privind puterea parolei sale. Am considerat ca o parola slaba inseamna mai putin de 5 caractere, una medie cu mai mai mult de 5 caractere, fara numere, si una puternica o parola ce contine peste 5 caractere din care cel putin unul este o cifra (evident in realitate nu este asa).
---------------------------- index.html --------------------------------------------
<html>
<head>
<script type="text/javascript">
function getStrength(input) {
var request;
var str;
if (input.length<5) {
document.getElementById("strength").innerHTML= 'slaba';
return;
}
// code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
request.onreadystatechange=function() {
if (request.readyState==4 && request.status==200)
document.getElementById("strength").innerHTML=request.responseText;
}
request.open("GET","script.php?data="+input,true); // async
request.send();
}
</script>
</head>
<body>
<form action="">
Parola: <input type="text" id="txt1" onKeyUp="getStrength(this.value)" />
</form>
<p>Putere: <font color="#009900"><span id="strength"></span></font></p>
</body>
</html>
---------------------------- script.php --------------------------------------------
<?php
if (isset($_GET['data'])) {
$pass = $_GET['data'];
$response = 'medie';
if (preg_match('#[0-9]#',$pass)) {
$response = 'puternica';
}
echo $response;
}
?>
----------------------------------------------------------------------------------------
Dacă am fi folosit metoda POST în loc de GET, atunci ar fi fost obligatoriu trimiterea a cel puțin 2 antete: Content-Type și Content-length - folosind metoda setRequestHeader pe obiectul request, iar în send să fie trimis ca parametru obiectul de date (format JSON, xml, etc).
