AJAX & XMLHttpRequest & Fetch & Worker & jquery ajax

ajax-all-in-one-fetch.md

AJAX & Fetch

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

jquery ajax

https://api.jquery.com/category/ajax/

https://api.jquery.com/jQuery.ajax/

How-to-convert-ArrayBuffer-to-and-from-String

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/%E6%89%A9%E5%B1%95/Using_the_DOM_File_API_in_chrome_code

Using_XMLHttpRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

https://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute

https://xhr.spec.whatwg.org/

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

Fetch_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Headers

https://developer.mozilla.org/zh-CN/docs/Web/API/Request

https://developer.mozilla.org/zh-CN/docs/Web/API/Headers/Headers

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

fetch

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>

React JSON-Server

json-server

$ npm i -g json-server

$ npm i -D json-server

faker.js

https://www.npmjs.com/package/faker

$ npm i -D faker

yarn

$ 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;
});