phpjqueryajaxrefresh

Update data on a page without refreshing

I have a website where I need to update a status. Like for a flight, you are departing, cruise or landed. I want to be able to refresh the status without having my viewers to have and reload the whole page. I know there is a way to do it with AJAX and jQuery, but I don't have any understanding of how that works. I also don't want them to have and click a button. If anybody knows how that would be done I much appreciate it!

Solution

  • This is typically achieved with a technique called AJAX (Asynchronous Javascript And XML). This technique loads data (using XML formatting) asynchronously (in the background) so it can update your content without needing to reload the page (using Javascript).

    A visualisation:

    visualization

    The easiest way to implement AJAX is with the jQuery load() method. This method provides a simple way to load data asynchronous from a web server and place the returned HTML into the selected element. The basic syntax of this method is: $(selector).load(url, data, complete); where the arguments are:

    The required URL parameter specifies the URL of the file you want to load. The optional data parameter allows you to specify data (i.e. key/value pairs) that is sent to the web server along with the request. The optional complete parameter can be used to reference a callback function. The callback is fired once for each selected element.

    A simple example of using load(), where we load data dynamically when a button is pressed:

    Using jQuery

    $(function() {

  // optional: don't cache ajax to force the content to be fresh
  $.ajaxSetup({
    cache: false
  });

  // specify the server/url you want to load data from
  var url = "https://baconipsum.com/api/?type=meat-and-filler";

  // on click, load the data dynamically into the #demo div
  // while loading, show three dots (…)
  $("#button").click(function() {
    $("#demo").html("…").load(url);
  });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="demo">
    <h1>Use jQuery load() to change this text</h1>
    <button id="button" type="button">Change Content</button>
  </div>
</body>

</html>

    If you don't want to use the jQuery library, you can also use plain Javascript. Loading content is slightly more difficult that way. Here is an example of how to do it with Javascript only:

    Using plain Javascript

    function loadContent(url) {
  const xhttp = new XMLHttpRequest();
  xhttp.open("GET", url);
  xhttp.send();
  xhttp.onreadystatechange = (e) => {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
}
    <!DOCTYPE html>
<html>

<body>
  <div id="demo">
    <h1>Use a XMLHttpRequest to change this text</h1>
    <button type="button" onclick="loadContent('https://baconipsum.com/api/?type=meat-and-filler')">Change Content</button>
  </div>
</body>

</html>

    To learn more about AJAX, you can take a look at https://www.w3schools.com/xml/ajax_intro.asp