JavaScript API Calling Code & Reference Added

Author: SamiurRahmanMukul

8-JavaScript-API-Calling/1-XmlHttpRequest.js

@@ -0,0 +1,78 @@
+/*Title: XMLHttpRequest
+  Description: API Calling using XMLHttpRequest
+  Author: Md. Samiur Rahman (Mukul) 
+  Website: http://www.SamiurRahmanMukul.epizy.com
+  Github: https://www.github.com/SamiurRahmanMukul
+  Email: example2022@gmail.com [FAKE EMAIL]
+  Date: 06/12/2021 */
+
+/* // ? API Calling using XMLHttpRequest --> 
+    event - onload(), onerror()
+    property - response, responseText, responseType, responseURL, status, statusText
+    function - open(), send(), setRequestHeader() */
+
+const makeRequest = (method, url, data) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(method, url);
+
+    xhr.setRequestHeader("Content-Type", "application/json");
+
+    xhr.onload = () => {
+      let data = xhr.response;
+      console.log(JSON.parse(data));
+    };
+
+    xhr.onerror = () => {
+      console.log("error is here");
+    };
+
+    xhr.send(JSON.stringify(data));
+  });
+};
+
+// ? make a getData() function to get data from the API server
+const getData = () => {
+  makeRequest("GET", "https://jsonplaceholder.typicode.com/posts").then((res) => console.log(res));
+};
+
+getData();
+
+// ? make a postData() function to post data to the API server
+const postData = () => {
+  makeRequest("POST", "https://jsonplaceholder.typicode.com/posts", {
+    title: "foo",
+    body: "bar",
+    userId: 1,
+  });
+};
+
+// postData();
+
+// ? make a updateData() function to update data to the API server
+const updateData = () => {
+  makeRequest("PUT", "https://jsonplaceholder.typicode.com/posts/1", {
+    id: 1,
+    title: "fooMA",
+    body: "barMA",
+    userId: 1,
+  });
+};
+
+// updateData();
+
+// ? make a updateSingleData() function to update single data to the API server
+const updateSingleData = () => {
+  makeRequest("PATCH", "https://jsonplaceholder.typicode.com/posts/1", {
+    title: "This is changed",
+  });
+};
+
+// updateSingleData();
+
+// ? make a deleteData() function to delete data to the API server
+const deleteData = () => {
+  makeRequest("DELETE", "https://jsonplaceholder.typicode.com/posts/1");
+};
+
+// deleteData();

8-JavaScript-API-Calling/2-FetchAPI.js

@@ -0,0 +1,86 @@
+/*Title: Fetch API
+  Description: Fetch API - JavaScript API for making HTTP requests
+  Author: Md. Samiur Rahman (Mukul) 
+  Website: http://www.SamiurRahmanMukul.epizy.com
+  Github: https://www.github.com/SamiurRahmanMukul
+  Email: example2022@gmail.com [FAKE EMAIL]
+  Date: 06/12/2021 */
+
+/* // ? Fetch API - Fetching data from a server
+  fetch() has replaced XMLHttpRequest
+  fetch() - global method for making HTTP Request
+  2 ways to call - then, async await
+
+  + fetch() is easy to use compare to XMLHttpRequest
+  + fetch() returns a promise
+  - returned promise can only handle network error
+  - does not support all the older browser */
+
+// ? method for making HTTP Request
+const makeRequest = async (url, config) => {
+  const res = await fetch(url, config);
+
+  if (!res.ok) {
+    const message = `Error : ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+  return data;
+};
+
+// ? make a getData() function to get data from the API server
+const getData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts")
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+getData();
+
+// ? make a sendData() function to send data to the API server
+const sendData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts", {
+    method: "POST",
+    body: JSON.stringify({
+      title: "foo",
+      body: "bar",
+      userId: 1,
+    }),
+    headers: {
+      "Content-type": "application/json; charset=UTF-8",
+    },
+  })
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+// sendData();
+
+// ? make a updateData() function to update data to the API server
+const updateData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts/1", {
+    method: "PATCH",
+    body: JSON.stringify({
+      title: "Hello World",
+    }),
+    headers: {
+      "Content-type": "application/json; charset=UTF-8",
+    },
+  })
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+// updateData();
+
+// ? make a deleteData() function to delete data to the API server
+const deleteData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts/1", {
+    method: "DELETE",
+  })
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+// deleteData();

8-JavaScript-API-Calling/3-AxiosJsLibrary.js

@@ -0,0 +1,86 @@
+/*Title: Axios JS Library
+  Description: Axios JS Library - API calling and data fetch
+  Author: Md. Samiur Rahman (Mukul) 
+  Website: http://www.SamiurRahmanMukul.epizy.com
+  Github: https://www.github.com/SamiurRahmanMukul
+  Email: example2022@gmail.com [FAKE EMAIL]
+  Date: 06/12/2021 */
+
+/* // ? axios --> is a JavaScript library
+  it helps to make request from browser (Plain JS/Vue/React/Angular), Node.js
+  + very easy to use
+  + it supports all modern browser including IE
+  + it returns promise
+  + throws error brilliantly
+  + No need to set header cause axios is intelligent */
+
+/* // ? axios --> property & methods
+  axios(config)
+  axios(url [, config])
+
+  axios.get(url [, config])
+  axios.post(url [, config])
+  axios.put(url [, config])
+  axios.patch(url [, config])
+  axios.delete(url [, config])
+
+  axios returns response object - data, status, statusText, headers, config */
+const makeRequest = async (config) => {
+  return await axios(config);
+};
+
+// ? make a getData() function to get data from the  API server
+const getData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts")
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+getData();
+
+// ? make a createData() function to post data to the  API server
+const createData = () => {
+  makeRequest({
+    url: "https://jsonplaceholder.typicode.com/posts",
+    method: "post",
+    data: JSON.stringify({
+      title: "foo",
+      body: "bar",
+      userId: 1,
+    }),
+  })
+    .then((res) => console.log(res))
+    .catch((err) => console.log(err));
+};
+
+// createData();
+
+// ? make a updateData() function to update data to the  API server
+const updateData = () => {
+  makeRequest({
+    url: "https://jsonplaceholder.typicode.com/posts/1",
+    method: "put",
+    data: JSON.stringify({
+      id: 1,
+      title: "This is a title",
+      body: "This is a body",
+      userId: 1,
+    }),
+  })
+    .then((res) => console.log(res.data))
+    .catch((err) => console.log(err));
+};
+
+// updateData();
+
+// ? make a deleteData() function to delete data to the  API server
+const deleteData = () => {
+  makeRequest({
+    url: "https://jsonplaceholder.typicode.com/posts/1",
+    method: "delete",
+  })
+    .then((res) => console.log(res.data))
+    .catch((err) => console.log(err));
+};
+
+// deleteData();

8-JavaScript-API-Calling/4-jQueryAjax.js

@@ -0,0 +1,50 @@
+/*Title: jQuery Ajax
+  Description: jQuery Ajax is used to API calling and data fetching
+  Author: Md. Samiur Rahman (Mukul) 
+  Website: http://www.SamiurRahmanMukul.epizy.com
+  Github: https://www.github.com/SamiurRahmanMukul
+  Email: example2022@gmail.com [FAKE EMAIL]
+  Date: 06/12/2021 */
+
+/* // ? jQuery Ajax -->
+  add jquery library cdn
+  ajax - asynchronous javascript and xml */
+
+const makeRequest = async (url, method, data) => {
+  try {
+    const result = await $.ajax({
+      url: url,
+      method: method,
+      data: data,
+    });
+    return result;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+// ? make a getData() function to get data from API server
+const getData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts/1", "GET").then((res) => console.log(res));
+};
+
+getData();
+
+// ? make a createData() function to post data to API server
+const createData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts/1", "PUT", {
+    id: 1,
+    title: "This is a title",
+    body: "This is a body",
+    userId: 1,
+  }).then((res) => console.log(res));
+};
+
+// createData();
+
+// ? make a deleteData() function to delete data from API server
+const deleteData = () => {
+  makeRequest("https://jsonplaceholder.typicode.com/posts/1", "DELETE").then((res) => console.log(res));
+};
+
+// deleteData();

8-JavaScript-API-Calling/README.md

@@ -0,0 +1,28 @@
+# JavaScript API (Application Programming Interface) Calling
+
+JavaScript API - JavaScript API is a set of functions that are used to perform certain tasks in JavaScript.
+
+## API Calling in JavaScript - 4 way
+
+- 1. XML HTTP Request
+- 2. Fetch API
+- 3. Axios JavaScript Library
+- 4. jQuery Ajax
+
+## Fetch API - API using fetching data from a server
+
+```sh
+const loadData = () => {
+  fetch("https://jsonplaceholder.typicode.com/posts")
+    .then((response) => response.json())
+    .then((data) => {
+      let lists = "";
+      data.map((data, index) => {
+        lists += `<li>${data.title}</li>`;
+      });
+      document.querySelector(".container ol").innerHTML = lists;
+    });
+};
+
+loadData();
+```