jQuery and AJAX Tutorials 31 | First AJAX Implementation Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
this is your thirty first tutorial on
jQuery and now we work with Ajax so this
is your pretty much the most important
lesson on AJAX for the most part and we
are using this function get to get this
files contents and this is the path to
the file which contents we need and this
get functions function takes two
parameters which is pass through the
file and the function and this function
will run when the when the server
responds and when the server responds
server delivers data and we call the
variable data and you can access the
variable data with this function again
this is pretty much your servers respond
and the server's answer is just exactly
the contents of this file because it's a
simple txt file it doesn't have any
echoes like in PHP so it only gives its
own contents to to this edge X function
alright I talked a lot and it's probably
sometimes very hard to understand so
we'll just go ahead and program this
function so that we just know how it
works but before we can work with it we
need to get a path of this text document
we are looking for and you know we have
eight images and we also have H text
documents and I called I named them from
1 to 8 and the HTML elements image they
also have IDs from 1 to 8 so if user
clicks image number 4 and we have the
this ID 4 we only need to add the txt
extension and there we go and so we can
get the file so I'll create a variable
and I call it half so I set it equal to
texts because the this these text
documents are stored in a folder called
text right here and it says slash and
then a plus and then ID and this ID is a
is a variable is a parameter which we
pass to this function when when we call
it and we just fetch this ID using this
jQuery function of attribute and after
we have our ID we only need to add the
extension of the file which is dot txt
and then we are done so and I'll just
replace this path in the parenthesis to
the word path which is a variable we
just defined and now we already have the
access to this data and let's just go
ahead and print it out like this using
this console log function so we can just
displays this data so what do we expect
this code to do every time we open any
picture we will get the descriptions of
the of this image in the console so
let's just go ahead and test it I'll
reload the page click the first picture
and then I need to open the console so
right now I see this is saying 1 dot
description for blablabla and this is
the text we have in the third in the
fourth and the fifth document and in the
H document I wrote something else
I wrote this phrase this is a simple
description for our awesome portfolio so
when I open the picture number 8 I
expect this text to appear and it does
this is a sample blah blah blah so now
we have so this is pretty much how a
jaques works and this was like the
simpliest magics a request I ever know
so and in the next tutorials I'll try to
figure out some more like complicated
requests so you guys learned a lot about
Ajax and how jQuery worked with EDX
and just in orders that you can compare
how many lines of code you would you
would need if you use it with you if you
do the same using javascript like a
normal JavaScript you would need a
variable called Alice College xml
httprequest and set equal to new
xmlhttprequest and then you would cook
like define a bunch of functions and
then when server responds you'll also
have a function so it will take like I
don't want to do it right now because
it's not a tutorial on that you'll have
like eight or ten lines of code only to
fetch the contents of this text file and
in jQuery well it's actually only one
line of code so we make it three lines
of code it's actually one line of code
so and you can get a file two files
contents contents and in the next
tutorial we are going to display this
content just this description not in the
console because it's stupid will display
it are right here just under the picture
so I hope you guys like this tutorial
and now you are familiar with add Jack's
and you know what adjectives toriel we
are gonna go and make some cool stuff so
thanks for watching guys and I'll see
you guys in the thirty second tutorial
have a nice fun