Hello friends, today in this tutorial I will be telling you that how to fetch the content
of a basic text file using Ajax. Ajax stands for asynchronous JavaScript and HTML. So you
can see that let me show you example here. So basically this is the server here and we
have this button out there. So as I click this button guys what will happen in the background
Ajax as you all know it's a technology which works in the background. It's full form is
asynchronous JavaScript and HTML. So I have this file called as file.txt in the same directory
where the index.txt file is stored. So as I click this button guys what it will do basically
it will make a GET request to this file here which is hosted here file.txt. So this text
is written here Ken Williamson is captain of design. So as I click this button here
you will see this text will be written here. It will be displayed in the browser. So we
will be trying to fetch the content of the text file here and trying to display it in
the browser like this in this tutorial. So this will be a very simple tutorial all the
step by step instruction will be given in the description of this video. I have written
a complete blog post where you can copy paste all the code. So as I click this button guys
you will see automatically this is changing this context here which is getting this content
from this XML text file here and this is all happening in the background and it is
without page refresh. As you all know guys the page hasn't refreshed. So page refresh
is that one. So when I rewrote the page. So in Ajax as you all know it happens in the
background it doesn't allow the page to refresh. So the data can be fetched like this. You
can see it is happening in real time. So we will try to implement this feature guys. It's
a very interesting feature. So let me just start from scratch. So first of all we will
give it a title here which is Ajax fetch text file local text file and display it inside
the browser in JavaScript. So right here guys you will have a simple div here and here you
will show the actual result and then we will simply say here a button will be there which
will be fetch data like this. So basically we can assign this on click here. So we can
simply assign on click here. So it will fetch data. So this function will execute whenever
you hit this button. So we can simply write here hello world like this. So if you now
refresh your application guys you will have this button here. If I click this button I
need to fetch the content of this file.txt. Just make this file inside your root directory
file.txt. So now we simply need to load this file in the background. So you will write
some JavaScript code for this and we will use the technology of Ajax. So you will write
this function which is fetch data and basically here we will make the XML HTTP request object
as you all know guys this is the part of Ajax. We make this request here XML HTTP request. So
this is the basically a request which will happen in the background and this contains a on load
method guys. So there are a lot of events out there you will see that on abort on error on
load on load and these are all the events out there which happens inside Ajax whenever you
make a XML request. So on load will automatically execute whenever this request is executed or
loaded. So inside this what we need to do is that basically we need to change the text here
We will target the div by its ID that you have given you can see we have given this ID of result
So we just need to pass the ID here result and then you will simply manipulate the inner HTML
property here and we will simply is equal to basically this will be coming here this dot
response text you will see that this dot response text. So basically response text is the actual
value which will be coming whenever we make this post request or get request. So now we simply need
to make this request guy so we will simply write here HTTP and it contains a message guys which is
called as open. So we will make a method here you will open a new connection here and the method
will be get and here we will pass the URL. So it is simply hosted here you can see in the same
directory my file is present file.txt. So that's why I am providing this path here file.txt and
the third parameter is very much important to know guys it takes a Boolean value I read true
or false. So true here simply means that it is asynchronous operation this will happen
asynchronously. So we are not dependent upon this to complete. So if you pass here false this will
be synchronous. So as long as it fetches the file here this will stop the main thread. So it will
not be good for your user experience so that's why we put here true this makes this operation
asynchronous like this. And lastly guys we need to also send this request so this is the send
method which is available inside AJAX. So now what will happen guys you will see if you click
this button this will make this get request to this file here which is file.txt it will get all
this content and it will manipulate the inner HTML this dot response text. So if I open this now
click on fetch data you will now see without reloading the page we are successfully fetching
the content of this text file which is there. So you can even change this context let's suppose
if I change this again if I refresh you will see that automatically it can fetch the newly created
content. So in this way guys you can fetch the content of the text file in AJAX and display it
inside the browser and it uses this XML HTTP request object and I have shown you all the
process step by step and if you want the full source code go to the description of this live
stream with all the instructions and a detailed blog post where I have explained the things in
a lot more detail manner. So please hit that like button subscribe the channel and I will be seeing
you in the next video