So, here is a JSON file on a server. I've used a website called subtext to create this JSON file. And to use it as a server, it's a great while you're practicing, I show you how you can create a JSON file on it. So the JSON file is consists of two objects. For each one, there is a user name, password, email, and company punches. So both this JSON file for a client and contain his username, password, email, and the company branches that he want to work in the country for each branch and the telephone number.

So for example, let me see how we can get the username and the password for the first option. So back to our document. So within this division that we display, there is our name The password. So to get that data from the server, we have to make a request. So we'll define our variable and call it client and equal to new x and L. HTTP request. XML HTTP request is an object used to exchange data with a server.

Behind the scenes, this means that it's possible to update parts of a page without reloading the whole page. If you continue, then between open this request client that open up suffice that goes method and the URL for the server. So we have two methods get composed, get a simpler and faster post used when sending large amounts. To data to a server, it's more secure than get. So I will use get then they are tell for the server that we copy the URL from here. So now we have done the request and append the request just remain to make function once we reload the page, so clients that on node, when we reload it, the page function will be happening.

During this function, we want to get the data and convert it to an object. The data on the server is fixed. So we want to convert it to an object. We hope you still remember. function that can help us to do this. So if you make a variable for example, y equal to JSON dot parse and it will take client that response text, what is response text returns the response data to a string.

And of course we want it to be as a string, just now remain to display the data within our division. So document. get element by ID, the ID is the identity card. The inner HTML will be equal to want to display the username and the password User Name s plus y zero. That username want to display the user name for the first option. So what we present now the object is why we assign it to the JSON file, or the text that we will receive from JSON file.

So why zero user name plus which will make or break tag plus and your password is plus, ye. Zero that password McCullough to check it the variables username and password. Correct correctly, is our name start with uppercase u and also the password. So now just to remain to send this request to the server, we have done the request. Then we append the request, or we specify the link of the server that we want to send the request to. Then we have done a function once you reload the page, just remain to send the request.

So find the setting. So now everything's ready to check. Nice, your user name is whatever, and your password is a value. I have a surprise for you now You learned how to use objects, objects short for a synchronous JavaScript. And xml. xml is a file like JSON, which can be sent or received from a server.

Select HTML tags. But the most popular way to exchange data with a server is Jason. And as x is the way to get or send the data to the server, so as you read data from a server, after the page has reloaded, update or page without reloading the page, send data to a server in the background. Without even there is nothing that you see now when I reloaded the page, the variables, change it. Each time you reload, the values will change. And also it's not the user name here for the finished object and the password.

So this website, just give you variable names. That will change every time we reload the page if I reload it here, so we change it. So I just take the JSON file, copy and paste it on my server. But you can use it just for practicing if you don't have domain name, or server. But if you have a domain name and server, you have to make sure that the Jason file and the web page are in the same domain name or the same server, like mine, my JSON file and my web page are in the same domain name. So here is the JSON file I've created on fill text and just copy it and paste it here and it manually and you Is the page.

So they have to be in the same server, because modern browsers will allow access across domain names. So both the page as a JSON file should be on the same server. There it is in mind. So this is how you can get data from a server using gadgets. But before we end I want to show you something instead of onload. We can use a ready state change on for any state change, look to see if it is the same or not.

Nice, but what is already stated change. It's defined a function to be called when their estate property changes. But what is real estate? robbery. police state property is establishing the connection to the server like this XML HTTP request. It's establishing a connection to a server request received.

So it so it wait till the requests received from the server and processing to the request, see what the data that we want or this function we want here to access to the username and the password and wait till the request finished and the response is ready. So all this cold war estate