130- دروس جافا سكربت – JS AJAX Database

## مقدمة إلى AJAX في JavaScript

AJAX (Asynchronous JavaScript and XML) هو تقنية تستخدم في تطوير الويب تتيح للتطبيقات تحديث الأجزاء المختلفة من واجهة المستخدم بشكل غير متزامن دون الحاجة إلى إعادة تحميل الصفحة بالكامل. يتم استخدام AJAX لتحسين تجربة المستخدم عن طريق جعل التطبيقات أسرع وأكثر استجابة.

## كيفية عمل AJAX مع قاعدة البيانات

عند استخدام AJAX مع قاعدة بيانات، يتم إرسال طلبات HTTP من العميل (المتصفح) إلى الخادم، حيث يتم معالجة الطلبات واسترجاع البيانات المطلوبة من قاعدة البيانات. يمكن أن تكون هذه البيانات بصيغة JSON [شركة برمجة مصرية] أو XML، ثم يتم إرسالها مرة أخرى إلى العميل لتحديث واجهة المستخدم.

### مثال بسيط على استخدام AJAX في JavaScript

“`html

AJAX Example

function loadData() {
const xhr = new XMLHttpRequest();
xhr.open(“GET”, “getData.php”, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById(“data”).innerHTML = xhr.responseText;
}
};
xhr.send();
}

AJAX Example

“`

في المثال أعلاه، نستخدم كائن `XMLHttpRequest` لإرسال طلب إلى ملف PHP يسمى `getData.php`. هذا الملف هو المسؤول عن استرجاع البيانات من قاعدة البيانات.

### مثال على ملف PHP للاستجابة للطلب

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT name, email FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "Name: " . $row["name"]. " - Email: " . $row["email"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

في هذا المثال، يقوم ملف PHP بالاتصال بقاعدة البيانات واسترجاع بيانات المستخدمين. يتم إرسال النتائج كاستجابة [شركة برمجة مصرية] يتم عرضها في صفحة HTML.

## فوائد استخدام AJAX

1. **تحسين تجربة المستخدم**: بفضل عدم الحاجة إلى إعادة تحميل الصفحة بالكامل، يمكن للمستخدمين الاستمتاع بتجربة سلسة وسريعة.

2. **توفير النطاق الترددي**: يتم إرسال واستقبال البيانات الضرورية فقط، مما يقلل من استهلاك النطاق الترددي.

3. **تحديثات فورية**: يمكن تحديث أجزاء من الصفحة بشكل فوري عند الحاجة، مما يجعل التطبيقات أكثر تفاعلية.

## الخاتمة

AJAX هو أداة قوية في تطوير الويب الحديث، يوفر تجربة مستخدم محسنة من خلال السماح بتحديثات غير متزامنة للبيانات. باستخدام تقنيات مثل JavaScript وPHP، يمكن للمطورين إنشاء تطبيقات ويب ديناميكية وقابلة للتكيف مع احتياجات المستخدمين.

الوسوم: AJAXjavascriptJSONphpتجربة_المستخدمتطوير_الويبقاعدة_البيانات