Added content for Working with APIs. (#2642)

content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md

@@ -1 +1,7 @@
 # XMLHttpRequest
+
+`XMLHttpRequest` (XHR) is a built-in browser object that can be used to interact with server. XHR allows you to update data without having to reload a web page. Despite the word XML in its name, XHR not only used to retrieve data with XML format, we can use it with any type of data, like JSON, file(s), and much more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest'>Using XMLHttpRequest</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://javascript.info/xmlhttprequest'>Network request - XMLHttpRequest</BadgeLink>

content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md

@@ -1 +1,7 @@
 # Fetch
+
+Fetch or Fetch API is a modern alternative to XMLHttpRequest. Compared to XMLHttpRequest, fetch is cleaner, simpler and easier to understand. Fetch already uses Promise, so `fetch()` does not directly return response body but instead returns a promise that resolves with a `Response` object, which is a representation of the entire HTTP response.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'>Using the Fetch API</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://javascript.info/fetch'>Network request - Fetch</BadgeLink>

content/roadmaps/106-javascript/content/118-working-with-apis/readme.md

@@ -1,3 +1,9 @@
 # Working with APIs
 
-Learn to use `XMLHTTPRequest` and `Fetch`.
+When working with remote APIs, you need a way to interact with those APIs. Modern JavaScript provides two native ways to send HTTP requests to remote servers, `XMLHttpRequest` and `Fetch`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data'>Fetching data from the server</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest'>XMLHttpRequest</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>Fetch API</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api'>Ajax Battle: XMLHttpRequest vs the Fetch API</BadgeLink>