CS304: Ajax and JSON

Class on Ajax and JSON

We've learned:

MySQL
Flask
Jinja2
HTML/CSS
JS/JQ

Today, we'll dynamically update the page by interacting with the server using Ajax.

Goal

By the end of today, you will be able to:

Write a Flask app to produce JSON results.
Write some JS code to send data to the back end.
Write some JS code to get data from the back end and insert it onto the page.
Attach event handlers to work with elements on the page.

Plan

Stuff from last time
Structure of a Flask app
Quiz Questions
We'll review what we learned in the reading, but in a few chunks, deferring templating and event bubbling.
- Ajax form submission
- Example: Collatz Sequence w/ Ajax
We'll do some exercises comprising the goals for the day.

Reading Review

slideshow
Ajax can do (mostly) what a form does using these methods:
- jQuery.get()
- jQuery.post()

Use like this:

$.post(url, formdata, callback, datatype);

Callback functions are crucial. They're invoked with the response from the server.
```
function cb(response) {
    alert("done");
    formatData(response);
};
```
Datatype is often JSON, which jQuery will automatically parse for you into hierarchical JavaScript data structure of objects, arrays, numbers, strings and booleans.

An example JSON data structure:


{"title": "Dr. Zhivago",
 "tt": 59113,
 "year": 1965,
 "stars": ["Omar Sharif",
           "Julie Cristie",
           "Geraldine Chaplin"],
 "isGreat": true,
 "director": {"name": "David Lean",
              "nm": 180,
              "birth": "1908-03-25"},
 "IMDB rating": 8.0}

The functions JSON.parse() and JSON.stringify() are widely supported by JavaScript implementations.

Quiz Questions

I would answer your quiz questions, but there were none!

Example: Collatz Sequence

I've created an example of a Flask app that uses Ajax to get and send data. It's in /cs304collatz. I'll run that example, so we can try it out, and then we'll explore the code.

Compare these URLs:

The Example

I'll run the code in ~cs304/pub/downloads/ajax/

Collatz app

Exercise: Your Sequence

Copy the ajax directory to your account:
```
cp -r ~cs304/pub/downloads/ajax/ ajax
```
Look at the code. It's not long, and it's in the reading.
Activate the venv and run the collatz-app.py file.
Visit the buffer. Click on some numbers to try it out.
Type in a URL like /getCollatzAjax/?num=25 and look at the response
Open the Chrome Inspector and look at the network tab to get some insight about the request and the response
Open the JS console and add a completely new number:
```
addToList({in: 20, out: 10});
```

Updating the DOM

That updating of the DOM is incomplete. Shouldn't the new IN/OUT values replace the bold red numbers on the page? Do that.

Modify the response handler to update the page with the new values.

All your work will be in the front end using JavaScript/jQuery. You won't modify the template or the Python code at all.
Figure out the right JS/JQ incantation to set the contents of the SPAN elements that hold the X and Y values in the browser. You can test these in the JS console.
Add that code to the addToList event handler. That function is no longer well named. Maybe it should be renamed, or the code should be re-factored. Think about this and discuss with your partner.

My solution:

Add these two lines to addToList():


        $("#result .x").text(obj.in);
        $("#result .y").text(obj.out);

like this


function addToList(obj) {
    if(obj.error) {
        $("#errors").empty().html('Error: '+obj.err);
    } else {
        $("<li>")
            .attr("data-num",obj.out)
            .text("the number "+obj.in+" produces "+obj.out)
            .appendTo("#collatzNumbers");
        $("#result .x").text(obj.in);
        $("#result .y").text(obj.out);
    }
}

This is in addToList-improved.js

A new sequence

Come up with your own numeric sequence to replace the Collatz sequence.
Write a route for that, and interact with it using $.get() or $.post(), maybe in the JS console.
For an extra challenge, come up with a two-arg sequence, like z = 2*x+y, and augment the form with an extra input, etc.

Even More

It's useful to be able to navigate around the DOM. I'll give some examples using jQuery:

$(start).find(descendent_sel); allows you to search down from the start to the second selector. For example:
```
var start = $("#result");
start.find(".x").text(42);
start.find(".y").text(21);
```
$(start).closest(ancestor_selector); allows you to search up for the first ancestor that matches the given selector. Example:
```
var start = $("li")[3];
$(start).closest("ul");
```

Summary

We've come a long way! We learned

how to use Ajax to GET data from the back-end,
how to use Ajax to POST data to the back-end,
how to use cloning to build more complex HTML structures easily,
how to handle events and event bubbling when the HTML gets more complex.