This document provides an overview of JavaScript, JSON, and AJAX. It defines key terms like JSON, XMLHttpRequest, and asynchronous JavaScript and XML (AJAX). It explains JSON syntax and data types. It also provides examples of using the XMLHttpRequest object to make AJAX requests to retrieve and send data to a server, and examples of building webpages that dynamically load content via AJAX calls.

2. COURSE 10
JAVASCRIPT
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

3. C10 – JAVASCRIPT
• JSON
• AJAX

4. JSON
• JSON stands for JavaScript Object Notation
• JSON is a syntax for storing and exchanging data
• JSON is text, written with JavaScript object notation
• JSON is "self-describing" and easy to understand
• JSON is language independent
• JSON uses JavaScript syntax, but the JSON format is text
only
• Text can be read and used as a data format by any
programming language

5. JSON SYNTAX
JSON syntax is derived from JavaScript object
notation syntax:
• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays

6. JSON DATA
• JSON data is written as name/value pairs
• A name/value pair consists of a field name (in
double quotes), followed by a colon, followed
by a value:
JSON JavaScript
JSON always uses double quotes

7. JSON FILES
• The file type for JSON files is ".json"

8. JSON VS XML
• Both JSON and XML can be used to receive data
from a web server
JSON
XML

9. JSON VS XML
• XML is much more difficult to parse than JSON
• JSON is parsed into a ready-to-use JavaScript object
• For AJAX applications, JSON is faster and easier than
XML
• Using XML
• Fetch an XML document
• Use the XML DOM to loop through the document
• Extract values and store in variables
• Using JSON
• Fetch a JSON string
• JSON.Parse the JSON string

10. JSON DATA TYPES
In JSON, values must be one of the following data
types:
• a string
• a number
• an object (JSON object)
• an array
• a boolean
• null
JSON values cannot be one of the following data
types:
• a function
• a date

11. JSON OBJECTS
• JSON objects are surrounded by curly braces {}
• JSON objects are written in key/value pairs
• Keys must be strings, and values must be a
valid JSON data type (string, number, object,
array, boolean or null)
• Keys and values are separated by a colon
• Each key/value pair is separated by a comma

12. NESTED JSON OBJECTS
• Values in a JSON object can be another JSON
object

13. ACCESSING OBJECT VALUES
• You can access the object values by using dot
(.) notation

14. LOOPING THROUGH AN OBJECT
• You can loop through object properties by
using the for-in loop

15. LOOPING THROUGH AN OBJECT
• In a for-in loop, use the bracket notation to
access the property values

16. UPDATING AND DELETING
VALUES
• You can use the dot notation
to modify any value in a JSON
object
• You can also use the bracket
notation to modify a value in
a JSON object
• Use the delete keyword to
delete properties from a JSON
object

17. JSON PARSE
• A common use of JSON is to exchange data
to/from a web server
• When receiving data from a web server, the
data is always a string
• Parse the data with JSON.parse(), and the
data becomes a JavaScript object

18. JSON PARSE

19. JSON STRINGIFY
• When sending data to a web server, the data
has to be a string
• Convert a JavaScript object into a string with
JSON.stringify()

20. AJAX
AJAX is used to
• Read data from a web server - after the page has
loaded
• Update a web page without reloading the page
• Send data to a web server - in the background

21. AJAX
• AJAX stands for Asynchronous JavaScript And XML
• AJAX is not a programming language
• AJAX just uses a combination of:
• A browser built-in XMLHttpRequest object (to request data from a
web server)
• JavaScript and HTML DOM (to display or use the data)
• AJAX is a misleading name
• AJAX applications might use XML to transport data, but it is more
common to transport data as plain text or JSON text
• AJAX allows web pages to be updated asynchronously by
exchanging data with a web server behind the scenes
• This means that it is possible to update parts of a web page,
without reloading the whole page

22. AJAX
Data request
An event occurs:
• Create an XMLHttpRequest
object
• Send HttpRequest
Backend
• Process HttpRequest
• Create a response and send
back to the browser
Data processing
• Process the returned data
using JavaScript
• Update page content
Interne
t
Interne
t
Browser
Server

23. THE XMLHTTPREQUEST OBJECT
• The keystone of AJAX is the XMLHttpRequest
object
• All modern browsers support the
XMLHttpRequest object
• The XMLHttpRequest object can be used to
exchange data with a web server behind the
scenes
• This means that it is possible to update parts of a
web page, without reloading the whole page

24. THE XMLHTTPREQUEST OBJECT
• Syntax for creating an XMLHttpRequest object
• For security reasons, modern browsers do not
allow access across domains
• This means that both the web page and the XML file
it tries to load, must be located on the same server

25. XMLHTTPREQUEST OBJECT
METHODS
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async,
user, psw)
Specifies the request
method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)
user: optional username
psw: optional password
send()
Sends the request to the server
Used for GET requests
send(string)
Sends the request to the server.
Used for POST requests
setRequestHeader()
Adds a label/value pair to the header to

26. XMLHTTPREQUEST OBJECT
PROPERTIES
Property Description
onreadystatechange
Defines a function to be called when the
readyState property changes
readyState
Holds the status of the XMLHttpRequest
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status
Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found“
… etc.
statusText
Returns the status-text (e.g. "OK" or "Not

27. AJAX – GETTING DATA FROM A
SERVER
• To send a request to a server, we use the
open() and send() methods of the
XMLHttpRequest object
• We then used the GET method, to download
data from the server

28. AJAX – SENDING DATA TO A SERVER
• To send a request to a server, we use the
open() and send() methods of the
XMLHttpRequest object
• We then used the POST method, to upload data
to the server

29. AJAX – SERVER RESPONSE
• The onreadystatechange property
• The readyState property holds the status of the
XMLHttpRequest
• The onreadystatechange property defines a function
to be executed when the readyState changes
• The status property and the statusText property
holds the status of the XMLHttpRequest object
• The onreadystatechange function is called every
time the readyState changes

30. AJAX – SERVER RESPONSE
• Using a Callback Function
• A callback function is a function passed as a
parameter to another function
• If you have more than one AJAX task in a website,
you should create one function for executing the
XMLHttpRequest object, and one callback function
for each AJAX task
• The function call should contain the URL and what
function to call when the response is ready

31. AJAX – SERVER RESPONSE

32. AJAX – SERVER RESPONSE
• Alternatively, the onload function can be used
• The onload function is called every time data
is available from the server

33. JSON & AJAX – EXAMPLE 01
• Design a webpage that on every button press
loads 3 pieces of data

34. JSON & AJAX – EXAMPLE 01
• To get data, we are going to use the “Users”
section of the
https://jsonplaceholder.typicode.com page
• To get all the comments we can access
https://jsonplaceholder.typicode.com/users/

35. JSON & AJAX – EXAMPLE 01

36. JSON & AJAX – EXAMPLE 01

37. JSON & AJAX – EXAMPLE 01

38. JSON & AJAX – EXAMPLE 01

39. JSON & AJAX – EXAMPLE 01

40. JSON & AJAX – EXAMPLE 01
Why?

41. JSON & AJAX – EXAMPLE 01

42. JSON & AJAX – EXAMPLE 01

43. JSON & AJAX – EXAMPLE 01
Why?

44. JSON & AJAX – EXAMPLE 01

45. JSON & AJAX – EXAMPLE 01

46. JSON & AJAX – EXAMPLE 01

47. JSON & AJAX – EXAMPLE 01

48. JSON & AJAX – EXAMPLE 02
• Design a webpage with infinite scroll
• Content is dynamically loaded whenever the user
gets close to the bottom of the page (e.g.: Facebook,
9GAG, etc.)

49. JSON & AJAX – EXAMPLE 02
• To get data, we are going to use the
“Comments” section of the
https://jsonplaceholder.typicode.com page
• To get all the comments we can access
https://jsonplaceholder.typicode.com/comme
nts/

50. JSON & AJAX – EXAMPLE 02

51. JSON & AJAX – EXAMPLE 02
• To get a single comment, we can access
https://jsonplaceholder.typicode.com/comme
nts/id

52. JSON & AJAX – EXAMPLE 02
• Most HTML will be dynamically generated, so
our starting index.html file is very simple

53. JSON & AJAX – EXAMPLE 02
• Now, we must design how we want a comment
to look like on our webpage
h1 with id of
“name”
h3 with id of
“email”
h1 with id of
“label”
p with id of
“message”
scroll position
counters
(for debugging only)

54. JSON & AJAX – EXAMPLE 02

55. JSON & AJAX – EXAMPLE 02
• First, we want to cache the DOM
• Then we want to load at least some data onto
our webpage: we’ll load initially 10 pieces of
data

56. JSON & AJAX – EXAMPLE 02
• The renderComment(cnt) function gets the
data from the server and generates the HTML
from it

57. JSON & AJAX – EXAMPLE 02
• The renderComment(cnt) function gets the
data from the server and generates the HTML
from it

58. JSON & AJAX – EXAMPLE 02
Why isn’t my
data in the
correct order?

59. JSON & AJAX – EXAMPLE 02
• An AJAX request is asynchronous by default
• It does not wait for the server response before
executing the next line of code → data that arrives
earlier will be the first to be displayed
• Can this be fixed?
• Yes, we can make the call synchronous

60. JSON & AJAX – EXAMPLE 02

61. JSON & AJAX – EXAMPLE 02
• In order to load new data when the user
reaches the end of the page, we must
determine when he reached the end of the
page and take action (i.e.: load new data)
• In order to achieve this, we “listen” every time
the user scrolls:
• Determine where the current scroll position is
• Determine what is the maximum scrollable amount
• If the current scroll positions is the maximum
scrollable amount, then we know we must load new

62. JSON & AJAX – EXAMPLE 02

63. JSON & AJAX – EXAMPLE 02

64. JSON & AJAX – EXAMPLE 02

65. JSON & AJAX – EXAMPLE 02

66. JSON & AJAX – EXAMPLE 02
• Identify possible code failure points

67. BIBLIOGRAPHY
• https://www.w3schools.com/js/js_json_intro.a
sp
• https://www.w3schools.com/js/js_ajax_intro.a
sp
• https://www.w3schools.com/js/js_window.asp
• https://jsonplaceholder.typicode.com
• http://www.filltext.com/

68. COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies