Capture XHR Response

Capture XHR Response Examples

// Examples showing how to capture an XMLHttpRequest response into an outside variable // and better approaches (callback, Promise, fetch/async-await). const output = document.getElementById('output'); function log(msg) { const p = document.createElement('pre'); p.textContent = msg; output.appendChild(p); } // 1) Direct assignment to an outside variable (works but is asynchronous) // You cannot read the value synchronously right after calling loadAssign. let outsideVar; function loadAssign(url) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { // assign response to outside variable outsideVar = xhr.responseText; log('outsideVar set (assign): ' + outsideVar.slice(0, 200)); } else { log('assign: request failed with status ' + xhr.status); } } }; xhr.send(); } // 2) Preferred callback pattern // Provides the response when it's ready via a callback function. function loadWithCallback(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) callback(null, xhr.responseText); else callback(new Error('Status ' + xhr.status)); } }; xhr.send(); } // 3) Promise wrapper (recommended for modern code) function loadAsPromise(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) resolve(xhr.responseText); else reject(new Error('Status ' + xhr.status)); } }; xhr.send(); }); } // 4) Use fetch + async/await (simplest modern API) async function loadWithFetch(url) { const res = await fetch(url); if (!res.ok) throw new Error('Status ' + res.status); return res.text(); } // Demo usage const demoUrl = 'https://jsonplaceholder.typicode.com/todos/1'; log('Starting examples...'); // Example 1: assign to outside variable loadAssign(demoUrl); // immediate read will likely be undefined because request is async log('outsideVar immediately after calling loadAssign: ' + String(outsideVar)); // Wait a bit to show outsideVar gets populated later setTimeout(() => { log('outsideVar after 800ms: ' + (outsideVar ? outsideVar : 'still undefined')); }, 800); // Example 2: callback loadWithCallback(demoUrl, (err, data) => { if (err) log('Callback error: ' + err.message); else log('Callback data: ' + data); }); // Example 3: Promise loadAsPromise(demoUrl) .then((data) => log('Promise data: ' + data)) .catch((err) => log('Promise error: ' + err.message)); // Example 4: fetch + async/await (async () => { try { const data = await loadWithFetch(demoUrl); log('Fetch/await data: ' + data); } catch (err) { log('Fetch error: ' + err.message); } })(); // Summary comment: // - You can assign the XHR response to an outside variable inside onreadystatechange, // but you must access it later (after the request completes). // - For clearer control flow use a callback, Promise, or async/await (fetch).