Web development #1 - How Browsers used to make data requests?
What is the Old way of browser used to fetch data from the server i.e. browser sends a request, it has to wait and then It would receive?a response. Let's see how it's looks. Browser send a HTTP request to a server then server process the request and it will send then HTTP response to the browser.
This was the way websites worked for many years but this has a number of flaws and the biggest flaw is?page reloads.
What is mean by page reloads. Let's think we may want to update any part of the website for example to update some properties of products like name, price etc. then entire page loads again and this practice is very resource heavy and results in poor user experience. Specially if your website becomes larger and larger, it becomes more complex. So, this is the problem.
Now, What is the solution??
How is the problem resolved? Answer is?AJAX. The way the problem was solved by technologies allowing web pages to request smaller chunks of data like HTML, XML and JSON even just plain text and allowing these browsers to display these in form of text. We can use technologies such as?XMLHttpRequest and more newer like?Fetch APIs using AJAX. XMLHttpRequest is?heart of AJAX?this is the where AJAX begins.
What the AJAX stands for? It stands for?Asynchronous JavaScript And XML.?And as originally it mainly uses the?XMLHttpRequest?object to request XML data. Hence the reason why in AJAX the X stands for XML. These days we are mainly using JSON not XML, XML is old in use but the result is same weather we fetch AJAX, HTML, JSON or plain text.
If we see this visually we have got browser and server just like we have before. In the middle we got this technology called AJAX. Browser sends a request but it doesn't send to server directly. It seems data request to AJAX. AJAX then sends a HTTP request in the background (without us having to wait for page reloads). The server then does its job and sends a HTTP response and then AJAX provides the data to the browser.
But wait there are more benefits of AJAX. To speed things up even further we also store AJAX and data on our own computers or draft on our computer's database. And how does it works? When a new request or website for the very first time fetch data from the server it will be then?stored?on the our computer in a database. Meaning that next time you visit the same site on successive interval you are able to use local versions of the data instead of downloading fresh copies all the time and this also means that we only need reload the server when that data on the server has been updated.
Let's have a look, browser can request data from a database. Your computer then ask does data need to be updated? Has data been updated on server if hasn't simple solution is?they can just sync the data straight back to the browser. This results in a very fast load paging time.
OK now say that the data doesn't need to be updated what's can be happen then. The first step your computer has to do is Are you online or not? Let's say you are not online. In that case unfortunately the database just kind of send the data it has to the browser.
On the other hand, if your computer is online the database going to send request to AJAX. AJAX then send an HTTP request to the server. The server will do?it's?business, it is going to send an HTTP response when it is ready. AJAX still will don't send the data to the database but now it's update the data and that will be send back to the browser.