Professional JavaScript for Web Developers 第四版學習筆記 CHAPTER 24:NETWORK REQUESTS AND REMOTE RESOURCES
The XMLHttpRequest Object 872
XHR Usage 872
HTTP Headers 875
GET Requests 876
POST Requests 877
XMLHttpRequest Level 2 878
The FormData Type 878
Timeouts 879
The overrideMimeType() Method 879
Progress Events 880
The load Event 880
The progress Event 881
Cross-Origin Resource Sharing 881
Preflighted Requests 883
Credentialed Requests 883
Alternate Cross-Domain Techniques 884
Image Pings 884
JSONP 884
The Fetch API 885
Basic API Utilization 886
Dispatching a Request 886
Reading a Response 886
Handling Status Codes and Request Failures 887
Custom Fetch Options 888
Common Fetch Patterns 893
Sending JSON Data 893
Sending Parameters in a Request Body 893
Sending Files 893
Loading Files as Blobs 894
Sending a Cross-Origin Request 894
Aborting a Request 894
The Headers Object 895
Exploring Headers-Map Similarity 895
Unique Features of the Headers Object 896
Header Guards 896
The Request Object 897
Creating Request Objects 897
Cloning Request Objects 898
Using Request Objects with fetch() 900
The Response Object 901
Creating Response Objects 901
Reading Response Status Information 903
Cloning Response Objects 905
Requests, Responses, and the Body Mixin 906
Body.text() 906
Body.json() 906
Body.formData() 907
Body.arrayBuffer() 907
Body.blob() 908
Single-Use Streams 908
Using a ReadableStream Body 909
The Beacon API 914
Web Sockets 915
The API 915
Sending/Receiving Data 916
Other Events 916
Security 917
Summary 918
-----------------------------------------------
let myHeader = xhr.getResponseHeader("MyHeader");
let allHeaders xhr.getAllResponseHeaders();
----------------------------------------------
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
let form = document.getElementById("user-info");
xhr.send(new FormData(form));
----------------------------------------------
CORS allows the use of custom headers, methods other than GET or POST, and different body content types through a transparent mechanism of server verification called preflighted requests.
----------------------------------------------
Access-Control-Allow-Credentials: true
----------------------------------------------
// Sends POST request
// URL: 'https://example.com/analytics-reporting-url'
// Request Payload: '{foo: "bar"}'
navigator.sendBeacon('https://example.com/analytics-reporting-url', '{foo: "bar"}');
----------------------------------------------
The Fetch Api 需要專門再學習