دروس PHP Ajax مع مثال

ما هو اياكس؟

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

Javaسيناريو هي لغة برمجة نصية من جانب العميل. يتم تنفيذها على جانب العميل بواسطة متصفحات الويب التي تدعم Javaالنصي. Javaيعمل كود البرنامج النصي فقط في المتصفحات التي تحتوي على Javaتم تمكين البرنامج النصي.

XML XML هو اختصار لـ Extensible Markup Language (لغة الترميز القابلة للتوسيع). تُستخدم هذه اللغة لترميز الرسائل بصيغ قابلة للقراءة البشرية والآلية. وهي تشبه لغة HTML، ولكنها تتيح لك إنشاء علامات مخصصة. لمزيد من التفاصيل حول XML، راجع المقالة على XML.

لماذا استخدام أجاكس؟

• يسمح بالتطويرping تطبيقات ويب تفاعلية غنية تمامًا مثل تطبيقات سطح المكتب.
• يمكن إجراء التحقق من صحة البيانات أثناء قيام المستخدم بتعبئة النموذج دون إرساله. ويمكن تحقيق ذلك باستخدام خاصية الإكمال التلقائي. تُرسل الكلمات التي يكتبها المستخدم إلى الخادم للمعالجة، ويستجيب الخادم بكلمات مفتاحية مطابقة لما أدخله المستخدم.
• يمكن استخدامه لملء مربع منسدل بناءً على قيمة مربع منسدل آخر.
• يمكن استرجاع البيانات من الخادم وتحديث جزء معين فقط من الصفحة دون تحميل الصفحة بأكملها. وهذا مفيد جدًا لأجزاء صفحات الويب التي تقوم بتحميل عناصر مثل:
  • تويت
  • التعليقات
  • المستخدمون الذين يزورون الموقع، وبيانات حية مماثلة.

كيفية إنشاء تطبيق PHP Ajax

سنقوم بإنشاء تطبيق بسيط يسمح للمستخدمين بالبحث عن أطر عمل PHP MVC الشائعة.

سيحتوي تطبيقنا على مربع نص حيث يقوم المستخدمون بكتابة أسماء الأطر البرمجية.

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

الخطوة 1) إنشاء صفحة الفهرس

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

هنا،

• "onkeyup="showName(this.value)"" ينفذ الأمر Javaتقوم الدالة البرمجية بعرض الاسم في كل مرة يتم فيها كتابة مفتاح في مربع النص. تُسمى هذه الميزة بالإكمال التلقائي.

الخطوة 2) إنشاء صفحة الأطر

Frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

الخطوة 3) إنشاء البرنامج النصي JS

auto_Complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

هنا،

• يتحقق الشرط "if (str.length == 0)" من طول السلسلة النصية. إذا كان طولها صفرًا، فلن يتم تنفيذ باقي البرنامج النصي.
• يستخدم متصفحا إنترنت إكسبلورر الإصدارين 5 و6 خاصية ActiveXObject لتنفيذ تقنية AJAX. أما الإصدارات والمتصفحات الأخرى مثل كروم و Firefox استخدم XMLHttpRequest. يضمن هذا الكود أن يعمل تطبيقنا في كل من متصفحي IE 5 و 6 والمتصفحات الحديثة.
• "xmlhttp.onreadystatechange=function…" يتحقق مما إذا كان تفاعل AJAX قد اكتمل وكانت الحالة 200، ثم يقوم بتحديث نطاق txtName بالنتائج التي تم إرجاعها.

الخطوة 4) اختبار تطبيق PHP Ajax الخاص بنا

بافتراض أنك قمت بحفظ الملف index.php في phptuts/ajax، انتقل إلى URL http://localhost/phptuts/ajax/index.php

اكتب الحرف C في مربع النص. ستظهر لك النتائج التالية.

يوضح المثال أعلاه مفهوم AJAX وكيف يمكن أن يساعدنا في إنشاء تطبيقات تفاعلية غنية.

تقنية AJAX الحديثة مع واجهة برمجة تطبيقات Fetch

لا يزال كائن XMLHttpRequest المذكور أعلاه يعمل، ولكن فرع ActiveXObject الخاص به لم يعد ضروريًا في متصفح إنترنت إكسبلورر القديم. توفر المتصفحات الحديثة واجهة برمجة تطبيقات Fetch القائمة على الوعود، والتي تُجري نفس الطلب باستخدام كود أقل بكثير.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

تؤدي هذه النسخة نفس الوظيفة: فهي ترسل النص المكتوب إلى ملف frameworks.php وتضع الاستجابة في حقل txtName. كما أنها تستخدم encodeURIComponent لتشفير المدخلات بشكل آمن، ويمكن توسيع سلسلة الوعود الخاصة بها بسهولة لتشمل معالجة الأخطاء باستخدام كتلة catch.

الأسئلة الشائعة