WangLiwenHere are some uncommon but useful Ajax techniques, along with example code snippets:
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();
These techniques provide greater and finer control over Ajax, enabling you to solve complex problems and create more robust applications.
