128- دروس جافا سكربت – JS AJAX PHP

### مقدمة

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

### ما هي AJAX؟

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

### استخدام AJAX مع JavaScript

#### المثال الأول: طلب بيانات نصية من الخادم

“`html

مثال AJAX بسيط

function loadContent() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById(“content”).innerHTML = xhr.responseText;
}
};
xhr.open(“GET”, “server.php”, true);
xhr.send();
}

مثال على استخدام AJAX

“`

في هذا المثال، نقوم بإنشاء زر يقوم بتحميل محتوى من الخادم عند النقر عليه. يتم استخدام كائن `XMLHttpRequest` لإنشاء طلب AJAX إلى [شركة برمجة مصرية] صفحة `server.php`.

#### إنشاء ملف PHP (server.php)

<?php
echo "هذا هو المحتوى الذي تم تحميله من الخادم.";
?>

### التعامل مع JSON باستخدام AJAX

#### المثال الثاني: جلب بيانات JSON

“`html

جلب بيانات JSON

function fetchJsonData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById(“user”).innerHTML = “الاسم: ” + data.name + “, العمر: ” + data.age;
}
};
xhr.open(“GET”, “data.php”, true);
xhr.send();
}

عرض بيانات JSON

“`

#### إعداد ملف PHP لإرجاع JSON (data.php)

<?php
$user = array("name" => "أحمد", "age" => 25);
echo json_encode($user);
?>

### إرسال بيانات إلى الخادم باستخدام AJAX

#### المثال الثالث: إرسال نموذج

“`html

إرسال نموذج باستخدام AJAX

function submitForm(event) {
event.preventDefault();

var xhr = new XMLHttpRequest();
var formData = new FormData(document.getElementById(“myForm”));

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById(“response”).innerHTML = xhr.responseText;
}
};

xhr.open(“POST”, “submit.php”, true);
xhr.send(formData);
}

إرسال نموذج باستخدام AJAX

“`

#### معالجة البيانات في PHP (submit.php)

<?php
$username = $_POST['username'];
$email = $_POST['email'];

if ($username && $email) {
    echo "تم استقبال البيانات بنجاح: اسم المستخدم هو $username والبريد الإلكتروني هو $email.";
} else {
    echo "يرجى إدخال جميع البيانات المطلوبة.";
}
?>

### الخاتمة

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

الوسوم: AJAXjavascriptJSONphpبرمجة ويبتجربة المستخدمتحديث ديناميكي