Curs Ajax

Pentru a apela o functie Ajax cand pagina e inchisa, aplicati evenimentul beforeunload la obiectul "window", care sa apeleze functia ajax cand evenimentul este emis.
- Cererea ajax trebuie facuta in mod sincron (synchronous).
<script>
// sends data to a php file, via POST, when page is closed
function pageClosed() {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
 var data ='name=val'; //data with name and value to send to your_script.php
 request.open('post', 'your_script.php', false); //false - to make synchronous request

 request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 request.send(data); //sends data

 console.log(data); //for debug to see if code is executed
 return true;
}

//register event emited when page is closed, it calls the pageClosed() function
window.addEventListener('beforeunload', pageClosed);
</script>
- In scriptul php apelat de Ajax se adauga functia ignore_user_abort(true);. Permite rularea scriptului php si dupa ce fereastra browser-ului este inchisa.

Inregistrare timp petrecut de utilizatori pe site

Iata o aplicatie practica a codului dat mai sus.
Urmatorul script inregistreaza intr-un fisier pe server timpul petrecut de utilizatori pe site (in format json). Aici se inregistreaza utilizatorul dupa IP.

1. Adaugati urmatorul script ajax in paginile din site:
<script>
var start_time = Math.floor(Date.now() /1000);

// sends to php the number of seconds the user spend on time
function pageClosed() {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
 var data ='tms='+(Math.floor(Date.now() /1000) - start_time); //data to send to reg_time.php
 request.open('post', 'reg_time.php', false); //false - to make synchronous request

 request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 request.send(data); //sends data

 console.log(data); //for debug to see if code is executed
 return true;
}

//register event emited when page is closed, it calls the pageClosed() function
window.addEventListener('beforeunload', pageClosed);
</script>
2. Adaugati urmatorul cod intr-un fisier php: "reg_time.php".
<?php
ignore_user_abort(true);

if(isset($_POST['tms'])){
 $tms = intval($_POST['tms']);
 $user = $_SERVER['REMOTE_ADDR']; //here we use the ip
 $file ='reg_time.json';
 $f_data =[];

 //add the $user and $tms in json format in $file
 if(!file_exists($file)){
 $f_data[$user] = $tms;
 } else {
 $f_data = json_decode(file_get_contents($file), true);
 if(isset($f_data[$user])) $f_data[$user] = $f_data[$user]+ $tms;
 else $f_data[$user] = $tms;
 }

 file_put_contents($file, json_encode($f_data));
}
3. Urmatorul cod php poate fi utilizat pentru a citi si afisa datele inregistrate in "reg_time.json":
<?php
$file ='reg_time.json';
$f_data =[];

if(file_exists($file)) $f_data = json_decode(file_get_contents($file), true);

foreach($f_data as $k=>$v){
 echo '<br>'. $k.' = '.$v.' seconds';
}

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Apelare functie Ajax la inchidere pagina

Last accessed pages

  1. Numere ordinare (902)
  2. PHP MySQL - Introducere si Tipuri de Date (1722)
  3. Introducere in HTML (13362)
  4. Viitor perfect si Viitorul perfect continuu - Future perfect and Continuous (13364)
  5. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (38231)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2770)
  2. Curs HTML gratuit Tutoriale HTML5 (1874)
  3. Curs si Tutoriale JavaScript (1777)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1720)
  5. Curs CSS Online Tutoriale CSS3 (1604)