Professional JavaScript for Web Developers 第四版学习笔记 CHAPTER 24:NETWORK REQUESTS AND REMOTE RESOURCES

欢欢欢欢 发表于 2021-11-3 09:12

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 需要专门再学习