Some uncommon Ajax techniques that most people don't know
Tags: webdev, javascript, programming, ajax
Published: 2024-03-11 09:57:50

Here 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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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:**

```javascript
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):

```javascript
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.