0% found this document useful (0 votes)
115 views44 pages

CH 10 - AJAX

1. AJAX allows for asynchronous updating of parts of a web page without reloading the entire page. 2. It uses a combination of technologies including JavaScript, XML, and server-side programming to make asynchronous requests in the background. 3. An AJAX interaction involves an initial page load followed by asynchronous requests from the client-side script to the server which returns partial updates to dynamically update the page without reloading.

Uploaded by

Joker Jr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
115 views44 pages

CH 10 - AJAX

1. AJAX allows for asynchronous updating of parts of a web page without reloading the entire page. 2. It uses a combination of technologies including JavaScript, XML, and server-side programming to make asynchronous requests in the background. 3. An AJAX interaction involves an initial page load followed by asynchronous requests from the client-side script to the server which returns partial updates to dynamically update the page without reloading.

Uploaded by

Joker Jr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Web Apps Development

CHAPTER 10 - AJAX

10 - 1
Traditional web interaction

- User requests a page =


browser (client) sends
Web Page Title

http://domain.com Google

HTTP request
HTTP request to server

- Browser is “blocked” from


web

time
activity while it waits for user waiting
the server to provide the server
document

Web Page Title

http://domain.com Google

HTTP response
- When the response arrives, (complete document)

the browser renders the


document synchronous request-response communication

10 - 2
Motivation

- Provide web-based applications with rich user interfaces and


responsiveness

- This requires frequent interactions between the user and the


server

- Speed of interactions determines the usability of the application!


- Often, only (relatively small) parts of the documents are
modified or updated. No need to reload the entire page

- Client might want to send data to the server in the background

10 - 3
AJAX

- Asynchronous JavaScript and XML

- Combination of web technologies

- Client side: HTML, JavaScript


- Server side: any programming language
- Despite the name, XML is not required!
- Two key features

- Update only parts of the page


- Asynchronous, i.e., no need to "lock" the document while waiting for the
response

10 - 4
AJAX interaction

initial request
http://domain.com
Web Page Title

Google
complete document

web
time

server

10 - 5
AJAX interaction

initial request
http://domain.com
Web Page Title

Google
complete document

web
time

interaction #1
server

10 - 6
AJAX interaction

initial request
http://domain.com
Web Page Title

Google
complete document
update #1
web
time

interaction #1
partial update #1
server

10 - 7
AJAX interaction

initial request
http://domain.com
Web Page Title

Google
complete document
update #1
web
time

interaction #1
partial update #1
server

interaction #2

10 - 8
AJAX interaction

initial request
http://domain.com
Web Page Title

Google
complete document
update #1
web
time

interaction #1
update
partial update #1
server
#2

interaction #2
partial update #2

10 - 9
Note that responses are asynchronous

initial request
http://domain.com
Web Page Title

Google
complete document
update #1
web
time

interaction #1
update server
#2

interaction #2
partial update #2
partial update #1 The response to request #1 might arrive
after #2, even though it was made earlier

10 - 10
Where to use AJAX?

10 - 11
Where to use AJAX?

10 - 12
Four main parts

1. Initial HTML document (may be generated using Python)

2. JavaScript to send the AJAX request to the server

3. Server-side program to receive the request and produce the


requested data

4. JavaScript to receive the new data and integrate it into the


original document being displayed

10 - 13
Example walkthrough
https://github.com/kbalog/web-programming/tree/master/

examples/ajax/zipcode

10 - 14
Example

10 - 15
1. Initial HTML document

- Register JavaScript handler function on onkeyup event

- I.e., whenever the user presses a key

zipcode.html
<input type="text" name="postcode" onkeyup="getPlace(this.value);"/>

10 - 16
2. Request phase

- Register callback function

- Make asynchronous call


zipcode.js
function getPlace(postcode) {

var xhr = new XMLHttpRequest();

/* register an embedded function as the handler */

xhr.onreadystatechange = function () {

[…]

}

};

/* send the request using GET */

xhr.open("GET", "/getplace?postcode=" + postcode, true);

xhr.send(null);

} setting this parameter to true means
making an asynchronous request
10 - 17
3. Response document

- Flask app generates simple text response


app.py
@app.route("/getplace", methods=["GET"])

def getplace():

POSTCODES = {

"0107": "Oslo",

"0506": "Oslo",

"4090": "Hafrsfjord",

…

}

postcode = request.args.get("postcode", None)

# look up corresponding place or return empty string

if postcode and (postcode in POSTCODES):

return POSTCODES[postcode]

return ""

10 - 18
4. Receiver phase

- Callback is called multiple times, readyState indicates the


progress (0..4)

- Status is 200 if the request was successfully completed


zipcode.js
xhr.onreadystatechange = function () {

/* readyState = 4 means that the response has been completed

* status = 200 indicates that the request was successfully completed */

if (xhr.readyState == 4 && xhr.status == 200) {

var result = xhr.responseText;

document.getElementById("place").value = result;

}

};

10 - 19
Example walkthrough #2
https://github.com/kbalog/web-programming/tree/master/

examples/ajax/license

10 - 20
Example #2

10 - 21
Example #2

- Request can be POST as well

- It is also possible for the server to send back a HTML snippet

- The client updates part of the page (i.e., the DOM) with the
received snippet

10 - 22
1. Initial HTML document

- Register JavaScript handler function on onkeyup events

- I.e., whenever the user presses a key in the name or license fields

license.html
<input type="text" name="name" id="name" onkeyup="checkLicense();" />

<input type="text" name="license" id="license" onkeyup="checkLicense();" />

10 - 23
2. Request phase

- Make asynchronous call using POST

- Need to add a HTTP header to make it as if it was a form submission

license.js
function checkLicense() {

[…]


/* send the request using POST */

xhr.open("POST", "/check_license", true);

/* To POST data like an HTML form, add an HTTP header */

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

/* variables go in the request body */

xhr.send("name=" + name + "&license=" + license);


[…]
}
10 - 24
3. Response document

- Flask app generates a HTML snippet

app.py
@app.route("/check_license", methods=["POST"])

def check_license():

VALID_LICENSES = {…}

name = request.form.get("name", None)

license = request.form.get("license", None)

# check if name and license match

if name and license:

if VALID_LICENSES.get(name, None) == license:

return "<img src='/static/images/yes.png' /> Valid license key"

else:

return "<img src='/static/images/no.png' />
Invalid license key for {}".format(name)

return ""

10 - 25
4. Receiver phase

- Callback is called multiple times, readyState indicates the


progress (0..4)

- Status is 200 if the request was successfully completed


license.js
xhr.onreadystatechange = function () {

/* readyState = 4 means that the response has been completed

* status = 200 indicates that the request was successfully completed */

if (xhr.readyState == 4 && xhr.status == 200) {

var result = xhr.responseText;

document.getElementById("license_check").innerHTML = result;

}

};

10 - 26
Exercises #1, #1b
https://github.com/kbalog/web-programming/tree/master/

exercises/ajax

10 - 27
What can be the response document?

- Data as a simple string

- HTML snippet

- Data as "object"

- Both the client and the server need to speak the same language, i.e.,
how to encode and decode the object

10 - 28
JSON

- JavaScript Object Notation

- Lightweight data-interchange format

- Language independent

- Two structures

- Collection of name-value pairs (object)


- a.k.a. record, struct, dictionary, hash table, associative array
- Ordered list of values (array)
- a.k.a. vector, list

10 - 29
JSON

- Values can be

- string (in between "…")


- number
- object
- array
- boolean (true/false)
- null

10 - 30
Example JSON
{
"name":"John Smith",
"age":32,
"married":true,
"interests":[1,2,3],
"other":{
"city":"Stavanger",
"postcode":4041
}
}

10 - 31
JSON with Python

examples/ajax/json/json_python.py

- json is a standard module

- json.dumps(data)
- returns JSON representation of the data
- json.loads(json_value)
- decodes a JSON value
- json.dumps() and json.loads() work with strings

- json.dump() and json.load() work with file streams

10 - 32
JSON with JavaScript

examples/ajax/json/json_js.html

- JSON.stringify(value)
- returns JSON representation of a value (encode)
- JSON.parse(json)
- parses a JSON value into a JavaScript object (decode)

10 - 33
Exercise #2
https://github.com/kbalog/web-programming/tree/master/

exercises/ajax

10 - 34
Example
https://github.com/kbalog/web-programming/tree/master/

examples/ajax/loading

10 - 35
Indicating waiting

- An animated gif is
displayed until the
response arrives

- In this example there is an


artificial delay of 1sec is
added to the Python code

10 - 36
AJAX in jQuery

10 - 37
AJAX controls

- $.ajax() — global function

- Shorthand AJAX methods: $.get() and $.post()

- load() method

- replaces the HTML content of the matched elements with the content
returned from a remote file
- (does not work with form input fields!)
- Full reference: 

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

10 - 38
$.ajax()

- $.ajax(params)
- where params is a settings map object

var params = {

type: "GET",

url: "requestUrl",

dataType: "text", // html, xml, json

success: successCallbackFunction,

error: errorCallbackFunction

};

10 - 39
$.get(), $.post()

- Full syntax:

- $.get(url,data,function(data,status,xhr),dataType)
- $.post(url,data,function(data,status,xhr),dataType)
- Where:

- url where the request is sent


- data (optional) data to be sent (map with variables and values)
- function(…) callback function to run if the request succeeds
- dataType (optional) data type setting (xml, html, text, …)
$.post("ajax.php", {"var1":"value"}, function (data) {

$("#bar").html(data);

});

10 - 40
Example (zipcode) using JavaScript

examples/ajax/zipcode/

function getPlace(postcode) {

var xhr = new XMLHttpRequest();

/* register an embedded function as the handler */

xhr.onreadystatechange = function () {

/* readyState = 4 means that the response has been completed

* status = 200 indicates that the request was successfully completed */

if (xhr.readyState == 4 && xhr.status == 200) {

var result = xhr.responseText;

document.getElementById("place").value = result;

}

};

/* send the request using GET */

xhr.open("GET", "/getplace?postcode=" + postcode, true);

xhr.send(null);

}

<input type="text" name="postcode" onkeyup="getPlace(this.value);"/>

10 - 41
Example (zipcode) using jQuery

examples/jquery/zipcode2/

$(document).ready(function() {

$("input[name=postcode]").blur(function() {

$.get("/getplace", {postcode: $(this).val()}, function (data) {

$("#place").val(data);

});

});

});

<input type="text" name="postcode"/>

10 - 42
load()

- Loads data from a server and puts the returned data into the
selected element

- $load(url,data,function(data,status,xhr))
- Where:

- url where the request is sent


- data (optional) data to be sent to the server along with the request
- function(…) (optional) callback function to run when the load() method
is completed

$("button").click(function(){

$("#div1").load("demo_test.txt");

});

10 - 43
Exercises #3, #4
https://github.com/kbalog/web-programming/tree/master/

exercises/ajax

10 - 44

You might also like