1. AJAX
Jussi Pohjolainen
Tampere University of Applied Sciences

2. AJAX
• Asynchronous JavaScript and XML
• AJAX is about updating parts of web page
without reloading the whole page
• Google Maps, Gmail, Youtube…

3. How AJAX works? (W3schools)

4. Support
– Firefox 1.0 and newer
– Opera 8 and newer including Opera mini
– Safari 1.2 and newer
– Internet Explorer 7 and newer

5. Techniques
• XMLHttpRequest object
• JavaScript and DOM
• CSS and some dataformat (XML, JSON, HTML,
text..)

6. XMLHttpRequest
• Modern browsers support built-in
XMLHttpRequest object
• All about sending and receiving data from
server.
• Instantiate in normal fashion:
– var xmlobj = new XMLHttpRequest();

7. Send Request to Server
var xmlobj = new XMLHttpRequest();
xmlobj.open(“GET”, // POST or GET?
“somefile.txt”, // URL
true); // async or not?
xmlobj.send(); // Send it

8. Using POST
var xmlobj = new XMLHttpRequest();
xmlobj.open(“POST”, // POST or GET?
“somescript.php”, // URL
true); // async or not?
// Specify the data you want to send via POST
xmlhttp.setRequestHeader("Content-type","application/x-www-form-
urlencoded");
// Send data
xmlobj.send(“name=Kalle”);

9. Asynchronous?
• When setting the async parameter to true, the
server side script is run in background.
• Javascript does not have to wait for the server
response.. You can
– Execute other scripts while waiting server
response
– Deal with the response when ready
• Specify a function that is called when
response is ready!

10. Example

11. State of the Request
• 0: Not initialized
• 1: Server connection established
• 2: Request received
• 3: Processing request
• 4: Request Finished and Response Ready

13. Status of the Request
• Also HTTP Status is received
– 200: “Ok”
– 404: “Page not found”
–…
• if(xmlobj.status == 200 &&
xmlobj.readyState == 4) { .. }

14. Server Response
• XMLHttpRequest has two attributes for the
response
– DOMString responseText
– Document responseXML

15. Parsing XML

16. Pattern for several callbacks
• Implement method like:
– loadSomeXML(“url-here”, functionNameHere);

17. DATA FORMATS

18. HTML
• Very simple way to do AJAX
• Server has fragments of HTML
• No parsing or converting
• Easy to update UI: use can use innerHTML or
standard DOM

19. XML
• Static XML Data on server or generated XML
• XML must be parsed: use DOM scripting
• Example of PHP -> XML -> AJAX

20. Example
function showResponse(req) {
// if the request is ready
if (req.readyState == 4 && req.status ==
200) {
var data = req.responseXML;
// here we have to process XML data
}
}
}

21. JSON
• JavaScript Object Notation
• Storing and exchanging text
• Smaller than XML, faster and easier to parse!
• Language Independent

22. Example
{
"employees": [
{
"firstName": "John",
"lastName" : "Doe"
},
{
"firstName": "Anna",
"lastName" : "Smith"
},
{
"firstName": "Peter",
"lastName": "Jones"
}
]
}

23. Parsing JSON in JS
• You can convert JSON text to Object using eval
– function:
– var myObject = eval(„(„ + JSONText + „)‟);
• You should NOT use eval for security issues!
Eval executes also any js program…
• Use JSON Parses instead! It recognizes only
JSON text

24. Example (wikipedia)
var my_JSON_object = {};
var http_request = new XMLHttpRequest();
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
var done = 4, ok = 200;
if (http_request.readyState == done && http_request.status == ok) {
my_JSON_object = JSON.parse(http_request.responseText);
}
};
http_request.send(null);

25. Example
…
"location" : { "city" : "San Francisco",
"country" : "US",
"country_iso3166" : "US",
"country_name" : "USA",
"l" : "/q/zmw:94101.1.99999",
"lat" : "37.77500916",
"lon" : "-122.41825867",
"magic" : "1",
"nearby_weather_stations" : { "airport" : { "station" : [ { "city" : "San Francisco",
…
var myObject = JSON.parse(httpReq.responseText);
var city = myObject.location.city;
…