JSON and AJAX Tutorial: With Actual Examples

by birtanpublished on July 3, 2020

hello everyone

in this video we will learn what JSON is

what Ajax is and how to use these two

things together to pull new data into

our web pages on the fly let's begin by

looking at a demo of the finished

product that we will be building

together in this video so on this page

we have a heading and a blue button and

when I click the blue button info for

three animals gets loaded in so info on

meow see the cat barking the dog and /

pause the cat is loaded in and if I

click the blue button again

whiskers wolf and fluffy get loaded in

and if I click it one more time

the button disappears and Kitty pupster

and tucks appear now using Java Script

to respond to click events and

manipulating the page is nothing new

we've already learned how to do that in

previous videos the point of this

example is that this content is being

loaded on the fly what do I mean by that

well if we view the source for this HTML

page so view page source notice that we

don't see any of those sentences about

the animals this is because when this

page first loads it doesn't contain any

of that data instead I've used Java

Script to say that when this button gets

clicked the web browser should go out

onto the internet download a tiny bit of

new data from a different URL and then

again I use JavaScript to output that

data into this empty div and onto the

page and all of this happens on the fly

without a page refresh this might not be

the most exciting project in the world

but I promise it will teach you the

basics of JSON and Ajax let's get

started alright so behind the scenes I

just removed all of the JavaScript from

this page so now if I click the button

absolutely nothing happens so now you

and I can start from this same beginning

and move forward together so if I jump

over to my text editor we will review

this HTML a bit later in the video but

it's not important for now all that is

important right now is that you create a

new

HTML file on your computer so you can

follow along and be sure to include a

reference to a new javascript file if

you're not sure how to do that I

recommend watching my JavaScript in half

an hour video but for now let's keep

things rolling so I'm going to jump over

to my brand new completely empty

JavaScript file and let's write some

code now we'll need to learn how to walk

before we can run so what I mean by that

is before we learn how to tell the

browser to go download new data from a

different URL before we do that let's

first learn about the most common way of

storing and working with data in

JavaScript which is JSON it all boils

down to two things objects and arrays

let's talk about objects first so let's

say I want to store data about a cat and

I want all of this data to live within

one variable or one object so I could

create a variable and name it my cat and

say that it is an object and then I can

assign it different properties and

values so I can say that the object

should have a property named name and

then we assign it a value so maybe the

cat's name is meows a lot and this

object can have a different property so

let's add a species property and give it

a value of cat and let's add one more

property named fav food and we'll give

it a value of tuna all right so this is

an object now if I want it to access the

cat's name somewhere else in my code I

would just type my cat dot name and this

would return a value of meows a lot or

if I wanted to access the cat's favorite

food I would just say my cat dot fav

food and this would return a value of

tuna all right so this is an example of

how to access data that lives in an

object now let's talk about arrays let's

imagine I want to create a single

variable that contains all of my

favorite colors so to do that I would

use an array so let's delete this and

instead let's create a new variable I

will name it my fav colors and let's

tell it to be an array so we say equal

and then

pair of square brackets and an array is

just a comma-separated list so I would

list my first favorite color blue and

then a comma and then I can include

another value so green and then a comma

I can include another value purple all

right so this is an array and if I

needed to access the second item in the

array so the value of green if I wanted

to access that somewhere else in my code

I would just type my fav colors square

brackets and then the number one we

would use the number one to access the

second value because arrays are zero

based meaning you would access the first

value with a zero here instead of a one

you access the second value with a one

you would access the third value with a

two so on and so forth alright so this

is how you access data that lives in an

array so to recap so far we've seen an

object by itself we've seen an array by

itself now what if we do something crazy

and combine the two so for example what

if we want it to have a single variable

that contained data for multiple pets we

can do that by creating a new variable

so let me delete this line let's create

a new variable named the pets let's tell

it to be an array only this time we

don't want an array of simple text

string values this time we want an array

of objects so to define an object you

just open up a pair of curly brackets so

we could define our first animal or pet

object within these brackets and then

include a comma and then another object

and then a comma and then another object

you get the idea but including this much

data on a single line of code can begin

to look messy or complicated so instead

let's drop down to a new line in between

our array square brackets and then in

between those two lines we can create

curly brackets for an object and let's

just create two let's say we want two

pets or two animals to live within this

array all right now let's actually

define our objects so we can just copy

the code that we have up here so I will

copy these three lines into my clipboard

and then within our curly brackets down

here I'll just drop down to a new line

and paste in so our first pet

object in this array is meows alot the

cat let's paste those three lines into

our second object only this time we'll

change the name to bar key and we'll say

that bar key is a dog and we'll say that

his favourite food is carrots and we can

delete these lines we don't need them

anymore alright so now we have a single

variable that contains all of our data

and I have a surprise for you you just

learned JSON so the code that I have

highlighted right now is an example of

JSON objects and arrays nested inside

each other JSON is just a popular and

agreed-upon format for sending receiving

and storing data the JSON acronym stands

for JavaScript object notation all right

and as an example if we wanted to access

barkis favorite foods somewhere else in

our code we would just type out the name

of our variable so the pets it's an

array and we want to access data that

lives in the second item of the array

arrays are zero-based so to access the

second item we would say one and then

it's an object so to access one of its

properties we just include a period and

then the name of the property we want

and that's it so this would return a

value of carrots as another example if

we wanted to create HTML paragraph

elements with sentences for each object

that read meows a lot is a cat that

loves tuna and barky is a dog that loves

carrots if we wanted to do that we would

just loop through this array and create

an HTML text string and then add it to

the Dom now we will learn how to do

exactly that step by step in detail a

bit later on in the video but for now

let's keep things rolling so we've

learned about JSON now let's learn about

Ajax all right so we have a bit of JSON

data here but in the real world you

typically won't have JSON data just

conveniently sitting in your JavaScript

file like this in the real world you'd

probably need to load JSON from a

dynamic source like another URL that is

powered by a database so let's make it

our goal for the remainder of this video

to load the JSON data from this URL I

encourage you to follow along on your

computer so you can either pause the

video right now and type out this URL or

the easier option is to just copy and

paste this URL by finding it in the

description for this video either way

our goal for the remainder of this video

is to use JavaScript and Ajax to visit

this URL and download this JSON data on

the fly so that we can use it on our

webpage ok so to get started let's jump

back to our javascript file and let's

delete everything we have and start

fresh all right now the process of

sending or receiving data on the fly

without a page reload is known as Ajax

and we'll learn what that acronym stands

for in just a moment

now web browsers have a built-in tool

named XML HTTP request and this tool

will do the heavy lifting for us this

tool will establish a connection with a

URL that we specify and then it lets us

send or receive data so let's create a

new instance of this tool to begin we

will create a new variable and we can

name the variable anything we'd like but

I'm going to name it our request and

then we just set that variable to equal

a new instance of the XML HTTP request

tool all right now we just need to tell

our variable to actually do something

now the web browser will expect our

variable to use a method named open so

to specify that we just say our request

dot open and this is our chance to say

what we want to do so we will want to

pass this open method to arguments the

first argument is whether we want to

send data or receive data in our case we

want to receive

we want to download data so we say get

we want to go get data if instead we

wanted to send data to a server we would

say post but we want to download or get

data so we say get and the second

argument that we will want to give this

method is simply the URL that we want to

talk to so in this case that's the URL

that I showed a moment ago so again you

can pause the video and type out this

URL or you can find this URL in the

description for this video and just copy

and paste it

but either way we want this URL this is

where the JSON lives so I copied that

URL into my clipboard and then back in

my text editor I'm just going to paste

it in as the second argument so this

line of code will tell the browser to go

to this URL and get the JSON data now

next we need to actually do something

with that data so let's drop down to a

new line

we'll start with our variable so our

request and we want to use a method

named on load so this is where we say

what should happen once the data is

loaded so we're just going to set this

to equal an anonymous function all right

and within the body of this function we

can do anything we'd like just as a

quick example or a quick test let's log

out the JSON data that we download out

to the console so console dot log and we

can access the data that we just

downloaded by saying our request dot

response text all right so at this point

we've defined our request the final step

is to actually send the request so we

just say our request dot send alright so

if I save this and visit my HTML page in

the browser and refresh and if I view my

developer tools console perfect so here

we see the content from the URL that we

specified okay so we logged that out to

the console as a proof-of-concept now

let's try to do something more useful

with the data

let's try saving it to a variable so

back in our text editor within the

onload function let's delete this line

where we log it out to the console

and instead let's create a variable we

can name it anything we'd like I will

name it our data and then just set it to

equal the contents from the URL that we

specified so to access that content

it's our request dot response text all

right so now we have all of the data

within our convenient new variable name

now let's give ourselves a new example

task let's imagine we only want to log

out to the console the first pet object

within this array of data so for example

if I go back to that URL currently that

our data variable contains all of this

content and just as an exercise let's

try to log out only this first object

out to the console so only the info

about meow see the cat so back in our

text editor to do that we could drop

down to a new line and say console log

we know that that data lives in our our

data variable and we know that that is

an array of objects so if we only want

the first item in the array 0 all right

now if I save this and refresh we see

that the only thing that got logged out

to the console is an opening square

bracket now this is not what we were

hoping to see but let me explain why

this happened

by default when our browser goes out to

this URL and downloads this data it

doesn't know to interpret this as JSON

data right so by default the web browser

doesn't know that this is an object or

that the entire thing is an array of

objects by default the browser is just

interpreting this as plain text as a

giant text string so back in our text

editor when we said go into the our data

variable and return the first item in

the array our browser says okay this

data is just a simple text string not a

traditional array and the first item in

the text string if you treat a text

string like an array is just this

opening square bracket so that's why

that's all we received when we tried to

log it out to the console so obviously

the solution here is to tell our browser

to not view this as a giant text string

but instead to interpret it as real JSON

data as objects and arrays so back in

our

odhh when we are taking the response

text or the content that lives at the

URL and saving it into our variable we

want to first tell the browser to

interpret this as JSON data so let's

delete this and instead we can use a

tool that our browser has built into it

so JSON dot parse and then within these

parentheses we can include the content

that gets pulled in from the URL so now

we can say our request dot response text

so now the content that lives at that

URL will be passed through our browser's

JSON filter so if we save this and

refresh our webpage and check out the

console perfect we see only the first

object on musi the cat and

congratulations you just performed your

first bit of Ajax let's take a minute to

talk about the ajax name so the ajax

acronym stands for asynchronous

JavaScript and XML the word asynchronous

in this context just means in the

background or not requiring a page

refresh and if you're wondering what XML

is XML is a data format that's very

similar to JSON now we are not going to

actually use XML we are using JSON

instead so I guess you could call what

we're doing a Jash instead of Ajax right

so it's asynchronous JavaScript and JSON

because in recent years JSON has

replaced XML as the more popular data

format so JSON has become the industry

standard data format but XML was very

important for a very long time and

overall XML was very important to the

history of modern web development so

that's why the Ajax name sticks even

though most of us are using JSON instead

of XML and just in case you were curious

this also explains why the browser's

built-in tool is named XML HTTP requests

we are technically using this tool to go

out and download JSON not XML data but

again XML was so integral to the history

of web development that the name just

kind of stays around even if that's not

exactly what you're doing all right

let's move on now

this point in the lesson we've learned

what JSON is we've learned what Ajax is

and we've successfully pulled in data on

the fly and saved it to a variable so

now for the remainder of this video it's

really just a matter of completing

generic JavaScript tasks right so number

one we need to respond to the blue

button click events and number two we

need to add new HTML to the page based

on the contents of the our data variable

alright so let's get to work currently

our code is set up so that our Ajax call

to download new data runs as soon as the

page loads and we don't want that we

only want to go and download the new

data if and when someone clicks the blue

button so let's begin by adding an event

listener for this blue button and then

we will only run our Ajax call when that

event is triggered so to begin let's

create a JavaScript variable that points

towards the blue button HTML element so

in my HTML file here is the blue button

element and you can see that I've given

it an ID of button or BTN so make sure

that your HTML looks similar to this and

then back in our JavaScript up at the

very top let's create a variable we can

name it anything we'd like I'm just

going to name it button or BTN and then

I'm just going to select that HTML

button element so document get element

by ID button all right so now we have

this convenient variable that points

towards that element now let's set up an

event listener for when the button gets

clicked so we just say button add event

listener the event that we are listening

for is the click event and then what do

we want to actually happen when it gets

clicked well instead of calling a

specific function let's just open an

anonymous function here alright and now

within the body of the synonymous

function we can just cut and paste our

Ajax call so all of these lines that we

wrote earlier I'm going to cut them into

my clipboard and then within this

anonymous function I'm just going to

paste in my clipboard

all right so if I save this and refresh

in the browser

notice that my console is empty but as

soon as I click the blue button now if I

check my console we see that our Ajax

request ran successfully all right next

we don't actually want to log anything

to the console that was just for testing

purposes what we actually want to do is

add HTML paragraph elements for each

animal that says their name their

species so on and so forth so back in

the text editor within our onload

function let's remove this line where we

are logging data out to the console and

we could technically write code here

that adds HTML to the page but in order

to stay organized why don't we create a

new function down at the very bottom of

our file whose sole job is to create and

add HTML to the page so this way our

code stays organized so let's create a

new function we can name it anything

we'd like I'm going to name it render

HTML all right we will build out what

this function actually does in just a

moment but first within our Ajax call

now we will simply call the render HTML

function so render HTML and we want to

be sure to pass this function the our

data variable so that it can work with

the data so within the parentheses when

we are calling the function you can just

pass in our data all right now within

the signature for our new custom

function within these parentheses we

just need to include one parameter name

we can name it anything we'd like let's

just call it data for short all right

and now within this function we can

access the JSON data that got pulled in

with Ajax by simply saying data ok but

let's start simple so remember this

functions job is to add HTML to the page

more specifically it's going to add HTML

to this empty div element notice that

I've given the empty div element an ID

of animal info so make sure that your

HTML looks similar to this and then

within our JavaScript up at the very top

let's create a variable that points

towards the empty D

give so variable we can omit anything

we'd like I will call it animal

container and then we just select the

empty div so document get element by ID

and it had an ID of animal info all

right so now within our render HTML

function we can target that empty div by

using its variable so animal container

and then we can use a method that is

available to all Dom elements named

insert adjacent HTML let's say that we

want to add HTML right before the end of

this element so we say b4 and comma and

then the second argument is simply the

content or HTML that we want to add so

if we said testing one two three

save this and refresh the page and click

the blue button we see testing one two

three

all right only instead of spelling out

the text we want within this function

call instead why don't we create a

variable we can name it anything we'd

like I will name it HTML string and

let's set it to equal this is a test and

then down on this line instead of

spelling out the content we want let's

just point towards this variable name so

HTML string so if we save this and test

it out click the blue button now the

reason this is nice is now we are free

to loop through the JSON data that we

received via Ajax we can loop through

that data and just continually add on or

concatenate to this variable it's hard

to explain with words so let me just

show you what I'm talking about so when

we first define this variable let's

actually tell it to just be an empty

string all right and then on a new line

what we are going to do is loop through

our array of pet objects and do

something once for each object in the

array now if you've never used a for

loop before I recommend watching my

JavaScript in half-an-hour video it

explains how for loops work in detail

because in order to keep this video

rolling along at a nice pace I'm just

going to have to assume that you

understand for loops alright so

begin a for-loop so I will begin as zero

and we want the for-loop to run as long

as I is less than the length of our

array so remember our array of objects

we can access it with data so I'll just

say as long as I is less than data dot

length then we want to increment I each

time the loop runs all right and then

within these curly brackets we get to

say what should happen for each item in

the array so what we want to do is just

add on or concatenate on to our HTML

string variable so let's say HTML string

we want to add on to it so plus sign

equal sign and remember we want to

create a paragraph element for each

object in the array so open up a Pete

AGG and then let's output the name of

each animal or each pet remember we can

access the JSON data with the word data

so we'll say data which gives us the

array of objects look inside that array

for the first item so because I equals 0

to begin with this will select the first

object in the array which is meow Z the

cat and then once the loop runs again I

will get incremented so I will equal 1

and then when this code runs again this

would obviously select the second object

in the array so on and so forth okay but

remember here we're trying to output the

name of the object so just to put this

into context if we look at the URL of

where we're grabbing the JSON from each

object in the array has a name property

so back in our code we can access that

property by saying dot name and then

let's say that that animal is a and then

let's output their species property so

data select whichever item in the array

we've looped through and then we want

the species property alright and then

let's just add a period at the end of

our sentence and close out the paragraph

element so we'll add a period and we'll

close out the paragraph element all

right let's save this and refresh our

page and hit the blue button perfect we

see meow see the cat barking the dog and

/ pause the cat but what if we click the

blue button

second time well currently that will

load the same three animals again which

is not what we want we want to load new

data for three different animals so

check this out if I go back to that URL

that we are loading with Ajax notice

that the URL ends in – one dot JSON and

if I visit a slightly different URL of –

– instead of – one notice that this URL

has information for three different

animals so whiskers the cat woof the dog

and fluffy the cat so a big part of Ajax

is requesting data from the right URL at

the right moment so let's adjust our

code so that the first time someone

clicks on the blue button we load the –

one URL the second time the button gets

clicked we load data from – – and the

third time the button gets clicked we

will load – three JSON and we will hide

the blue button so that it cannot be

clicked a fourth time okay so to do that

let's begin by jumping over to our

JavaScript and up on the very first line

let's create a new variable that equals

one and then we can increment or

increase that variable by one each time

the button gets clicked so let's create

a variable we can name it anything but I

will name it page counter and we want it

to begin with a value of one all right

next on the line where we specify which

URL we want to download data from we

want to make this URL dynamic with the

help of our page counter variable so

here's the URL that we are currently

downloading data from and if I scroll to

the right a bit here we see the – one

part of the URL let's replace the

hard-coded value of one with our page

counter variable so we'll close out that

first quote and then we'll add in our

variable so page counter and then we

will just add in this closing string all

right and then if I scroll back to the

left after this line of code where we

send our Ajax request we just want to

increment our page counter value by one

so we can just say page counter plus

plus okay so now when someone clicks the

blue button for the first time page

counter will have a value of

so what will load the – one JSON file

right after that happens the variable

will be incremented so then it's – so

then obviously the next time we click

the button it will load the – to JSON

file all right so let's save this and

take it for a spin

first click we see meows E bar key and /

pause second click whiskers whoof and

fluffy and third click kitty pups during

tux and if I click the button a fourth

time nothing happens and if I check the

console we actually see an error message

so you can see that it's trying to find

the URL that lives at animals – for JSON

and that file doesn't exist okay so if

we know that the server only has animals

– one through three

after the third click we should have

this blue button disappear so that it

can't be clicked any longer so to make

that happen back in our text editor

after the line where we increment our

page counter variable let's just add an

if statement and we'll say if the page

counter variable is larger than 3 if

that's the case if that's true then

let's add a CSS class to the button

element that hides it so we have our

button variable that targets that

element we will adjust its class list we

will add a CSS class named Hidemi so you

will want to add a bit of CSS to your

page you'll want to add a class named

hide me and set its display value to

none or set its visibility to hidden you

get the idea so if I save that and

refresh the page

one click – click third click the button

disappears perfect okay now all that's

left is to also output each animals

favorite and least favorite foods so for

example if we look at the raw JSON data

that we are working with we know that we

have the name property and the species

property we also have a foods property

which in and of itself is an object that

contains other children properties so

the foods object contains a likes

property and a dislikes property and

notice that the values for the likes and

dislikes properties

actually arrays so whiskers the cat

likes multiple foods he like celery and

strawberries this is the neat thing

about JSON it lets us nest objects

inside of objects and it lets us nest

arrays inside of arrays all right so for

this last part of the video let's work

on outputting the favorite and least

favorite foods onto the page so back in

our text editor let's scroll down to our

render HTML function and on this line we

no longer want to end the sentence and

end the paragraph element so instead

let's change this to read blank name is

a blank species that likes to eat all

right and then on the next line we will

list and loop through their favorite

foods so let's drop down to a new line

and remember that currently we are in a

for loop so the code we write here will

run once for each object in the array so

we just want to look for the current

objects foods property and we want to

look inside it for the likes property

which is an array and then we just want

to loop through that to list out all of

their favorite foods alright so back in

our code to loop through that array of

favorite foods we will want to use a for

loop nested within our current for loop

so we'll say for let's use double I for

our counter to loop through this nested

favorite foods array so we'll say that

as long as double I is less than the

length of the favorite foods array so

we'll say data the current object in the

array that we have looped to and then we

want to look inside it for the foods

property and then inside that we want to

look for the likes property and we want

to find out how many items there are in

it so dot length all right and then the

final part of our for loop we want to

increment I I by one alright and then

let's open up a pair of curly brackets

so now anything we write will run once

for each of the favorite food items so

we just want to concatenate them to the

HTML string so we'll say HTML string add

on to it plus

equals and then we just want to add on

the current favorite food so data the

current item we've looped through foods

likes and likes is an array itself so

then we want the current item which is

our counter I I all right and then after

this nested for loop but still within

our overall for loop let's be sure to

add in the closing period in the closing

paragraph tag so on this line we can

just say HTML string and add on a period

and a closing P tag let's save this and

refresh so it looks like we need to add

a space in between each individual food

right so there should be a space between

tuna and catnip and there should be a

space between bones and carrots so to do

that back in our code within our nested

for loop let's use an if statement so to

begin let's cut this line of code into

our clipboard this line of code where we

are outputting each favorite food so

I'll cut that alright and now let's use

an if statement so we'll say if the

current favorite food that we are

outputting is the first item in the

array we'll do one thing but otherwise

else if it's the second or third

favorite food we'll do something else

all right so within this first condition

of the if statement we can paste our

clipboard back in so if it's the first

favorite food in the array this works

fine but otherwise if it's the second or

third favorite food item let's be sure

to add in a space the word and and then

another space and then output the

favorite food all right so let's save

this and refresh perfect likes to eat

tuna and catnip bones and carrots all

right and now we just need to do the

same thing for each animal's least

favorite foods so back in our JavaScript

after this nested for loop let's add a

bit of text to our string so HTML string

and we'll add a space and say and

dislikes alright and then we can really

just copy and paste this nested for loop

and tell it to work

the dislikes array instead of the likes

array so let's just copy this to our

clipboard and then after this line let's

paste in our clipboard let's change this

from likes to dislikes change this to

dislikes and this to dislikes

alright let's save this and refresh meow

z is a cat that likes to eat tuna and

catnip and dislikes ham and zucchini

beautiful if we click the button a few

more times it's working just like we had

hoped

now before we bring this video to a

close I want to try and answer a few of

the most common questions you might have

right now so question number one is

where will I know to look for JSON URLs

in the real world right because in the

real world there won't be some guy on

YouTube telling you the exact URLs to

look for the answer is that every system

is different it just depends on the

source of your data are you trying to

pull data from WordPress are you trying

to pull data from a weather forecast

service or from a custom PHP or node API

that you built that pulls data from a

database you get the idea so there are a

million possibilities and each system

will generate slightly different URLs

that you can tweak to return different

JSON so remember in our example how we

could tweak this number to be either 1 2

or 3 to pull in different data well in

the real world many of the JSON URLs

that you visit will have parameters that

you can include in the URL to control

how many items are returned which items

are returned and the order that they are

returned in so on and so forth if you're

interested in learning more about that

you can look up REST API s all right now

as of the recording of this video there

is a neat website named Phil txt this

website has a bunch of example JSON

endpoint URLs that you can experiment

with if you feel like practicing Ajax ok

question number 2 creating an HTML

string that used our JSON data was not

very enjoyable is there a better way of

doing that the answer is absolutely yes

there is a better way I only used

concatenation and for loops like that in

this video because I didn't want to

introduce yet and

other different technology but in the

real world I'd recommend a JavaScript

templating solution named handlebars

handlebars has been around for a long

time it's super popular super useful and

it makes creating HTML out of JSON data

much much simpler I'll try to cover

handlebars

in a future video all right and the

final question question number three

what about error handling for our Ajax

requests right because we don't live in

a perfect world and sometimes the

browser connection to go out and send a

receive data will fail well the good

news is that it's very simple to set up

error handling so let me jump into the

javascript file and we can set up error

handling right now so if I scroll up a

bit right before this line of code where

we send our Ajax request let's add a new

line and let's say our request dot on

error and let's tell it to equal an

anonymous function and now this is your

chance to say what should happen if the

connection just fails outright so maybe

the users internet connection is

temporarily down or something like that

so you can just log out to the console

just as an example you could say

connection error obviously in the real

world you'd want to do something more

useful than just logging out to the

console but the general idea is that

this is how you handle outright

connection failures and then there will

be other times where your internet

connection is working just fine and

you're able to connect to the URL or

server that you're trying to connect to

but for whatever reason the server

itself returns an error or the data just

doesn't come through correctly and to

cover that case we can just add another

layer of error handling so within our

onload function let's add a new line and

let's add an if statement to look for

potential errors so I'll say if our

request dot status if it is equal to or

greater than 200 and that same value our

request dot status is also less than 400

this means that we were able to

successfully receive the data so if

things are successful we just want to

run the code

that we already had so I'm just going to

cut these two lines into these curly

brackets but if this isn't the case that

means we ran into an error after we

connected to this URL so then we can

just say else and then you would handle

the error here so you would do something

more useful than this but I'm just going

to log out to the console and say we

connected to the server but it returned

an error all right and that's how you

implement basic error handling for your

Ajax requests that's going to bring this

video to a close thank you so much for

watching I hope you feel like you

learned something and stay tuned for a

new video next Tuesday thanks bye if you

haven't already be sure to check out my

brand new get a web developer job

mastering the modern workflow course as

always there's a link to it in the

description

Related Videos

Be the first to comment “JSON and AJAX Tutorial: With Actual Examples”

Your email address will not be published.

There are no comments yet.