To make an Ajax request when the page is closed, apply the beforeunload event on the "window" object to call an Ajax function when the event is emited.
- The ajax request must be made 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 eimted when page is closed, it calls the pageClosed() function
window.addEventListener('beforeunload', pageClosed);
</script>
- In the php script called by the Ajax function you should use the ignore_user_abort(true); function. It allows the php script to run on server even if the browser is closed.
 

Register the time users spend on website

Here is a practical application of the code above.
The following script registers into a file on server the time the users spend on website (in json format). Here the user is the user's IP.

1. Add the following ajax script in the pages of your website:
<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 eimted when page is closed, it calls the pageClosed() function
window.addEventListener('beforeunload', pageClosed);
</script>
2. Add this code into a "reg_time.php" file:
<?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. This php code can be used to read and show data stored 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';
}

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Ajax request when the page is closed

Last accessed pages

  1. Display data from PHP Array, or MySQL in HTML table (14212)
  2. Create simple Website with PHP (20530)
  3. PHP-MySQL Tutorials (2840)
  4. Read Excel file data in PHP - PhpExcelReader (60997)
  5. Adding data from HTML Table Rows in Form fields (5647)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (409)
  2. Read Excel file data in PHP - PhpExcelReader (329)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (254)
  4. PHP getElementById and getElementsByTagName (205)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (196)