# Javascript AJAX ## jQuery 3.* * http://api.jquery.com/jquery.ajax/ ```javascript= $.ajax({ method: 'GET', // "GET", "POST", "PUT" dataType: 'json', url: 'https://example.com/', headers: {}, cache: false }).done(function(data){ console.log(data); }).fail(function(jqXHR,status,errorThrown){ if(jqXHR.status===500 && jqXHR.responseText){ console.err(jqXHR.responseText); } }).always(function(data){ console.log(data); }); ``` ## XMLHttpRequest (ES5) ```javascript= var request = new XMLHttpRequest(); request.open('GET', 'https://example.com/', true); request.onload = function() { if (this.status >= 200 && this.status < 400) { // Success! var data = JSON.parse(this.response); } else { // We reached our target server, but it returned an error } }; request.onerror = function() { // There was a connection error of some sort }; request.send(); ``` ## Fetch (ES6) * https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch * https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch ```javascript= fetch( 'https://example.com/', { method: 'get', // GET, POST headers: { 'content-type': 'application/json' }, cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached mode: 'cors', // no-cors, cors, *same-origin } ).then((response) => { if (!response.ok) { throw new Error('HTTP error, status = ' + response.status); } return response.json(); }).then((myJson) => { console.log(myJson); }).catch((error) => { console.log('Error: ' + error.message); }); ``` ## Fetch + finally (ES2018) ```javascript= fetch('https://www.google.com') .then((response) => { console.log(response.status); return response.json(); }) .then((json) => { console.log(json); }) .catch((error) => { console.log(error); }) .finally(() => { document.querySelector('#spinner').style.display = 'none'; }); ``` ###### tags: `js`