مقدمة عن ajax مع الامثلة



ان لغة AJAX هي اختصار Asynchronous JavaScript And XML هي الاستخدام الغير متزامن مع الجافاسكربت JavaScript و XML .

ليست AJAX لغة برمجية ولكن طريقة جديدة للغات البرمجة الحالية .

ان AJAX هي فن تبادل البيانات مع السيرفر و تحديث أجزاء من الصفحة بدون تحميل الصفحة كلها .

مثال AJAX

<html>
<head>

<script type="text/javascript">

function loadXMLDoc() {
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText; } }
xmlhttp.open("GET","ajax.txt",true);
xmlhttp.send(); }

</script>
</head>
<body>

<div id="myDiv"><h2> دع لغة AJAX تقوم بتغيير المحتوى
</h2></div>
<button type="button" onclick="loadXMLDoc()">اضغط للتغيير</button>

</body>
</html>








مقدمة عامة عن ajax



ان لغة AJAX هي تحديث جزء من صفحة الويب بدون تحديث الصفحة كلها .




ماذا يجب أن تعرف


قبل البدء بلغة AJAX يجب أن تكون على علم باللغات التالية :

  • HTML / XHTML

  • CSS

  • JavaScript / DOM


ان أردت دراسة هذه المناهج واللغات أولاً يمكنك زيارة الصفحة الرئيسية للمعهد .




ماهي لغة AJAX ؟



  • ان لغة AJAX هي اختصار Asynchronous JavaScript and XML هي الاستخدام الغير متزامن مع الجافاسكربت JavaScript و XML .

  • ان لغة AJAX هي تقنية إنشاء صفحات ويب بسرعة و بأكثر فعالية .


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

يجب على الصفحات التقليدية ( التي لا تستخدم AJAX ) تحديث الصفحة كلها اذا أردت تغير شيء معين من الصفحة .

مثال عن التطبيقات التي تستخدم AJAX هي : Google Maps و Gmail و Youtube و Facebook .




كيف تعمل AJAX







تعتمد لغة AJAX على قوانين الانترنت


تعتمد لغة AJAX على قوانين الانترنت كما تستخدم المزيج من :

  • كائن XMLHttpRequest ( لتبادل البيانات بشكل غير متزامن مع السيرفر ) .

  • JavaScript/DOM : لعرض او التفاعل مع المعلومات .

  • CSS : لتصميم شكل البيانات .

  • XML : تستخدم عادة لتغيير نقل المعلومات .


تعتبر لغة AJAX خاصة بتطبيقات و قواعد الاساسية للمتصفح .




اقتراحات جووجل Google


تم إنشاء لغة AJAX عام 2005 من خلال شركة Google قسم اقتراحات جوجل .

يستخدم قسم اقتراحات جووجل لغة AJAX لإنشاء واجهة صفحات أكثر فعالية . عند الكتابة في صندوق محرك البحث جووجل , سترسل الجافاسكربت الأحرف الى السيرفر و سيعيد السيرفر قائمة من الاقتراحات .




ابدء باستخدام AJAX اليوم


تعتمد لغة AJAX على المبادئ الحالية . تم استخدام هذه المبادئ من خلال المطورون لعدة سنوات . ستتعلم المزيد في الدروس القادمة عن كيفية عمل لغة AJAX .

أمثلة AJAX



لفهم كيفية عمل AJAX , سنقوم بإنشاء برنامج من خلال لغة AJAX :

مثال

دع أجاكس يقوم بتغيير المحتوى









شرح المثال السابق


يحتوي البرنامج السابق على وسم div و زر واحد .

يستخدم div لعرض معلومات تم استدعائها من السيرفر .

يقوم الزر باستدعاء الكود الوظيفي المسمى loadXMLDoc() عند الضغط عليه :
<html>
<body>
<div id="myDiv"><h2>دعونا نقوم بتغيير محتوى البرنامج</h2></div>
<button type="button" onclick="loadXMLDoc()">تغيير المحتوى</button>

</body>
</html>


و الآن سنضيف الوسم <script> على قسم رأس الصفحة .

يحتوي قسم السكربت على الكود الوظيفي loadXMLDoc() :
<head>
<script type="text/javascript">
function loadXMLDoc() {
كود الأجاكس هنا
}

</script>
</head>


سيتم شرح الأمثلة في الدروس التالية لكيفة عمل AJAX .

تعليقات