This document provides an overview of AJAX (Asynchronous JavaScript and XML) including what it is, how it works, and the technologies involved. It discusses using the XMLHttpRequest object to asynchronously exchange data with a server in the background without refreshing the page. It also covers the data formats of XML and JSON that can be used to transfer data, including their syntax, structure, and best practices.

1. AJAX.
XML and JSON
Andrii Siusko
October 2013

2. AGENDA
What is AJAX? Why do we need it?
HTMLRequest object
Data formats
– XML
• structure and syntax
• basic rules and restrictions
• best practices of use
– JSON
• YAML principles and structure
• basic rules
• best practices

3. PREREQUISITE

4. SO WHAT’S THE PROBLEM?
user must wait while new
pages load

5. POSSIBLE SOLUTION
user can keep interacting
with page while data loads

6. ASYNCHRONOUS WEB COMMUNICATION

7. WHAT IS AJAX?
AJAX : Asynchronous JavaScript and XML
 not a programming language; a particular way of using JavaScript
 downloads data from a server in the background
 allows dynamically updating a page without making the user wait
 avoids the "click-wait-refresh" pattern
AJAX is based on internet standards, and uses a combination of:
 XMLHttpRequest object (to exchange data asynchronously with a
server)
 JavaScript/DOM (to display/interact with the information)
 CSS (to style the data)
 XML (often used as the format for transferring data)

8. COMMUNICATION IN BACKGROUND –
HOW IS IT MADE?
Prerequisite: JavaScript
Create HTTPRequest object
Prepare data to send
Do .send() method
Watch for request status:
– not ok:
• fulfill error handling
– ok: 
• get server reply
• manage it

9. HTTPREQUEST OBJECT: CREATE
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
ajax = new XMLHttpRequest();
}
else{
// code for IE6, IE5
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

10. HTTPREQUEST OBJECT:
HANDLE (METHODS)
.open(method, URL, async,
[userName], [password]);
• method = “GET” || “POST”;
• boolean async;
.send([content]);
.abort();
.getAllResponseHeaders();
• returns all headers as String;
.getResponseHeader(headerName);
• returns all headers as String;

11. HTTPREQUEST OBJECT:
HANDLE (FIELD)
.onreadystatechange = function {};
• describes what should script do on server response
.readyState
• 0 not initialized; 1 open;
• 2 sending…; 3 receiving…;
• 4 ready
.status; .statusText;
• 200 ok; 404 not found;
• 403 not authorized; …
.responseText; .responseXML
• responseXML could be parsed as DOM element

12. XMLHTTPREQUEST SECURITY
RESTRICTIONS
• cannot be run from a web page stored on
your hard drive
• can only be run on a web page stored on a
web server
• can only fetch files from the same site
that the page is on*
* 1. <script type="text/javascript“
src=“external_domein“ ></script>
2. Create XDR object:
xdr = new XDomainRequest(); // IE8+
3. easyXDM (Javascript library)

13. GOT REPLY. WHAT’S NOW?
Get text reply or XML
Parse it (if need)
Use DHTML principles to change existing content
• document.getElementById(ID).innerText || .innerHTML

14. XML – WHAT IS THIS?
eXtensible Markup Language
– tag based;
– has DOM structure;
languages written in XML specify:
− names of tags in XHTML: h1, div, img, etc.
− names of attributes in XHTML: id/class, src, href, etc.
− rules about how they go together in XHTML: inline vs.
block-level elements

15. XML – RESTRICTIONS
Should have header and root element;
Tags are case sensitive;
< and & should be encoded
• >, single and double quotes should be encoded too
Tags should be nested properly
The best practice is to use schemata or DTD

16. XML – RESTRICTIONS
Should have header and root element;
Tags are case sensitive;
< and & should be encoded
• >, single and double quotes should be encoded too
Tags should be nested properly
The best practice is to use schemata or DTD

17. ANATOMY OF AN XML FILE
<?xml version="1.0" encoding="UTF-8"?> <!-- XML prolog -->
<messages> <!-- root element -->
<id>1</id> <!-- element (“tag") -->
<login>
Tom <!-- content of element -->
</login>
<message lang="engl"> <!-- attribute and its value -->
Hi Nick!
</message>
</messages>

18. JSON
JavaScript Object Notation (JSON):
− Data format that represents data as a set of
JavaScript objects
− invented by JS guru Douglas Crockford of Yahoo!
− natively supported by all modern browsers (and
libraries to support it in old ones)
− not yet as popular as XML, but steadily rising due
to its simplicity and ease of use

19. JSON SYNTAX
JSON is object
It can contain:
– “name” : “value” pairs;
– objects
• {
• “name1” : “value1”, // comma required;
• “name2” : “value2”
• }
– arrays: “arr” : [“val1”, “val2”, “val3”]
– // Java-style comments allowed
Any value could be:
• integer • “string”
• true/false/null • object or array

20. JSON HANDLE
var s =
‘{“name”: “value”,
“arr”: [1,2,33,40,],
“obj”: {“n1”: “v1”, “n2”: “v2”}
}’;
var jsonObj = JSON.parse(s);
// jsonObj.name = “value”;
// jsonObj.arr[2] = 33;
// jsonObj.obj.n2 = “v2”;

21. REFERENCES
http://google.com
http://www.w3.org/Protocols/rfc2616/rfc2616.html
http://www.w3.org/TR/XMLHttpRequest/
https://github.com/oyvindkinsey/easyXDM#readme
http://msdn.microsoft.com/en-us/library/cc288060(v=vs.85).aspx (XDR)
http://json.org

22. Thank you!
Andrii Siusko
skype: asyusko
mail: asyusko@gmail.com