Fetch/XMLHttpRequest sa JavaScript

Articles

Ipinaliliwanag ng artikulong ito ang Fetch/XMLHttpRequest sa JavaScript.

YouTube Video

javascript-html-fetch-xhr.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-html-fetch-xhr.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

Fetch/XMLHttpRequest sa JavaScript

Ang Fetch at XMLHttpRequest (XHR) sa JavaScript ay parehong ginagamit para sa pagpapadala ng mga HTTP request at pagkuha ng datos mula sa server.

`Fetch API`

Ang Fetch API ay isang modernong paraan ng paghawak ng mga HTTP request, na idinisenyo bilang kahalili ng XHR. Ito ay isang asynchronous na API batay sa Promises, na nagbibigay-daan para sa mas simple at mas flexible na paghawak ng mga request.

Paggamit

 1fetch('http://127.0.0.1:3000/example.json')
 2    .then((response) => {
 3        if (!response.ok) {
 4            throw new Error('HTTP error: ' + response.status);
 5        }
 6        return response.json();  // Parse the response as JSON
 7    })
 8    .then((data) => {
 9        console.log(data);  // Use the fetched data
10        console.log(JSON.stringify(data));
11    })
12    .catch((error) => {
13        console.error('An error occurred:', error);  // Error handling
14    });

Ang code na ito ay nagpapadala ng GET request sa tinukoy na URL gamit ang Fetch API, pinoproseso ang sagot bilang JSON, at ipinapakita ang resulta o naglalabas ng error.

Mga Tampok

Ang Fetch API ay may mga sumusunod na katangian:.

Batay sa Promise Ang mga asynchronous na operasyon ay maaaring pamahalaan gamit ang Promises, na ginagawang mas malinis at madaling basahin ang code.
Madaling paghawak ng error Ang mga error ay madaling mahawakan gamit ang catch block.
Pag-parse gamit ang mga method tulad ng response.json() Ang response data ay madaling maproseso sa format na JSON o text.
Suporta sa CORS Ang Fetch ay gumagana base sa mga patakaran ng Cross-Origin Resource Sharing (CORS).
Flexible na pag-configure ng request Hindi lang GET/POST, kundi pati mga HTTP method tulad ng PUT at DELETE ay madaling ma-configure.

Halimbawa: POST Request

 1fetch('http://127.0.0.1:3000/example.json', {
 2        method: 'POST',
 3        headers: {
 4            'Content-Type': 'application/json'
 5        },
 6        body: JSON.stringify({ name: 'Alice', age: 25 })  // Send the request body as JSON
 7    })
 8    .then(response => response.json())
 9    .then(data => console.log(JSON.stringify(data)))
10    .catch(error => console.error('Error:', error));

Ang code na ito ay nagpapadala ng POST request na may kasamang JSON data at tumatanggap at nagpapakita ng sagot mula sa server bilang JSON.

Mga Kakulangan

Ang Fetch API ay may mga sumusunod na kahinaan:.

Pagkakatugma sa browser Ang mga lumang browser (lalo na ang IE11) ay hindi sumusuporta sa Fetch API.
Mahirap isagawa ang mas detalyadong kontrol Kumpara sa XHR, hindi ito angkop para sa low-level na kontrol tulad ng paghawak ng progress events.

`XMLHttpRequest`（XHR）

Ang XMLHttpRequest ay isang API na matagal nang ginagamit sa paghawak ng mga HTTP request at madalas na ginagamit bilang batayan para sa AJAX (Asynchronous JavaScript at XML). Nagbibigay-daan sa asynchronous na komunikasyon, na nagpapahintulot sa pagkuha ng datos mula sa server nang hindi nire-reload ang buong pahina.

Paggamit

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
 3xhr.onreadystatechange = function() {
 4    if (xhr.readyState === 4 && xhr.status === 200) {
 5        const data = JSON.parse(xhr.responseText);  // Parse the response as JSON
 6        console.log(data);  // Use the data
 7        console.log(JSON.stringify(data));
 8    }
 9};
10xhr.send();  // Send the request

Ang code na ito ay nagpapadala ng GET request gamit ang XMLHttpRequest, ipinaparse ang natanggap na JSON response, at ipinapakita ito.

Mga Tampok

Ang XMLHttpRequest ay may mga sumusunod na katangian:.

Batay sa Callback Ang mga callback function tulad ng onreadystatechange ay ginagamit upang subaybayan ang pagkumpleto o progreso ng request.
Pagsubaybay ng status codes at ready states Ang status ng request ay maaaring tingnan gamit ang xhr.readyState at xhr.status.
Malawak na pagkakatugma Gumagana kahit sa mga lumang browser.
Subaybayan ang progreso ng request Ang progreso ay maaaring subaybayan gamit ang mga event tulad ng xhr.upload.onprogress.

Halimbawa: POST Request

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4xhr.onreadystatechange = function() {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8        console.log(JSON.stringify(data));
 9    }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));  // Send the data

Ang code na ito ay nagpapadala ng POST request na may JSON data gamit ang XMLHttpRequest, tumatanggap ng response, at ipinapakita ito.

Mga Kakulangan

Ang XMLHttpRequest ay may mga sumusunod na kahinaan:.

Kompleksidad ng code Ang pamamahala ng asynchronous processing gamit ang callback functions ay nagiging kumplikado.
Walang native na suporta sa Promise Dahil hindi suportado ng default ang Promises, ang asynchronous processing ay nagiging mas mahaba o matrabaho.

Paghahambing sa pagitan ng `Fetch API` at `XMLHttpRequest`

Mga Tampok	`Fetch API`	`XMLHttpRequest` (XHR)
Asynchronous na pagpoproseso	Simple gamit ang Promises	Nangangailangan ng callback functions
Pag-aasikaso ng mga error	Madaling pamahalaan gamit ang `.catch()`	Suriin ang `readyState` status
Mga progress event	Hindi sinusuportahan	Pinangangasiwaan gamit ang `onprogress`
Suporta para sa cross-origin	Awtomatikong sumusuporta sa CORS	Sumusuporta sa CORS
Suporta ng browser	Hindi sinusuportahan sa IE11 at mas luma	Tugma sa mas lumang mga browser
Detalyado sa kontrol	Simple at madaling intindihin	Pinapayagan ang detalyadong kontrol

Buod

Ang Fetch API ay nagbibigay ng simple at nababagong HTTP requests na nakabatay sa Promises at inirerekomenda sa makabagong mga browser.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Paghawak ng Kaganapan sa JavaScript

Fetch/XMLHttpRequest sa JavaScript

YouTube Video

Fetch/XMLHttpRequest sa JavaScript

Fetch API

Paggamit

Mga Tampok

Halimbawa: POST Request

Mga Kakulangan

XMLHttpRequest（XHR）

Paggamit

Mga Tampok

Halimbawa: POST Request

Mga Kakulangan

Paghahambing sa pagitan ng Fetch API at XMLHttpRequest

Buod

YouTube Video

`Fetch API`

`XMLHttpRequest`（XHR）

Paghahambing sa pagitan ng `Fetch API` at `XMLHttpRequest`