السلام عليكم ورحمة الله وبركاته
قبل البداء بموضوعنا لهذا اليوم يجب ان يكون لديك عزيزي القارئ معلومات حول التالى
AJAX : هذا الاختصار يعني
Asynchronous JavaScript and XML
فائده الأجاكس هي امكانيه ارسل بيانات او استقبال بيانات بدون تحديث الصفحه !
طيب نبدا بالدرس مباشره
طبعا في هالدرس راح نحتاج صفحتين الاولى صفحه الأجاكس والثانيه الصفحه الى راح يتم الاتصال بها .
1
نبداء بأول جزي من الأجاكس
وهو انشاء داله XMLHttpRequest
طبعا فيه شغله مهمه وهي ان هذه الداله تختلف حسب المتصفح
nternet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
لذالك راح ننشئ كود بالبدايه (جافا سكربت) وهو انشاء داله XMLHttpRequest
نظمن انه يعمل على اغلب المتصفحات
وعشان نبدا التعلم مع التطبيق راح نبدا بعمل صفحه AJAX
كود HTML:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("متصفحك لايدعم الـ AJAX!");
return false;
}
}
}
}
</script>
<form name="myForm">
الأسم : <input type="text" name="username" />
الوقت: <input type="text" name="time" />
</form>
</body>
</html>
هذا اول جزي من الكود
وهو اننا عملنا ajaxFunction
عملها التاكد ان الآجاكس يعمل حسب نوع المتصفح
وعملنا فورم صغير عباره عن خانتين للكتابه
الاولى الاسم والثانيه الوقت كذا نكون انتهينا من الجزء الاول من الكود وفهمنا عمله
2
بعد ان نقوم بارسال البيانات من الصفحه للسرفر مباشره (بدون تحديث الصفحه طبعا)
فأننا نحتاج داله من خلها نعرف ماهو وضع السرفر الذي تم ارسال البيانات هل كل شئ يعمل بشكل سليم او ان السرفر لايستجيب مثلا
لذالك راح نستخدم داله بشكل فينكشين لنعرف الحاله للسرفر
وهي
كود HTML:
xmlHttp.onreadystatechange=function()
{
// هنا راح نكتب بعض الاكواد
}
بعد استخدام الداله راح تعطينا معلومات حاله السرفر بشكل رقم خلينا نشوف وش يعني كل رقم
الرقم ( 0 ) يعني ان البيانات لم تجهز بعد لإرسالها
الرقم ( 1 ) يعني ان البيانات جاهزه
الرقم ( 2 ) تعني ان البيانات تم ارسالها للسرفر
الرقم ( 3 ) تعني ان البيانات في طور المعالجه في السرفر
الرقم ( 4 ) وهو الاهم والذي يعني ان الطلب جاهز وتم سواء ارسال او جلب بيانات
من هذي الارقام راح نستخدمها مع الفينكشين الاخير الى راح يعلمنا عن وضع الطلب الذي ارسلناه
لذالك راح نعدل الفينكشين الاخير ليكون بهذا الشكل
كود HTML:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
نتحقق ان الاستجابه كانت رقم 4 إى تم بنجاح الارسال والرد جاهز من السرفر
كود HTML:
document.myForm.time.value=xmlHttp.responseText;
هذي تعني راح نخزن رد السرفر (او الصفحه الى ارسلنا لها البيانات ) في المتغير
document.myForm.time.value
هذا المتغير هو الخانه الى عملناها بالفروم باسم الوقت
3
الان نصل للخطوه 3
وهي تجهيز كود الجافا سكربت المسؤل عن ارسال البيانات
طبعا بما اننا لازلنا بالمثال فراح نحتاج صفحه ثانيه نعملها باسم
time.html
لاننا راح نستخدمها في الكود ( يعني راح نضع اسم الصفحه
بامر الارسال
وراح يكون كالتالى
كود:
xmlHttp.open("GET","time.html",true);
xmlHttp.send(null);
ويبقى خطوه اخيره وهي
تعديل الفورم بحيث إذا قام احد بكتابه اى شئ في خانه الاسم
يتم وضع مايتم جلبه من الصفحه الآخرى في خانه الوقت
وراح يكون الفورم بهذا الشكل
كود HTML:
<form name="myForm">
الاسم: <input type="text"
onkeyup="ajaxFunction();" name="username" />
الوقت: <input type="text" name="time" />
</form>
اعتقد واضح الامر onkeyup="ajaxFunction();"
4
الخطوه الاخير هي الكود الكامل للصفحتين عشان نجرب
الصفحه الاولى ممكن نسميها
ajax.html
ويكون محتوى الصفحه التالى :
كود HTML:
<html dir="rtl">
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.html",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
الاسم: <input type="text"
onkeyup="ajaxFunction();" name="username" />
الوقت: <input type="text" name="time" />
</form>
</body>
</html>
والصفحه الثانيه باسم time.html
يكون محتواها وقت لان حنا نريد وضع وقت ( ممكن تضع فيها اى شئ .. وقت او نص ..الخ)
بس راح احنا نضع التالى
10:50:10
كمحتوى للصفحه
نشاهد تطبيق مصور للصفحه بعد فتحها
ثم بعد الكتابه بخانه الاسم
في النهايه اتمنى يكون الدرس واضح انا عارف انه صعب لكن لو فكرت وتمعنت فيه
راح تجد انك ماعليك إلا تغير شغله بسيطه فقط بالكود اللى استخدمناه وتقدر تستخدمه انت بطرق آخرى
ملفات الدرس رفعتها لكم في حال لم تتمكنو من عملها بنفسكم
بالتوفيق للجميع
المصدر
http://www.alastorh.com/vb/showthread.php?t=28162
تعلم الـ AJAX خطوه خطوه
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة Al7aRbi 
