Chapter 6 - Dynamic webpages using Ajax

Serving JSON objects, Querying web services asynchronously, Dynamic web pages.

I- Serving JSON objects

JSON is a text format that enables to represent structured data. A JSON object looks like the following:

{
	"configuration": {
		"name": "configuration1",
		"nodes": [{
			"node_name": "computer1",
			"roles": ["control"]
		}, {
			"node_name": "computer2",
			"role_name": ["compute", "network"]
		}]
	}
}

In order to support JSON in a python script, import the following library:

import json

You can then use the following methods:

json_str = json.dumps({"name": "henry", "lastname": "Jones", "age": 35})
python_dict = json.loads('{"json_property": "str_value", "json_property2": 3}')

Now, modify the existing main.py so that it creates the database at startup:

if __name__ == "__main__":
    # Create the DB
    from database import db
    print("creating database")
    db.create_all()
    print("database created")

II- Serving JSON objects

In this Section we will implement an new Flask application containing two python functions:

one function is in charge of incrementing a counter
one function is in charge of serving the value of the counter

The following snippet implements those two functions:

from flask import Flask
from flask import request, url_for, redirect, session, render_template
import json
app = Flask("firstFormApplication")
app.secret_key = "very_important_secret"

COUNTER = 0

@app.route("/increment_counter")
def increment_counter():
    global COUNTER
    COUNTER += 1
    return json.dumps({
        "status": "OK"
    })

@app.route("/fetch_counter")
def fetch_counter():
    global COUNTER
    return json.dumps({
        "counter": COUNTER
    })

if __name__ == "__main__":
    app.jinja_env.auto_reload = True
    app.run(host="0.0.0.0", port=8080, debug=True)

Browsing 5 times on the /increment_counter URL and one time on /fetch_counter URL should result in the following screenshots

III- A quick introduction to asynchronous web pages

Until now we developped static web pages : each time a client was requesting a web page, the server was producing a new HTML document. By using Ajax (Asynchronous JavaScript and XML), it possible to create dynamic web pages that will continuously get data from server, and self update.

By using the jQuery javascript framework, it is possible to request the server via some javascript code:

$.ajax({
    url: "/fetch_counter",
    dataType: "json",
    success: function(response) {
        // do something with the server's response
    }
})

IV- Developping a first dynamic page

In this section we will develop a first complete dynamic web application that enables to asynchronously increment a counter by clicking on button.

main.py:

from flask import Flask
from flask import request, url_for, redirect, session, render_template
import json
app = Flask("firstFormApplication")
app.secret_key = "very_important_secret"

COUNTER = 0

@app.route("/")
def index():
    return render_template("home.html")

@app.route("/increment_counter")
def increment_counter():
    global COUNTER
    COUNTER += 1
    return json.dumps({
        "status": "OK"
    })

@app.route("/fetch_counter")
def fetch_counter():
    global COUNTER
    return json.dumps({
        "counter": COUNTER
    })

if __name__ == "__main__":
    app.jinja_env.auto_reload = True
    app.run(host="0.0.0.0", port=8080, debug=True)

templates/home.html:

<!DOCTYPE html>
<html>
<head>
    <title>Todolist</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function increment_counter() {
            $.ajax({
                url: "/increment_counter",
                dataType: "json",
                success: function(response) {
                    console.log("counter has been successfully incremented");
                }
            })
        }

        function fetch_and_update_counter() {
            $.ajax({
                url: "/fetch_counter",
                dataType: "json",
                success: function(response) {
                    document.getElementById("counter-box").innerHTML = response["counter"];
                }
            })
        }

        setInterval(function(){
            fetch_and_update_counter();
        }, 2000)
    </script>
</head>
<body>
    <div id="counter-box">loading counter...</div>
    <button onclick="increment_counter();">increment counter</button>
</body>
</html>