Menade du?

AJAX

Logotyp för AJAX - Asynchronous JavaScript and XML

Förkortningar

Lägen för readyState

  1. UNSENT
  2. OPENED
  3. HEADERS_RECEIVED
  4. LOADING
  5. DONE
UNSENT
0: request not initialized
OPENED
1: server connection established
HEADERS_RECEIVED
2: request received
LOADING
3: processing request
DONE
4: request finished and response is ready

Event i JavaScript

  • onabort
  • onerror
  • onload
  • onloadend
  • onloadstart
  • onprogress
  • onreadystatechange
  • ontimeout

Variabler i JavaScript

  • readyState (onreadystatechange)
  • status
  • statusText
  • response
  • progress (onprogress)
Konsolens nätverks-flik

Fetch med JavaScript

fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data)); fetch('https://victim.example/naive-endpoint', { method: 'POST', headers: [ 'Content-Type', ['application/json'], 'Content-Type', ['text/plain'] ], credentials: 'include', body: JSON.stringify(exerciseForTheReader) });

Fetch blob för en bild med JavaScript

getImageBlob = async (url) => { imageResponse = await fetch(url); if (!imageResponse.ok) { throw new Error( `Image didn't load successfully; error code: ${ imageResponse.statusText || imageResponse.status }` ); } return imageResponse.blob(); };

XMLHttpRequest med JavaScript

xhr = new XMLHttpRequest(); xhr.onloadend = function() { alert(JSON.parse(xhr.response).query[0].title); }; xhr.open('GET', '/folder/file.extension?query=1&q=2', true); xhr.send();

Stöd för cookies med JavaScript

xhr.withCredentials = true;

Lägg till header för att undvika problem med CORS

xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

Sätt en egen header med JavaScript

xhr.setRequestHeader('custom-header', 'value');

Visa headers som objekt i JavaScript

function smart_split(cntn, first, second) { arr = cntn.split(first); obj = {}; arr.forEach(function (line) { parts = line.split(second); header = parts.shift(); value = parts.join(second); obj[header] = value; }); return obj; } xhr = new XMLHttpRequest(); xhr.open('GET', window.location, true); xhr.onloadend = function() { headers = smart_split(xhr.getAllResponseHeaders().trim(), /[\r\n]+/, ': '); type = smart_split('mime-type=' + headers['content-type'], '; ', '='); } xhr.send();

Hämta headers i JavaScript

xhr = new XMLHttpRequest(); xhr.setRequestHeader('custom-header', 'value'); xhr.open('GET', '/folder/file.extension?query=1&q=2', true); xhr.onloadend = function() { console.log(xhr.status); console.log(xhr.statusText); console.log(xhr.getAllResponseHeaders()); } xhr.send();

Räkna ut hur många procent som är kvar med JavaScript

xhr.onprogress = function(event) { if (event.lengthComputable) { percentComplete = event.loaded / event.total * 100; } }

Bifoga data från formulär med JavaScript

formData = new FormData(); formData.append('key', value); xhr.send(formData);

AJAX med jQuery

$.ajax({ url: "/file.php", data: { 'q' : '' }, success: function(msg) { console.log('Ett bra uppstod: ' + msg); }, error: function(msg) { console.log('Ett fel uppstod: ' + msg); } });

Ta reda på om set finns internet i JavaScript

xhr = new XMLHttpRequest(); xhr.open('HEAD', window.location, true); xhr.send(); xhr.addEventListener('readystatechange', processRequest, false); function processRequest(e) { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 304) { alert('🛜'); } else { alert('✈️'); } } } Testa här Logotyp för JS - JavaScript

Programmeringsspråk

Webhooks

Teknik

Länkar

Externa länkar

Lisa Ajax

Kuriosa