الأجاكس للمبتدئين في هذه التقنية . . . تفضلوا وتعرفوا علي فكرة العمل . . . .

http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„ط£ط¬ط§ظƒط³ ظ„ظ„ظ…ط¨طھط¯ط¦ظٹظ† ظپظٹ ظ‡ط°ظ‡ ط§ظ„طھظ‚ظ†ظٹط© . . . طھظپط¶ظ„ظˆط§ ظˆطھط¹ط±ظپظˆط§ ط¹ظ„ظٹ ظپظƒط±ط© ط§ظ„ط¹ظ…ظ„ . . . .

---

بسم الله الرحمن الرحيم

طلب احد الزملاء مني في موضوعي عن شروحات الجافا سكريبت script والبي إتش بي و .. . . ..

شرح طريقة كيفية عمل تسجيل دخول بالأجاكس ولكني خفت ان يكون هو او من سيأتي من بعده ليس لديه خلفية عن فكرة عمل الأجاكس وبالتالي يكون الكود code نسخ ولصق واكون قتلت الإبداع لديه

ففضلت ان اقوم بعمل موضوع عن كيفية سير طلبات الأجاكس وكيفية إستلامها ومعالجتها وإرسال الرد بدون عمل اي تحديث update للصفحة . . .

--------------------------------------
ماهو الأجاكس ؟؟

الأجاكس ليست لغة برمجة قائمة بذاتها وإنما هي إستغلال متقدم لإضافات جديدة في لغة الجافا سكريبت script

ولا يحتاج إلي اي برمجيات لتركيب installها علي سيرفر SERVER الموقع حيث انه من المعروف ان الجافا سكريبت script تعمل علي جهاز المستخدم وليس السيرفر SERVER . . .

الأجاكس هو بكل بساطة إعتماد بيانات معينة ومعالجتها وعمل بعض العمليات عليها ثم إرجاعها بدون تحديث update الصفحة مرة أخري . . .

كمثال :
في المنتديات الفي بي كلنا يعرف حركة الأجاكس الي ظهرت في الجيل 3.5 وما بعده وهو عند ضغط علي زر إعتماد الرد
يظهر لك جملة joomla + صورة للتحميل يقول لك جاري إعتماد المشاركة وفجأة تظهر المشاركة الجديدة http://www.dzbatna.com/images/smilies/cupidarrow.gif
هل تم عمل تحديث update للصفحة ؟؟؟

بالطبع لا http://www.dzbatna.com/images/smilies/cupidarrow.gif إذا ماذا حدث ؟؟ دعونا نتعرف علي ألية عمل الأجاكس الان كفكرة ومن ثم نتعرض لها كتطبيق . . . أتمني ان أحوذ علي كامل إنتباهكم الفكرة سهله ولكن تحتاج لتركيز http://www.dzbatna.com/images/smilies/cupidarrow.gif

-------------------------
بكل بساطة سيكون لدينا 5 عناصر أساسية في الأجاكس http://www.dzbatna.com/images/smilies/cupidarrow.gif

خلونا ناخدهم واحده واحده ونطبق كلامنا علي نظام تسجيل الدخول في هذا السكريبت script :
http://www.yazeedalrajhi.com

أول عنصر : مكان إدخال البيانات وفي مثالنا هنا ستكون هذه البيانات هي إسم المستخدم وكلمة المرور وسيكون الكود code الخاص بها كالتالي :
رمز PHP:

<input name="meuser" id="meuser" size="15" maxlength="32" class="brdr" type="text">
<input name="password" id="password" size="15" maxlength="20" class="brdr" type="password">


نلاحظ أننا خلال هذه الكود code قمنا بعمل التالي :
قمنا بعمل مكانين لإدخال البيانات عن طريق التاج input قمنا بإعطاء لكل مكان إسم و id والباقي لا يهم ويمكنك حذفه بالكامل .
ثاني عنصر : زر إعتماد البيانات و تشغيل دالة الجافا سكريبت script المسئولة عن إرسال البيانات وكما نسميها نحن بالإنجليزي Event Handler .
وستكون عبارة عن الكود code التالي :
رمز PHP:

<input class="btn" onclick="getPage();" value="دخول" name="B2" type="button">


قمنا في هذا الكود code بعمل رز وعملنا Event Handler وهو onclick="getPage();" بحيث إذا تم الضغط علي هذا الزر يقوم بتشغيل دالة getpage() وسنعرف فيما بعد مكان وجود هذه الدالة .
ثالث عنصر : المكان الذي سيوجد فيه هذا الكود code والذي سيتم إختفائه عقب عمل إعتماد وسيظهر مكانه نتيجة تسجيل الدخول وسكون هذا المكان عبارة عن وسم div سنضع كل ماذكر أعلاه داخل وسم div ونعطي هذا الوسم id لنستطيع التعامل معه من خلال الجافا سكريبت script وذلك عن طريق الكود code التالي :
رمز PHP:

<div id="Login">ضع هنا كود code المذكور في العنصر الأول والثانيdiv>


رابع عنصر : دالة إحضار القيمة من الحقول وإرسالها لصفحة العمليات وسنعرف ماهي صفحة العمليات فيما بعد .

وكود code الدالة سيكون كالتالي وسنضعه في اول السكريبت script في تاج الـHead :

رمز PHP:

function getPage(){

var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}

var meuser = document.getElementById("meuser").value;
var password = document.getElementById("password").value;

xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
document.getElementById('Login').innerHTML = '

';
if (xmlhttp.readyState==4) {
var content = xmlhttp.responseText;
if( content ){
document.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
return;
}

هنا ستبدأ كل الصعوبة ولكن ليست صعوبة بالشكل المتخيل فأعتقد ان الأمر حتي الان سهل صح ؟؟

هذا الكود code سنقوم بتجزئته لعدة أجزاء وشرح طريقةه http://www.dzbatna.com/images/smilies/cupidarrow.gif

أولا :
رمز PHP:

var xmlhttp=false;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xmlhttp = new
ActiveXObject('Microsoft.XMLHTTP');
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}


هذا الكود code ستقوم بوضعه في كل مره ستقوم فيها بإستخدام تقنية الأجاكس بدون تعديل اي حرف فيه وهو بإختصار يقوم بعمل أوبجكت من الكلاس الخاصة بإرسال وتلقي البيانات في الجافا سكريبت script <<< لو مافهمت شيء من هالكلام ماعليك طنشه ماله لازمه الحين http://www.dzbatna.com/images/smilies/cupidarrow.gif
الجزء الثاني :
رمز PHP:

var meuser = document.getElementById("meuser").value;
var password = document.getElementById("password").value;


من خلال هذا الكود code قمنا بجلب البيانات من الإنبوت عن طريق الـid الخاص به ووضعناه في متغيرات ليسهل التعامل معهم خلال الكود code الخاص بنا

الجزء الثالث :
رمز PHP:

xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);


من خلال هذا الكود code قمنا بإرسال قيم المتغيرات إلي صفحة إسمها login-check.php للتأكد منها ومن خلال هذه الصفحة سيتم الرد علينا بتسجيل الدخول الصحيح ام لا . . .

ولنتخيل مثلا أننا أدخلنا إسم مستخدم :
TH3 C0D3R
وكذلك كلمة المرور :
TH3 C0D3R

سيكون شكل الرابط كالتالي :
رمز PHP:

login.php?do=check&meuser=TH3C0D3r&password=TH3C0D3R


الجزء الرابع من كود code الدالة :
وهو الخاص من تأكد وجود رد من الملف الذي تم إرسال المعلومات له من عدمه

ففي حال عدم وجود رد سيتم إظهار صورة التحميل اما في حال وجود رد سيتم إظهار نتيجة هذا الرد

ملحوظة : ده شرح طريقة عام للكود code ولن تحتاج لتغيير هذا الكود code إلا في حال تغيير إسم الـ div (العنصر الثالث) فكل ماعليك فعله هو تغيير إسم الديف في الكود code التالي من Login إلي إسم الديف الجديد
وإذا كنت في حاجه لفهم كيفية عمل الكود code ده أستطيع شرح طريقةه بالتفصيل خلال احد ردودي القادمة .



رمز PHP:

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
document.getElementById('Login').innerHTML = '

';
if (xmlhttp.readyState==4) {
var content = xmlhttp.responseText;
if( content ){
document.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;

يتبقي الأن العنصر الخامس في الية عمل الأجاكس وهو صفحة login-check.php

الصفحة بكل بساطة ستستلم المتغيرات عن طريق المصفوفة $_GET وسيتم عمل التأمين اللازم للبيانات علشان ما يحصل SQL INJECTION او FILE INCLUDE عن طريق الدوال الموضحه هنا في القسم

ومن ثم نقوم بعمل إستعلام في قاعدة البيانات عن أسم المستخدم وكلمة المرور ونقارن بينهم وبين المعلومات التي تم إرسالها في هذه الصفحة ونستخدم الدالة echo لإخراج رسالة بنجاح تسجيل الدخول من عدمه مع فتح سيشن جديدة او عمل كوكيز جديد

الخطوة الخامسة هي خطوه سهله قمت بالتعليق عليها سريعا ولم اقم بشرح طريقةها لإن لها شروحات كثيره في القسم هنا

أتمني ان تكون وضحت الفكرة وان يكون هناك تطبيق عليها وان توريني كيف راح تسوون تسجيل خروج أجاكس برضه http://www.dzbatna.com/images/smilies/cupidarrow.gif

أي أسئلة او إستفسارات انا حاضر . . .

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©