XMLHttpRequest lesson code

tomer79sagi · Dec 3, 2023 · 409f78b · 409f78b
1 parent 9f8a6bb
commit 409f78b
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 0 deletions.
diff --git a/03.12.23/xmlhttprequest/index.html b/03.12.23/xmlhttprequest/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>19.11.23</h1>
+    <h2>XMLHttpRequest</h2>
+    <div id="jsObj">
+
+    </div>
+    <hr/>
+    <div id="output">
+    </div>
+  </body>
+</html>
diff --git a/03.12.23/xmlhttprequest/script.js b/03.12.23/xmlhttprequest/script.js
@@ -0,0 +1,45 @@
+const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+xhr.onload = () => {
+    // Convert JSON text to JS object
+    const responseObj = JSON.parse(xhr.responseText);
+    document.getElementById("jsObj").innerHTML = responseObj[0].name;
+
+    // Display raw JSON text
+    document.getElementById("output").innerHTML = xhr.responseText;
+}
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/users'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+xhr.send();
+
+
+const jsonText = `
+    {
+        "id": 1,
+        "name": "Leanne Graham",
+        "username": "Bret",
+        "email": "[email protected]"
+    }
+`;
+
+const jsObject = {
+    id: 1,
+    name: "Leanne Graham",
+    username: "Bret",
+    email: "[email protected]"
+};
+
+
+
+
+
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/comments'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+
+// Big NO NOs
+// xhr.open('GET', 'https://jsonplaceholder.typicode.com/get_posts'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+
+
+// xhr.open('POST', 'https://jsonplaceholder.typicode.com/users'); // == CREATE
+// xhr.open('PUT', 'https://jsonplaceholder.typicode.com/users'); // == UPDATE
+// xhr.open('DELETE', 'https://jsonplaceholder.typicode.com/users'); // == DELETE
diff --git a/03.12.23/xmlhttprequest_exercise/index.html b/03.12.23/xmlhttprequest_exercise/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>19.11.23</h1>
+    <h2>XMLHttpRequest</h2>
+    <div id="jsObj">
+
+    </div>
+    <hr/>
+    <div id="output">
+    </div>
+  </body>
+</html>
diff --git a/03.12.23/xmlhttprequest_exercise/script.js b/03.12.23/xmlhttprequest_exercise/script.js
@@ -0,0 +1,39 @@
+const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+xhr.onload = () => {
+    // JSON.parse() --> Convert JSON text to Javascript object
+    const userObj = JSON.parse(xhr.responseText);
+
+    // Iterate / loop over all attributes in the 'responseObj'
+    // for ... in --> Objects
+    // for ... of --> Arrays
+    for (let prop in userObj) {
+        // - Iteration 1: prop = 'id';
+        // document.getElementById("jsObj").innerHTML += `${id}: ${userObj[id]}<br/>`; 
+
+        // - Iteration 2: prop = 'name'
+        // document.getElementById("jsObj").innerHTML += `${name}: ${userObj[name]}<br/>`; 
+
+        // - Iteration 3: prop = 'email'
+        // document.getElementById("jsObj").innerHTML += `${email}: ${userObj[email]}<br/>`;
+
+        // - Iteration 4+: prop = 'name'....
+        // ....
+
+
+        // This is dynamic, how it MUST be
+        //document.getElementById("jsObj").innerHTML += `${prop}: ${userObj[prop]}<br/>`;
+
+        // Options to add new HTML tags
+        // 1. Add to HTML using 'document.createElement()'
+        // 2. Add to HTML using 'innerHTML'
+        document.getElementById("jsObj").innerHTML += `
+            <div>
+                <b>${prop}</b>: ${userObj[prop]}
+            </div>
+        `;
+    }
+}
+
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+xhr.send();
diff --git a/03.12.23/xmlhttprequest_post/index.html b/03.12.23/xmlhttprequest_post/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>19.11.23</title>
+    <script defer src="./script.js"></script>
+  </head>
+  <body>
+    <h1>19.11.23</h1>
+    <h2>XMLHttpRequest</h2>
+    <div id="jsObj">
+
+    </div>
+    <hr/>
+    <div id="output">
+    </div>
+  </body>
+</html>
diff --git a/03.12.23/xmlhttprequest_post/script.js b/03.12.23/xmlhttprequest_post/script.js
@@ -0,0 +1,43 @@
+function createNewPost() {
+    const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+    // 1. Convert JS object to JSON text so we can 'SEND' to the server
+    const jsonData = JSON.stringify({
+        title: 'foo',
+        body: 'bar',
+        userId: 1
+    });
+
+    // 2. Use the POST method
+    xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
+
+    // 3. Set request headers
+    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
+
+    // 4. Incldue the 'jsonData' in the 'send()' method
+    xhr.send(jsonData);
+}
+
+
+function getSingleUser() {
+    const xhr = new XMLHttpRequest(); // new instance of class 'XMLHttpReqeust'
+
+    xhr.onload = () => {
+        // JSON.parse() --> Convert JSON text to Javascript object
+        const userObj = JSON.parse(xhr.responseText);
+
+        // Iterate / loop over all attributes in the 'responseObj'
+        for (let prop in userObj) {
+            document.getElementById("jsObj").innerHTML += `
+                <div>
+                    <b>${prop}</b>: ${userObj[prop]}
+                </div>
+            `;
+        }
+    }
+
+    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1'); // == READ, Type: 'xhr' in 'Netowrk' tab in 'F12 - Developer Tools'
+    xhr.send();
+}
+
+createNewPost();