So you can see side by side.
I opened my Visual Studio Code editor and I opened my browser using Live server extension, and I already
created an HTML file in my directory, and I want to load a text file in my index.html file using h6.
So I create a text file name text dot txt inside content directory and you can see inside this text
file I write some text.
Hello, I am text file.
So I'm going to load this file in my index.html file using h6.
First I'm going to create a paragraph tag and our id is demo.
And insert this paragraph I'm going to type here.
We load data.
And now I'm going to create a button.
So whenever we click the button it brings all the text from Text.txt file and print inside the paragraph
tag.
And our button name is click.
And I'm going to use onClick event inside onClick.
I'm going to use a function load data.
Inside this function we are going to create our A6.
And if I save this file you can see in my browser it prints our static data.
So at first I'm going to create script tag.
And inside the script tag I'm going to create a function named Load data.
So as I told you earlier first we need to create an object using XML http request class.
So I'm going to take a variable which is x http equal to new.
XML Http request class.
You can take any name for your variable.
Then I'm going to open my object.
So I'm going to use x http dot open function as a parameter.
First we need to declare our method.
And I'm going to use get method.
And then we need to declare which file I want to access.
I mean our file path.
First I'm going to type our folder name then slash text dot txt.
And then we need to send boolean parameter.
If you want to use synchronized mode then you need to send true value.
So I'm going to pass true.
To send this request I'm going to use another method dot send x http dot send.
From here our request will send to the server.
If we send request to server a response will come from there.
So to check this response I'm going to write some code.
At the same time we will also check our status stage.
For this I'm going to take my object name dot.
I'm going to use a method on ready state change.
And then I create a function something like that.
The function will continuously run whenever on ready state change its value.
And inside this function we need to check response has came or not when our registered value would be
four, it mean we get our response.
So I'm going to run if condition inside this function.
If inside the round braces this dot readystate equal to equal to four, and this dot status equal to
equal to 200.
This means our object.
We already learned about it.
Just remember one thing.
We check server response with ready state.
And the exact file which we want to access is available in the server or not.
For check the status we use dot status and if the status is 200, it mean the file is available in our
server and inside the function.
I want to show you the exact response in my console console dot log inside the round braces this dot
response text.
Using these dot response text property, we can print the server response in our console.
Let me explain it once again.
First, I create a button in my HTML page and assign a function on this button name load data.
And then I create this function inside my script tag and inside this function.
First I create an object name Xrdp.
Using this object, we can send request to our server and I want to send request for text dot txt file
and using send method we send our request and then I use on ready state change property to check server
status and when server status match with four then insert this console it, print the text.
So let's save the file and I'm going to click the button.
And you can see in my console it print all the text from our text dot txt file.
And if I change anything in our text file.
So I type Hello World and save this file.
You can see in my browser it automatically reload our browser because we are using live server and this
file is connected with our server.
And if I click this button you can see the updated content.
So you can see which we had requested from the server.
It is working properly.
And if you want to show this message in your web page, not in console, then you need to use document
method.
I'm going to comment out this console dot log line and type document dot get element by ID.
Insert the round braces.
I'm going to provide our paragraph ID demo dot inner HTML.
Equal to this dot response text.
And if I save this file.
And click on this button.
You can see it print the text in our browser.
Using inner HTML method.
We can change HTML content inside HTML tag.
But the question is if we receive error status, then what?
For this we need to create another elseif condition.
So I'm going to duplicate this if condition and change if with elseif.
If our status is 404 and I don't want to show 404 message to my client.
So insert the inner HTML I'm going to set not found.
If the text file not available in our server then it is going to print not found.
And I'm going to save this file.
And click the button.
You can see it written our file content because this file is available in our server.
But if I change our file name and I'm going to change my file name text one dot txt and save the file
and back to my index.html page.
And if I click on this button, you can see in my browser it print not found, but inside my console
it print 404.
So you can set condition for different type of Http response.
And if I change the file name text one dot txt and try to print this content in our browser, you can
see this time it print our content.
And now I want to show one thing with our console tag.
There is another tag named network.
When we work with Asics, it sends response in our x air tag.
X mean.
XML.
H mean.
Http r means response.
You can see in response we get a file from a server named text one dot txt and its server status is
200.
It's a Ajax request, so the type is XHR.
And if I click on the text file you can see the preview.
And also you can see the response.
And also you can see the timing here you can see how long it took to come from the server.
And if you click on the header you can see the URL path request method get status code okay.
And also you can see my remote address.
This was normal text, but in actual life we use Json data for practice purpose.
We can retrieve fake Json data.
There are lots of websites who can provide fake Json data, and I'm going to use this website Json placeholder.
And if you scroll down a little bit you can see resource option.
And I'm going to use post data.
It's provide us 100 demo data something like that.
This also are dummy data.
And now I want to show all of this post in our website.
For this I'm going to copy all the URL and I'm going to pass this URL in our open method.
And I'm going to save this file and back to my index file, and I'm going to open my console once again.
Let's open the network tab and I'm going to show my HR status.
And now I'm going to click the button and you can see it print out all post in my browser.
And you can see it print out all the post in my browser.
And also you can see file name, post status, 200 type x hr, file size 7.7 KB and response time six
24 millisecond.
And you can see lots of data in our browser.
We cannot understand it properly and I'm going to print it in our console.
And I'm going to just uncomment this console.log line.
And I don't want to print all the data in our browser.
I just want to print in our console and I'm going to save this file.
Let's hit the click button.
Now you can see in our console it print all the data very well formatted.
You can see different titles different ID etcetera.
So using Asics without refreshing our page we can retrieve data from our server.
And last thing I want to say you can see it's a long method.
It can complicate our code.
So most of the developers using jQuery to run Asics.
Otherwise developers use a new method named fetch which is introduced in JavaScript ES6 version.
So in the next video we are going to learn about fetch API.
Thanks for watching this video.
Stay tuned for our next tutorial.