AJAX مع jQuery - الجزء الأول

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: function(response) {
        console.log('نجح:', response);
    },
    error: function(xhr, status, error) {
        console.log('خطأ:', error);
    }
});

$.ajax({
    // إعدادات الطلب
    url: '/api/users',
    method: 'GET',              // طريقة HTTP (GET, POST, PUT, DELETE)
    data: { page: 1, limit: 10 }, // البيانات المراد إرسالها
    dataType: 'json',           // نوع الاستجابة المتوقعة
    timeout: 5000,              // مهلة الطلب (ميلي ثانية)

    // الرؤوس
    headers: {
        'Authorization': 'Bearer token123',
        'X-Custom-Header': 'value'
    },

    // دوال الاستدعاء
    success: function(data, textStatus, xhr) {
        console.log('تم استلام البيانات:', data);
    },

    error: function(xhr, textStatus, errorThrown) {
        console.log('فشل الطلب:', textStatus);
    },

    complete: function(xhr, textStatus) {
        console.log('اكتمل الطلب');
    },

    // الأحداث
    beforeSend: function(xhr) {
        console.log('جاري إرسال الطلب...');
        $('#loader').show();
    }
});

<div id="user-profile">
    <button id="load-user">تحميل الملف الشخصي</button>
    <div id="profile-content"></div>
</div>

<script>
$('#load-user').click(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/users/1',
        method: 'GET',
        dataType: 'json',
        beforeSend: function() {
            $('#profile-content').html('<p>جاري التحميل...</p>');
        },
        success: function(user) {
            var html = '<h3>' + user.name + '</h3>' +
                      '<p>البريد الإلكتروني: ' + user.email + '</p>' +
                      '<p>الهاتف: ' + user.phone + '</p>' +
                      '<p>الموقع: ' + user.website + '</p>';
            $('#profile-content').html(html);
        },
        error: function(xhr, status, error) {
            $('#profile-content').html('<p style="color: red;">فشل تحميل الملف الشخصي</p>');
        }
    });
});
</script>

<form id="new-post-form">
    <input type="text" id="post-title" placeholder="العنوان">
    <textarea id="post-body" placeholder="المحتوى"></textarea>
    <button type="submit">إنشاء منشور</button>
</form>
<div id="post-result"></div>

<script>
$('#new-post-form').submit(function(e) {
    e.preventDefault();

    var postData = {
        title: $('#post-title').val(),
        body: $('#post-body').val(),
        userId: 1
    };

    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'POST',
        data: JSON.stringify(postData),
        contentType: 'application/json',
        dataType: 'json',
        success: function(response) {
            $('#post-result').html(
                '<div style="color: green;">' +
                'تم إنشاء المنشور برقم: ' + response.id +
                '</div>'
            );
            $('#new-post-form')[0].reset();
        },
        error: function() {
            $('#post-result').html(
                '<div style="color: red;">فشل إنشاء المنشور</div>'
            );
        }
    });
});
</script>

// استجابة JSON
$.ajax({
    url: '/api/products.json',
    dataType: 'json',
    success: function(products) {
        products.forEach(function(product) {
            console.log(product.name, product.price);
        });
    }
});

// استجابة HTML
$.ajax({
    url: '/templates/product-card.html',
    dataType: 'html',
    success: function(html) {
        $('#products-container').append(html);
    }
});

// استجابة نصية
$.ajax({
    url: '/data/readme.txt',
    dataType: 'text',
    success: function(text) {
        $('#content').text(text);
    }
});

// استجابة XML
$.ajax({
    url: '/data/products.xml',
    dataType: 'xml',
    success: function(xml) {
        $(xml).find('product').each(function() {
            var name = $(this).find('name').text();
            console.log(name);
        });
    }
});

// تدوين الكائن (موصى به)
$.ajax({
    url: '/api/search',
    data: {
        q: 'laptop',
        category: 'electronics',
        minPrice: 500,
        maxPrice: 2000
    },
    success: function(results) {
        console.log(results);
    }
});
// يرسل: /api/search?q=laptop&category=electronics&minPrice=500&maxPrice=2000

// تدوين النص
$.ajax({
    url: '/api/search',
    data: 'q=laptop&category=electronics',
    success: function(results) {
        console.log(results);
    }
});

$.ajax({
    url: '/api/protected-data',
    method: 'GET',
    headers: {
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...',
        'X-API-Key': 'your-api-key-here',
        'X-Requested-With': 'XMLHttpRequest'
    },
    success: function(data) {
        console.log('البيانات المحمية:', data);
    },
    error: function(xhr) {
        if (xhr.status === 401) {
            console.log('غير مصرح - رمز غير صالح');
        }
    }
});

function loadDataWithTimeout() {
    $.ajax({
        url: '/api/slow-endpoint',
        timeout: 3000, // 3 ثوانٍ
        success: function(data) {
            $('#result').html('تم تحميل البيانات بنجاح');
        },
        error: function(xhr, status, error) {
            if (status === 'timeout') {
                $('#result').html('انتهت مهلة الطلب. يرجى المحاولة مرة أخرى.');
            } else {
                $('#result').html('خطأ: ' + error);
            }
        }
    });
}

// آلية إعادة المحاولة
function loadDataWithRetry(maxRetries) {
    var attempts = 0;

    function attempt() {
        $.ajax({
            url: '/api/unreliable-endpoint',
            success: function(data) {
                console.log('نجح بعد', attempts + 1, 'محاولات');
            },
            error: function() {
                attempts++;
                if (attempts < maxRetries) {
                    console.log('محاولة إعادة', attempts);
                    setTimeout(attempt, 1000); // إعادة المحاولة بعد ثانية واحدة
                } else {
                    console.log('فشل بعد', maxRetries, 'محاولات');
                }
            }
        });
    }

    attempt();
}

loadDataWithRetry(3);

$('#submit-button').click(function() {
    var $button = $(this);

    $.ajax({
        url: '/api/save-data',
        method: 'POST',
        data: { value: 'test' },
        beforeSend: function() {
            $button.prop('disabled', true).text('جاري الحفظ...');
            $('#loader').show();
        },
        success: function(response) {
            $('#message').html('<span style="color: green;">تم الحفظ!</span>');
        },
        error: function() {
            $('#message').html('<span style="color: red;">خطأ!</span>');
        },
        complete: function() {
            // يتم التشغيل دائماً، سواء نجح أو فشل
            $button.prop('disabled', false).text('حفظ');
            $('#loader').hide();

            // مسح الرسالة بعد 3 ثوانٍ
            setTimeout(function() {
                $('#message').empty();
            }, 3000);
        }
    });
});