Lessons

1 AJAX Tutorial 2 AJAX HOME 3 AJAX Introduction 4 What Is AJAX 5 How AJAX Works 6 History of AJAX 7 Synchronous vs Asynchronous 8 AJAX Basics and the Request Lifecycle 9 The Request Lifecycle 10 HTTP Methods in AJAX 11 Reading Status Codes 12 Request Headers 13 Response Headers 14 Query Parameters 15 Data Formats: JSON, XML, Text 16 The Same-Origin Policy 17 fetch API with JSON 18 fetch() Basics 19 GET Requests with fetch 20 POST Requests with fetch 21 PUT & PATCH Requests 22 DELETE Requests 23 Setting fetch Headers 24 The Response Object 25 Parsing JSON Responses 26 Text, Blob & FormData Responses 27 fetch Options & Config 28 async/await with fetch 29 Promises and .then() 30 Parallel Requests with Promise.all 31 Promise.race & Timeouts 32 Sequential Requests 33 XMLHttpRequest for Legacy Code 34 XMLHttpRequest Basics 35 readyState & Events 36 XHR vs fetch 37 Upload & Download Progress 38 AJAX with jQuery 39 AJAX with Axios 40 Axios Interceptors 41 Working with JSON 42 JSON.parse & JSON.stringify 43 Sending JSON Bodies 44 Receiving JSON Data 45 Working with Nested JSON 46 Handling XML Responses 47 FormData & File Uploads 48 Uploading Files 49 URL-Encoded Form Bodies 50 AJAX Forms and Progressive Enhancement 51 Submitting Forms with AJAX 52 Live Form Validation 53 Progressive Enhancement 54 Loading, Errors and Retry UI 55 Error Handling 56 Network vs HTTP Errors 57 Loading & Spinner States 58 Retry & Backoff 59 Request Timeouts 60 Cancelling with AbortController 61 Empty & Error UI States 62 Rendering Response Data 63 Updating the DOM 64 Templating Response Data 65 Pagination 66 Infinite Scroll 67 Live Search & Autocomplete 68 Debouncing & Throttling Requests 69 Polling for Updates 70 Long Polling 71 AJAX vs WebSockets 72 Server-Sent Events 73 Caching Responses 74 HTTP Caching Headers 75 CORS, CSRF and Credentials 76 Understanding CORS 77 CORS Preflight Requests 78 CSRF Protection 79 Sending Cookies & Credentials 80 Authenticated Requests 81 AJAX with JWT 82 Using API Keys 83 Consuming REST APIs 84 AJAX with GraphQL 85 Calling Third-Party APIs 86 Handling Rate Limits 87 AJAX Performance 88 AJAX Best Practices 89 Common AJAX Mistakes 90 Debugging AJAX 91 Testing AJAX Code 92 AJAX with a PHP Backend 93 AJAX with a Node Backend 94 AJAX in Single-Page Apps 95 AJAX Cheatsheet 96 AJAX Interview Questions 97 AJAX Quiz 98 AJAX Exercises 99 AJAX Practice Problems 100 AJAX Project Ideas 101 AJAX Syllabus 102 AJAX Study Plan 103 AJAX Bootcamp

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('title', 'My upload');

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');

xhr.upload.onprogress = e => {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    document.querySelector('#bar').style.width = percent + '%';
  }
};

xhr.onload = () => console.log('Done', xhr.status);
xhr.send(form);   // do NOT set Content-Type; the browser adds the boundary