https://developer.mozilla.org/zh-CN/docs/AJAX
https://developer.mozilla.org/zh-CN/docs/AJAX/Getting_Started
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://developer.mozilla.org/zh-CN/docs/Web/API/Worker
https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fetch</title>
</head>
<body>
<div>
<h1>fetch demo</h1>
<img src="" alt="img" title="img" />
</div>
<script>
let myImage = document.querySelector('img');
let myHeaders = new Headers();
// myHeaders.append('Content-Type', 'image/jpeg');
myHeaders.append('Content-Type', 'image/png');
// https://cdn.xgqfrms.xyz/json/cats.json
// https://cdn.xgqfrms.xyz/logo/icon.png
let myInit = {
method: 'GET',
headers: myHeaders,
mode: 'no-cors',
cache: 'default'
};
// mode: 'cors',
// Access-Control-Allow-Origin
/*
fetch.html:1 Fetch API cannot load https://cdn.xgqfrms.xyz/logo/icon.png. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
*/
// let myRequest = new Request('https://cdn.xgqfrms.xyz/logo/icon.png');
let myRequest = new Request('icon.png');
fetch(myRequest,myInit).then(
function(response) {
// alert("OK");
console.log("OK");
console.log(response);
// console.log(response.blob());
// response.blob()
return response.blob();
}
).then(
function(blob) {
console.log(blob);
let cdnURL = "https://cdn.xgqfrms.xyz/";
console.log(blob);
let objectURL = URL.createObjectURL(blob);
console.log(objectURL);
let newobjectURL = `${cdnURL}${blob}`
console.log(newobjectURL);
myImage.src = objectURL;
console.log(myImage.src);
}
);
</script>
</body>
</html>
http://stackoverflow.com/a/23024613
https://stackoverflow.com/questions/23024460/javascript-i-created-a-blob-from-a-string-how-do-i-get-the-string-back-out
function blobToString(b) {
var u, x;
u = URL.createObjectURL(b);
x = new XMLHttpRequest();
x.open('GET', u, false); // although sync, you're not fetching over internet
x.send();
URL.revokeObjectURL(u);
return x.responseText;
}
var b = new Blob(['hello world']);
blobToString(b); // "hello world"
var img = new Blob(["https://cdn.xgqfrms.xyz/logo/icon.png"]);
let newImg = blobToString(img);
console.log(newImg);http://qnimate.com/an-introduction-to-javascript-blobs-and-file-interface/
http://www.javascripture.com/Blob
Creates a new Blob.
The elements of blobParts must be of the types ArrayBuffer, ArrayBufferView, Blob, or String.
If ending is set to 'native', the line endings in the blob will be converted to the system line endings,
such as '\r\n' for Windows or '\n' for Mac.
new Blob(blobParts : Array, [blobPropertyBag : Object]) : Blob
blobPropertyBag : {
type String A valid mime type such as 'text/plain'
endings String Must be either 'transparent' or 'native'
}
var blob = new Blob(["http://www.javascripture.com/Blob"], {type: "text/json"});
console.log(blob);
console.log(blob.size);
console.log(blob.type);
https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
// suppose buf contains the bytes [0x02, 0x01, 0x03, 0x07]
// notice the multibyte values respect the hardware endianess, which is little-endian in x86
var bufView = new Uint16Array(buf);
if (bufView[0]===258) { // 258 === 0x0102
console.log("ok");
}
bufView[0] = 255; // buf now contains the bytes [0xFF, 0x00, 0x03, 0x07]
bufView[0] = 0xff05; // buf now contains the bytes [0x05, 0xFF, 0x03, 0x07]
bufView[1] = 0x0210; // buf now contains the bytes [0x05, 0xFF, 0x10, 0x02]function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
https://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://gist.github.com/xgqfrms-GitHub/b44ba9049575654e36e3032c58576931
<script>
fetch('https://github-cloud.s3.amazonaws.com/', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"title": "Add a blogpost about Angular2",
"dueDate": "2015-05-23T18:25:43.511Z",
"done": false
})
}).then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(error) {
console.log('parsing failed: ', error)
});
fetch('https://cdn.xgqfrms.xyz/json/cats.json', {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}).then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(error) {
console.log('parsing failed: ', error)
});
</script>
$ npm i -g json-server
$ npm i -D json-server
https://www.npmjs.com/package/faker
$ npm i -D faker
$ yarn add -D json-server
$ yarn add -D faker
let myImage = document.querySelector('img');
let myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/png');
const myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('https://cdn.xgqfrms.xyz/logo/icon.png');
fetch(myRequest, myInit)
.then(function(response) {
return response.blob();
})
.then(function(blob) {
var objectURL = URL.createObjectURL(blob);
myImage.src = objectURL;
});
在web应用中使用文件
使用在HTML5中添加到DOM的File API，现在可以让Web内容要求用户选择本地文件，然后读取这些文件的内容。
此选择可以通过使用HTML 元素或通过拖放来完成。
https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
使用 File 或 Blob 对象指定要读取的文件或数据。