dev-resources.site

for different kinds of informations.

Some uncommon Ajax techniques that most people don't know

Published at

3/11/2024

1. Utilizing the `fetch` API Instead of `XMLHttpRequest`

The fetch API is a modern, Promise-based approach for making network requests. It's cleaner and easier to use compared to XMLHttpRequest.

Example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

2. Canceling Requests with `AbortController`

If you need to cancel an ongoing Ajax request, AbortController can be used.

Example:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Error:', error);
    }
  });

// Cancel the request under certain conditions
controller.abort();

3. Handling Binary Data with `Blob` and `URL.createObjectURL`

When dealing with binary data like images or files, Blob and URL.createObjectURL can be used to display them.

Example:

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. Sending Form Data or Uploading Files with `FormData`

FormData objects are useful when sending form data or uploading files.

Example:

const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('avatar', fileInput.files[0]); // Assuming fileInput is a file input element

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

5. Customizing Request Headers

Sometimes, servers require specific headers to properly process requests. You can customize these headers through Ajax.

Example:

fetch('https://api.example.com/data', {
  headers: {
    'Custom-Header': 'CustomValue',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

6. Monitoring Request Progress

For large file uploads or downloads, listening to progress events can be useful.

Example (using XMLHttpRequest since fetch doesn't directly support progress events):

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/largefile', true);

xhr.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% downloaded');
  }
};

xhr.onload = function() {
  if (this.status === 200) {
    console.log(this.responseText);
  }
};

xhr.send();