Fetch/XMLHttpRequest trong JavaScript
Bài viết này giải thích về Fetch/XMLHttpRequest trong 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 & 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 trong JavaScript
Fetch và XMLHttpRequest (XHR) trong JavaScript đều được sử dụng để gửi yêu cầu HTTP và truy xuất dữ liệu từ máy chủ.
Fetch API
Fetch API là một phương pháp hiện đại để xử lý các yêu cầu HTTP, được thiết kế để thay thế XHR. Đây là một API bất đồng bộ dựa trên Promises, cho phép xử lý yêu cầu đơn giản và linh hoạt hơn.
Cách sử dụng
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 });- Đoạn mã này gửi một yêu cầu GET đến URL được chỉ định bằng cách sử dụng
Fetch API, xử lý phản hồi dưới dạng JSON và hiển thị kết quả hoặc xuất ra lỗi.
Đặc điểm
Fetch API có các tính năng sau:.
- Dựa trên Promise Các thao tác bất đồng bộ có thể được quản lý với Promise, giúp mã sạch hơn và dễ đọc hơn.
- Xử lý lỗi dễ dàng
Các lỗi có thể được xử lý dễ dàng bằng khối
catch. - Phân tích dữ liệu với các phương thức như
response.json()Dữ liệu phản hồi có thể dễ dàng được xử lý ở định dạng JSON hoặc văn bản. - Hỗ trợ CORS
Fetchhoạt động dựa trên các quy tắc Chia sẻ tài nguyên giữa các nguồn gốc (CORS). - Cấu hình yêu cầu linh hoạt Không chỉ GET/POST, mà các phương thức HTTP như PUT và DELETE cũng có thể dễ dàng cấu hình.
Ví dụ: Yêu cầu POST
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));- Đoạn mã này gửi một yêu cầu POST chứa dữ liệu JSON và nhận, hiển thị phản hồi từ máy chủ dưới dạng JSON.
Nhược điểm
Fetch API có các nhược điểm sau:.
- Tương thích trình duyệt
Các trình duyệt cũ (đặc biệt là IE11) không hỗ trợ
Fetch API. - Khó kiểm soát chi tiết So với XHR, nó không phù hợp cho các kiểm soát cấp thấp như theo dõi sự kiện tiến trình.
XMLHttpRequest（XHR）
XMLHttpRequest là một API đã được sử dụng từ lâu để xử lý các yêu cầu HTTP và được sử dụng rộng rãi làm cơ sở cho AJAX (Asynchronous JavaScript and XML). Cho phép giao tiếp bất đồng bộ, giúp lấy dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang.
Cách sử dụng
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
- Đoạn mã này gửi một yêu cầu GET bằng cách sử dụng
XMLHttpRequest, phân tích phản hồi JSON nhận được và hiển thị nó.
Đặc điểm
XMLHttpRequest có các tính năng sau:.
- Dựa trên Callback
Các hàm callback như
onreadystatechangeđược sử dụng để giám sát việc hoàn thành hoặc tiến trình của yêu cầu. - Theo dõi mã trạng thái và trạng thái sẵn sàng
Trạng thái yêu cầu có thể được kiểm tra bằng
xhr.readyStatevàxhr.status. - Tương thích rộng rãi Hoạt động ngay cả trên các trình duyệt cũ.
- Theo dõi tiến trình yêu cầu
Tiến trình có thể được giám sát bằng các sự kiện như
xhr.upload.onprogress.
Ví dụ: Yêu cầu POST
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
- Đoạn mã này gửi một yêu cầu POST với dữ liệu JSON bằng
XMLHttpRequest, nhận phản hồi và hiển thị nó.
Nhược điểm
XMLHttpRequest có các nhược điểm sau:.
- Độ phức tạp của mã Việc quản lý các xử lý bất đồng bộ bằng hàm callback thường phức tạp.
- Không hỗ trợ Promise nguyên bản Vì Promise không được hỗ trợ mặc định, xử lý bất đồng bộ trở nên khá rườm rà.
So sánh giữa Fetch API và XMLHttpRequest
| Đặc điểm | Fetch API |
XMLHttpRequest (XHR) |
|---|---|---|
| Xử lý bất đồng bộ | Đơn giản với Promise | Yêu cầu các hàm callback |
| Xử lý lỗi | Có thể xử lý bằng .catch() |
Kiểm tra trạng thái readyState |
| Sự kiện tiến trình | Không được hỗ trợ | Xử lý với onprogress |
| Hỗ trợ cross-origin | Tự động hỗ trợ CORS | Hỗ trợ CORS |
| Hỗ trợ trình duyệt | Không hỗ trợ trên IE11 và cũ hơn | Tương thích với các trình duyệt cũ hơn |
| Độ chi tiết khi kiểm soát | Đơn giản và trực quan | Cho phép kiểm soát chi tiết |
Tóm tắt
- Fetch API cung cấp các yêu cầu HTTP đơn giản và linh hoạt dựa trên Promise, được khuyến nghị trên các trình duyệt hiện đại.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.