Dynamic content loading on web pages with Ajax & Express (5)

It is the fifth example using JQuery AJAX function and Express JS.

This example sets up a disclaimer page for user to accept to use of cookies.

Create an Express route for the HTTP GET request at /accept. Return an empty 200 response when called. This response is not used.
Create an Express route for the HTTP GET request at /content.ajax. If /accept has not been requested before, send a 403 Forbidden response. Otherwise, send a paragraph “Welcome to our site” wrapped in <p> tags.
Create a static page called disclaimer.html in the public folder.
Write JavaScript code to send an AJAX request to the /content.ajax route when the page is loaded.
When the AJAX response is received:
- If the response is 403 Forbidden, display a paragraph of text and a button asking the user to accept the use of cookies.
- Clicking the button should send an AJAX request to /accept.
- If the request is successful, hide the disclaimer and send a new request to /content.ajax.
- If the response to the new request is successful, insert the a paragraph “Welcome to our site” wrapped in <p> tags.

The work flow of disclaimer.html

<!-- disclaimer.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Disclaimer</title>
  <script src="js/jquery-3.7.1.min.js"></script>

</head>
<body>
  <h1>disclaimer</h1>
  <div id="content"></div>
  
  <script>
    $(document).ready(function() {
      $.ajax({
        url: '/content.ajax',
        success: function(response) {
          $('#content').html(response);
        },
        error: function(xhr) {
          if (xhr.status === 403) {
            $('#content').html('<p>By continuing to browse, you agree to our use of cookies.</p>' +
                               '<button id="acceptBtn">Accept</button>');
            $('#acceptBtn').click(function() {
              $.ajax({
                url: '/accept',
                success: function() {
                  $.ajax({
                    url: '/content.ajax',
                    success: function(response) {
                      $('#content').html(response);
                    }
                  });
                }
              });
            });
          }
        }
      });
    });
  </script>  
  
</body>
</html>

Content of the server5.js

const express = require('express');
const app = express();
const port = 3000;

let accepted = false;

app.get('/accept', (req, res) => {
  accepted = true;
  res.sendStatus(200);
  // Status 200 is dummy, not used by HTML file
});

app.get('/content.ajax', (req, res) => {
  if (!accepted) {
    res.sendStatus(403);
  } else {
    const content = '<p>Welcome to our site</p>'
    res.send(content);
  }
});

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

The appropriate file structure should resemble the following:

- public
  - disclaimer.html
  - js
    - jquery-3.7.1.min.js
- server5.js

Run the Express application by executing the following command in the Ubuntu terminal:

node server5.js

Make sure both Orange Pi and PC have the same subnet and connect to the same router or network switch. On the PC’s web browser, enter the following URL where 192.168.21.26 is the IP address of the Orange Pi.

http://192.168.21.26:3000/disclaimer.html

Dynamic content loading on web pages with Ajax & Express (5)

Related posts: