| مواقع صديقة: تعلم البي اتش بي - تصميم نت - أفضل استضافة |
| ||||||
| أجاكس AJAX دروس وأكواد عن تقنية أجاكس AJAX وكيفية استخدامها في PHP لبناء مواقع تفاعلية |
![]() |
| | LinkBack | أدوات الموضوع | طريقة العرض |
| | #1 (permalink) |
| عضو فعال |
السلام عليكم ... التصويت عن طريق PHP و AJAX ... في درسنا هذا سنقوم بوضع تصويت و يتم عرض النتيجة بعد الإختيار دون إعادة فتح الصفحة .... سوف نحتاج لعمل الدرس ... - صفحة HTML - صفحة PHP - ملف جافا سكريبت - ملف نصي ، لحفظ النتائج لنبدأ العمل الآن ... أولا: صفحة الـ HTML ... هذه هي صفحة HTML فلنسمها مثلا " poll.html " ، و هي تحتوي على فورم HTML و رابط للجافا سكريبت ... كود هتمل: <html> <head> <script src="poll.js"></script> </head> <body> <div id="poll" align=center> <h2>هل أحببت الأجاكس ؟</h2> <form> نعم <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br> لا <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html> تحتوي الصفحة كما ترون أعلاه على فورم HTML داخل الوسم <div> و معه اثنان من عناصر الإختيار ( radio buttons ) و الفورم يعمل هكذا ... - يقع الحدث عند التصويت على أحد الخيارين " نعم " أو " لا " - و عند وقوع الحدث يتم تنفيذ العملية getVote() - الوسم <div> الذي يحيط بالفورم يدعى " poll " ، و عند إعادة البيانات من عملية getVote() يتغير الفورم ثانيا: الملف النصي ... فلنسمي هذا الملف " poll_result.txt " ، و به يتم تخزين بيانات التصويت ... و يخزن على الشكل الآتي: كود: 0||0 ملاحظة : لا تنسى أن تعطي تصريح الكتابة فقط للخادم لا غير ... ثالثا: ملف الجافا سكريبت ... نعطيه اسم " poll.js " ، و هو الملف الذي ربطناه بصفحة الـ HTML و التي سميناها " poll.html " كود: var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("poll").
innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
العملية getVote() تنفذ هذه العملية عند إختيار " نعم " أو " لا " في صفحة الـ HTML - نحدد رابط ( اسم الملف ) للإرسال للخادم - نضيف البارامتر " vote " للرابط مع محتوى حقل الـ input - نضيف عدد عشوائي لمنع استخدام خدمة الملف المخبأ ( cached file ) - طلب عملية GetXmlHttpObject لإنشاء كائن XMLHTTP ، و إخبار الكائن بتنفيذ العملية المسماة stateChanged عند حدوث التغيير - فتح كائن XMLHTTP مع الرابط المعطى - إرسال طلب HTTP إلى الخادم رابعا: صفحة الـ PHP ... نعطيها اسم " poll_vote.php " كود PHP: - الحصول على محتوى الملف النصي " poll_result.txt " - وضع محتوى الملف في المتغيرات و الإضافة إلى المتغير المصوت عليه - طباعة النتيجة في الملف النصي " poll_result.txt " - في الأخير ينتج رسم بياني لنتيجة التصويت يمكنك تحميل ملفات الدرس من المرفقات ، و تشغيل ملف " poll.html " على الخادم ... ملاحظة هامة : هذا الدرس مترجم خصصيصا لمنتديات بي اتش بي من موقع W3Schools، و هذا هو رابط الدرس... بإنتظار الردود المشجعة ...تحياتي ...
__________________ قام بآخر تعديل aMINE يوم 16-08-2008 في 02:43 PM |
| | |
| | #2 (permalink) |
| عضو فعال تاريخ الانتساب: 04-03-2007 المكان: العراق
مشاركات: 655
مستوى السمعة : 2 ![]() |
أخوي aMINE تشكر كثيراً على هذا السكربت نحن فعلاً بحاجة إلى تطوير برامجنا ومواقعنا أنا أشاهد المنتديات الإنجليزية دوماً أراها متفوقة بكثير يعني يحاولون إكمال جميع الموضوعات ويغذوها بالمعلومات إن شاء الله نصير كذلك في هذا المنتدى لكن نحن في طور التعلم الآن ربي يحفظك تقبل تحياتي |
| | |
| | #3 (permalink) |
| * أبو عمر * |
ممتاز بارك الله فيك أخي aMINE سكريبت رائع بحق ويلزم لاي موقع جزاك الله كل خير اقتراحات في حال رغبت بالتطوير: ![]() ![]() 1- اعتماد قواعد البيانات 2- امكانية التصويت بس مرة واحدة 3- لوحة تحكم بسيطة للتحكم في التصويتات
__________________ لضمان رد سريع على استفسارك أو موضوعك * تأكد من البحث في المنتدى قبل أن تسأل * احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك * قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها |
| | |
| | #4 (permalink) | ||
| عضو فعال | اقتباس:
اقتباس:
أولا شكرا لكما على المرور لكن لا أدري كيف فهمتما أنه سكريبت ، إنه درس لعمل تصويت عن طريق PHP و AJAXو كل ما فعلته أني وضعت التطبيق في المرفقات ... و لكن أفكارك في التطوير جميلة حقا أخي محمود ، و متى فرغت سوف أقوم بذلك ( على أساس مشاغلي كثيرة ) ...تحياتي ...
__________________ | ||
| | |
| | #5 (permalink) | |
| * أبو عمر * | اقتباس:
طيب.... شكرا على الدرس الرائع ![]() ![]() فعلا نفتقد هذه النوعية من المواضيع التي لم تناقش من قبل
__________________ لضمان رد سريع على استفسارك أو موضوعك * تأكد من البحث في المنتدى قبل أن تسأل * احرص على أن تنتقي العنوان المناسب لموضوعك أو سؤالك * قم بصياغة سؤالك بطريقة واضحة مع ذكر تجربتك ومكان الخطأ فيها | |
| | |
| | #8 (permalink) | |
| عضو فعال | اقتباس:
شكرا على المرور ، و فعلا الجافا سكريبت و الأجاكس هما حياة الموقع ... تحياتي ...
__________________ | |
| | |
| | #9 (permalink) |
| عضو فعال |
السلام عليكم ... و هذا تطبيق آخر للدرس من هنا ... أرجو أن نرى تفاعل أكبر و تطبيقات أخرى للدرس ... بانتظاركم تحياتي ...
__________________ قام بآخر تعديل aMINE يوم 17-06-2007 في 08:57 PM السبب: تعديل رابط المثال ... |
| | |
| | #10 (permalink) |
| عضو نشيط تاريخ الانتساب: 29-05-2007
مشاركات: 53
مستوى السمعة : 2 ![]() |
السلام عليكم الأجاكس لغة رائعة توفرمن الوقت و تريح المتصفح لي سؤال . كيف أجعل النتائج تكون مرتبة بالشكل الذي أوده مثلا القيمة التي حضيت بأعلى ترتيب تاتي الأولى ثم تليها الأقل فالأقل .. |
| | |
![]() |
| زوار هذا الموضوع الآن : 1 (0 عضو و 1 ضيف) | |
(View-All)
Members who have read this thread : 30
| |
| 3BkReNo0o, متعب, ميت احساس, aljnoon, Ben.Fat7i, البنفسجيه, الـشـبـح, coder, database, بلال كيالي, gaser, hsn67, خا999لد, imadeco, iSMaiLZ, Kariro, la7nal7ua, man in dark, man summits, Mido-9, mnndee_milan, Mr.x, najdsky, saleh88it, seamaan, stareagle, عادل شريف, عبدالباقى حفنى, غزوان, zaid aliraqi |
| أدوات الموضوع | |
| طريقة العرض | |
|
|
مواضيع ذات صلة | ||||
| الموضوع | الكاتب | المجلس | المشاركات | المشاركة الأخيرة |
| موقع فيه الكثير من اكواد Ajax | live | لغة Javascript | 3 | 25-06-2008 12:48 PM |
| مشكله مع الا ajax | ابن العراق | لغة Javascript | 1 | 31-05-2008 08:15 PM |
| طلب===> سكريبت التصويت | Mr.a.saif | قسم السكريبتات | 3 | 13-04-2008 05:59 PM |
| مشكلة في كود Ajax | أبو نور الدين | مشاكل وحلول PHP Errors & Troubleshooting | 2 | 25-03-2008 01:54 PM |
| [مشكلة]التصويت -الاجاكس واللغة العربية | مادونا | مشاكل وحلول PHP Errors & Troubleshooting | 1 | 07-03-2008 01:36 AM |