AJAX.XML and JSON

Andrii SiuskoOctober 2013

AGENDAWhat is AJAX? Why do we need it?HTMLRequest objectData formats– XML

• structure and syntax• basic rules and restrictions• best practices of use

– JSON• YAML principles and structure• basic rules• best practices

PREREQUISITE

SO WHAT’S THE PROBLEM?

user must wait while new pages load

POSSIBLE SOLUTION

user can keep interacting with page while data loads

ASYNCHRONOUS WEB COMMUNICATION

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)

COMMUNICATION IN BACKGROUND – HOW IS IT MADE?Prerequisite: JavaScriptCreate HTTPRequest objectPrepare data to sendDo .send() methodWatch for request status:– not ok:

• fulfill error handling– ok:

• get server reply• manage it

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

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;

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

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)

GOT REPLY. WHAT’S NOW?Get text reply or XMLParse it (if need)Use DHTML principles to change existing content

• document.getElementById(ID).innerText || .innerHTML

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

XML – RESTRICTIONSShould have header and root element;Tags are case sensitive;< and & should be encoded

• >, single and double quotes should be encoded tooTags should be nested properlyThe best practice is to use schemata or DTD

XML – RESTRICTIONSShould have header and root element;Tags are case sensitive;< and & should be encoded

• >, single and double quotes should be encoded tooTags should be nested properlyThe best practice is to use schemata or DTD

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>

JSONJavaScript 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

JSON SYNTAXJSON is objectIt 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

JSON HANDLEvar 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”;

REFERENCEShttp://google.com

http://www.w3.org/Protocols/rfc2616/rfc2616.htmlhttp://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

Thank you!

Andrii Siuskoskype: asyuskomail: asyusko@gmail.com