Understanding JSON, HTML Events and AJAX

Requests
Understanding JSON
Objectives

01 JSON Use JSON to access data as objects in JavaScript

02 Scope Apply the concept of scope to understand accessibility of variables

JSON
JSON: JavaScript Object Notation

JSON: storing & exchanging text data syntax in object format.

Text data can only be exchanged between browser and server.

▪ JSON object vs. JS object:

• data type function, date, undefined are
not supported
• date will be converted to string
• supports string, number, object, array,
boolean, null
• double quotes for name fields
▪ convert object > JSON: use of stringify
JSON.stringify(object)
▪ convert array > JSON: use of stringify
JSON.stringify(array)
▪ convert JSON > object: use of parse
JSON.parse(json)
Scope of Variables
Scope: accessibility of a variable

Scope: Generally two types - local scope & global scope

▪ local scope (function scope): every function create a JavaScript Scopes
new scope. variables declared inside a function are
local variables & not accessible from outside the
function
▪ global scope: variables declared outside a function Global Scope: Local Scope:
are global variable & accessible from anywhere in the Accessible everywhere Limited accessibility
code
▪ undeclared global scope: all undeclared variables
have global scope
▪ window object: in HTML all global variables are local
Block Scope (let, const): Function Scope (var):
to window object. Can also be accessed as -
Accessible between two Accessible inside
window.varName; curly braces a function
▪ lifetime of a variable: starts from declare & alive
within its scope. global scope ends when browser
window/tab closes
Understanding
HTML Events
Objectives

Implement HTML events and incorporate them in JavaScript

01 HTML Events
code

Apply AJAX requests to load data between the client & the
02 AJAX
server

03 HTTP Request Apply Http request to exchange data with the server
HTML Events
Events (user or client side) are actions that browser reacts on

// HTML events
HTML events: JS can execute code on occurrence <button onclick="alert('Click event');">
of events Click
▪ Syntax: </button>
<element event="some JavaScript">
HTML elements have this 'event' handler attributes.
▪ Some common events: clicks
User
• onchange: an HTML element has been changed
• onclick: user clicks an HTML element Button
• onmouseover: user moves the mouse over an
HTML element Task onclick event
• onmouseout: user moves the mouse away from completed generated
an HTML element
• onkeydown: user pushes a keyboard key JavaScript
• onload: browser has finished loading the page click event
handling
onclick
event
listener
AJAX
AJAX: Asynchronous JavaScript And XML

AJAX: load data from server & display without

reloading the client Browser Web Server
▪ what is XML: Extensible Markup Language.
XMLHttpRequest 2) HTTP Request Business Logic
Tag based data structure, easy to transfer.
Implementation
<t1>
Callback()
<t2>some data</t2> 5) XML Data (PHP, servlet, etc.)
<t3>some other data</t3>
1)
</t1> JavaScript 6)
Data
▪ request data from the server: it can request call 3) 4)
HTML & Exchange
data (XML or Text) from the server by optionally
CSS data
sending data (to specify the request) to the
server using GET or POST method.
Presentation Data Store
▪ receive the response from the server: it can
receive data (XML or Text) as a response from
the server and allow JS to work with that data.
Http Request
Http Request is for exchanging data with the server

XMLHttpRequest: built-in object of the browser

▪ create XMLHttpRequest object:

// XMLHttpRequest
var req = new XMLHttpRequest();
▪ onreadystatechange: responseText/XML, var xhttp = new XMLHttpRequest();

status,statusText xhttp.onreadystatechange = function() {

req.onreadystatechange = function(){ if(this.readyState==4 && this.status==200){

if(this.readyState == 4 // if < 4 not ready console.log(this.responseText;)

&& this.status == 200 // 200 : status OK }
){/* code with this.responseText */} };
}; xhttp.open("GET", "../some.txt", true);
▪ open Http request: true - asynchronous, false - xhttp.send();
synchronous
req.open("GET/POST", URL, true/false);
▪ send Http request: send request to server
req.send();
Understanding AJAX
Requests
Objectives

01 AJAX GET & POST Use GET & POST in AJAX requests

02 Asynchronous Apply asynchronous code to handle AJAX requests

GET and POST
Methods of communications between clients and servers

GET and POST: discussed in the AJAX

request context, HTML form based
GET/POST will be discussed later.

▪ GET:
req.open("GET", URL?..., true/false);
sends data to server by adding data
to the server URL
URL?name1=val1&name2=val2&...
▪ POST:
req.open("POST", URL, true/false);
specification of data
req.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
the data to be sent
req.send("name1=val1&name2=val2&...");
Asynchronous
Let the JS process run while waiting for a response

Asynchronous: recommended practice

to avoid the browser to freeze or become
unresponsive.

▪ open Http request:

true - asynchronous
This will let the JS run while waiting for
a response
req.open("GET/POST", URL, true);

false - synchronous
This will keep JS in wait mode till the
server responds
req.open("GET/POST", URL, false);
Recap
Understanding JSON

JSON Scope

Syntax, JSON Data - Local scope, global

Objects - Arrays, JSON to scope, function scope,
Object, Object to JSON undeclared scope,
window object scope,
lifetime
Recap
Understanding HTML Events & AJAX Requests

HTML Events AJAX Http Request

event handler XML, Request data to XMLHttpRequest,

attributes, onclick, the server, Receive onreadystatechange
onload etc. response from the , open Http request,
server send Http request
Recap
Understanding AJAX Requests

GET and POST Asynchronous

Difference between GET Setting the Http request

and POST methods and as Asynchronous and
their syntax Synchronous