When it comes to the communication between the client side and the server side, we usually ask about how we get the data from the server side. If you have used API to get data for your web app, you must have heard about XMLHttpRequest(), fetch(), or jQuery AJAX. How much do you know about them? Is there any difference between them? I will share some key points to learn about API and Ajax.
What happens behind the scene?
When we press reload button (F5), the browser sends a “GET request” to the URL, then the URL gives a response. The browser renders the response, so that user can see the scene on the screen. However, there are some restrictions from browsers. We will talk about it later.
The methods for exchange data
You might have a question that why we do not user form to get data from a server. The method of form has a feature that when sending a request, the whole page will reload. But, sometimes, we just want to get or update data on the current scene. To avoid reloading a whole page too frequently, we use Ajax (Asynchronous JavaScript And XML).
Ajax
Ajax is not a language, it’s just a combination of JavaScript, DOM, and the browser’s built-in object, XMLHttpRequest(). It can allow you to update your web page asynchronously by exchanging the data with a web server. I will use a sample to explain how we get response from a web server and render it on our page. The thing I want to do is that when clicking “get data” button, the data will show on the screen.
Firstly, we can create a new XMLHttpRequest() and it is used to exchange data with a server. Next, we make a request to a URL or file by using open function.
In this open function, there are three parameters, the first one is what method you would like to use. The second one is the place you like to send the request, and the third parameter is to decide whether is async or sync. True means asynchronous. So, in this example, we are trying to make a request by using “GET” method, and sending this request to the URL asynchronously.
Then, once the request is loaded correctly, we get the information we want and render them to the page. The response is text format, so here we can use JSON.parse() to convert it to JSON format.
Finally, send the request to the URL. So, the code is as follows:
Restrictions from browser (Same origin policy)
After understanding Ajax, you may ask that “Can I get the data anywhere?” like sending a request to Google, Yahoo. The answer is “NO”. It is related to one of the browser’s policy, same origin policy.
Due to the security concern, browser does not allow a request from one origin to get data from another origin. What is the same origin? According to MDN, the same origin means under the same domain, only. Here is a table to explain clearly (from MDN)
CORS (Cross-Origin Resource Sharing)
It’s wired that why we can use API and send a request to its server to ask for data even though our origin is different from the API’s origin. The reason why it happens is that most of API’s server has the “access-control-allow-origin” in its response headers which means it allows use to request and get data from different origin. The * symbol illustrates that whichever origin is acceptable.
Pre-flighted Request
The request of CROS is classified into two different type, simple request and pre-flighted. If you use GET and POST method, they are classified into the simple request. If you use Delete, Patch, or PUT, they are pre-flighted. For example, you send a “delete request” to an API without pre-flighted, and you did not receive the response due to the same origin policy. However, the delete request still arrives at the server side, so the data is deleted. With pre-flighted, when sending the request to the API, the client side knows the server didn’t provide the CORS mechanism, so the request is not sent.
Fetch API
Instead of using XMLHttpRequest, fetch API can help you simplify your code. In this article, I will focus on the basic usage of fetch API. Let’s take a look for an example.
This is an example which is same as previous one but using fetch API. In the beginning, we call fetch API, and the only argument we put in is the path. Next, we use “.then()” to deal with the response and convert it to JSON format. The second “.then()” is to complete the data which means put them on our html DOM in this case. And “.catch()” is handling something goes wrong during the promise.
Conclusion
Ajax and API make our web applications become more vivid. By Ajax, we can update our page without reloading page. There are lots of methods to get data from API servers, like XMLHttpRequest, fetch API, or even axios. However, it is not possible to let us to get the data from anywhere because Browsers have a strict rule to limit the access due to the security concern, which is the same origin policy. However, most of API has the exception that having the CORS mechanism to allow user to connect to its server from the other origin.
If you like my article, please share any comments below and click like. Thank you.
Reference to Lidemy
