jQuery AJAX with JSON - Best Practices Skill

Overview

Comprehensive guidance on using jQuery AJAX for sending and receiving JSON data with security, error handling, and modern best practices.

Core jQuery AJAX Methods

1. $.ajax() - Complete Control

```javascript $.ajax({ url: '/api/users', type: 'POST', dataType: 'json', contentType: 'application/json', data: JSON.stringify({ name: 'John', email: '[email protected]' }), timeout: 10000, headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') } }) .done(function(response) { /* Handle success / }) .fail(function(xhr) { / Handle error / }) .always(function() { / Cleanup */ }); ```

2. $.getJSON() - GET Shorthand

```javascript $.getJSON('/api/users', { active: true }) .done(function(data) { console.log(data); }) .fail(function(xhr) { console.error(xhr); }); ```

Critical Best Practices

1. Always Use JSON.stringify() for Complex Data

❌ Bad: ```javascript $.ajax({ url: '/api/users', type: 'POST', data: { name: 'John', preferences: { theme: 'dark' } } // jQuery serializes as form data, not JSON! }); ```

✅ Good: ```javascript $.ajax({ url: '/api/users', type: 'POST', contentType: 'application/json', data: JSON.stringify({ name: 'John', preferences: { theme: 'dark' } }) }); ```

2. Comprehensive Error Handling

```javascript $.ajax({ url: '/api/users' }) .done(function(data) { handleSuccess(data); }) .fail(function(xhr, textStatus, errorThrown) { let errorMessage = 'An error occurred';

if (xhr.status === 400) errorMessage = 'Invalid request';
else if (xhr.status === 401) { 
    errorMessage = 'Unauthorized';
    window.location.href = '/login';
}
else if (xhr.status === 500) errorMessage = 'Server error';
else if (textStatus === 'timeout') errorMessage = 'Request timed out';

showErrorMessage(errorMessage);

}); ```

3. Security - CSRF Token Protection

```javascript // Global setup $(document).ready(function() { const csrfToken = $('meta[name="csrf-token"]').attr('content'); $.ajaxSetup({ headers: { 'X-CSRF-Token': csrfToken } }); }); ```

4. Input Validation

```javascript function createUser() { const userData = { name: $('#name').val().trim(), email: $('#email').val().trim() };

const errors = [];
if (!userData.name || userData.name.length < 2) 
    errors.push('Name must be at least 2 characters');
if (!isValidEmail(userData.email)) 
    errors.push('Invalid email');

if (errors.length > 0) {
    showErrors(errors);
    return;
}

$.ajax({
    url: '/api/users',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(userData)
});

} ```

5. Promise-Based API Service Layer

```javascript const UserAPI = { getAll: (filters) => $.ajax({ url: '/api/users', data: filters }), getById: (id) => $.ajax({ url: `/api/users/${id}` }), create: (data) => $.ajax({ url: '/api/users', type: 'POST', contentType: 'application/json', data: JSON.stringify(data) }), update: (id, data) => $.ajax({ url: `/api/users/${id}`, type: 'PUT', contentType: 'application/json', data: JSON.stringify(data) }) }; ```

Advanced Patterns

Request Cancellation

```javascript let currentRequest = null;

function searchUsers(query) { if (currentRequest) currentRequest.abort();

currentRequest = $.ajax({
    url: '/api/users/search',
    data: { q: query },
    timeout: 5000
}).always(() => currentRequest = null);

} ```

Response Caching

```javascript const cache = {}; function getCachedData(url) { if (cache[url]) return $.Deferred().resolve(cache[url]); return $.ajax({ url }).done(data => cache[url] = data); } ```

Batch Requests

```javascript Promise.all([ $.getJSON('/api/stats'), $.getJSON('/api/orders'), $.getJSON('/api/revenue') ]).then(([stats, orders, revenue]) => { displayStats(stats); displayOrders(orders); displayRevenue(revenue); }); ```

Security Checklist

• CSRF token included in state-changing requests
• HTTPS used for sensitive data
• User input escaped before display (use .text() not .html())
• Input validation on client and server
• Error messages don't expose sensitive info
• Rate limiting implemented

Common Pitfalls to Avoid

1. ❌ Not setting contentType: 'application/json'
2. ❌ No error handling (.fail)
3. ❌ Using synchronous requests (async: false)
4. ❌ Multiple enumerations of data
5. ❌ Not cleaning up event handlers

Modern Alternative: Fetch API

```javascript async function createUser(userData) { try { const response = await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('[name=csrf-token]').content }, body: JSON.stringify(userData) });

    if (!response.ok) throw new Error('Request failed');
    return await response.json();
} catch (error) {
    console.error(error);
    throw error;
}

} ```