Home >Web Front-end >JS Tutorial >Ajax: Revolutionizing Web Interaction - A Comprehensive Guide
Ajax (Asynchronous JavaScript and XML) is a set of web development techniques that enables web applications to send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
function traditionalAjax() { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); updateUI(data); } }; xhr.onerror = function() { console.error('Request failed'); }; xhr.send(); }
async function modernFetch() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); updateUI(data); } catch (error) { console.error('Fetch Error:', error); } }
async function axiosRequest() { try { const { data } = await axios.get('https://api.example.com/data'); updateUI(data); } catch (error) { handleError(error); } }
function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = arguments; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); }; } const debouncedSearch = debounce(fetchSearchResults, 300);
const controller = new AbortController(); const signal = controller.signal; fetch('https://api.example.com/data', { signal }) .then(response => response.json()) .then(data => updateUI(data)) .catch(err => { if (err.name === 'AbortError') { console.log('Fetch aborted'); } }); // Cancel request if needed controller.abort();
Ajax remains a fundamental technique in modern web development, enabling rich, interactive user experiences.
Let’s dive deeper into the world of software engineering together! I regularly share insights on JavaScript, TypeScript, Node.js, React, Next.js, data structures, algorithms, web development, and much more. Whether you're looking to enhance your skills or collaborate on exciting topics, I’d love to connect and grow with you.
Follow me: Nozibul Islam
The above is the detailed content of Ajax: Revolutionizing Web Interaction - A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!