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/

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