walid_8281500
03-20-2009, 12:34 AM
بسم الله الرحمن الرحيم
طلب احد الزملاء مني في موضوعي عن شروحات الجافا سكريبت والبي إتش بي و .. . . ..
شرح كيفية عمل تسجيل دخول بالأجاكس ولكني خفت ان يكون هو او من سيأتي من بعده ليس لديه خلفية عن فكرة عمل الأجاكس وبالتالي يكون الكود نسخ ولصق واكون قتلت الإبداع لديه
ففضلت ان اقوم بعمل موضوع عن كيفية سير طلبات الأجاكس وكيفية إستلامها ومعالجتها وإرسال الرد بدون عمل اي تحديث للصفحة . . .
--------------------------------------
ماهو الأجاكس ؟؟
الأجاكس ليست لغة برمجة قائمة بذاتها وإنما هي إستغلال متقدم لإضافات جديدة في لغة الجافا سكريبت
ولا يحتاج إلي اي برمجيات لتركيبها علي سيرفر الموقع حيث انه من المعروف ان الجافا سكريبت تعمل علي جهاز المستخدم وليس السيرفر . . .
الأجاكس هو بكل بساطة إعتماد بيانات معينة ومعالجتها وعمل بعض العمليات عليها ثم إرجاعها بدون تحديث الصفحة مرة أخري . . .
كمثال :
في المنتديات الفي بي كلنا يعرف حركة الأجاكس الي ظهرت في الجيل 3.5 وما بعده وهو عند ضغط علي زر إعتماد الرد
يظهر لك جملة + صورة للتحميل يقول لك جاري إعتماد المشاركة وفجأة تظهر المشاركة الجديدة http://traidnt.net/vb/images/smilies/cupidarrow.gif
هل تم عمل تحديث للصفحة ؟؟؟
بالطبع لا http://traidnt.net/vb/images/smilies/cupidarrow.gif إذا ماذا حدث ؟؟ دعونا نتعرف علي ألية عمل الأجاكس الان كفكرة ومن ثم نتعرض لها كتطبيق . . . أتمني ان أحوذ علي كامل إنتباهكم الفكرة سهله ولكن تحتاج لتركيز http://traidnt.net/vb/images/smilies/cupidarrow.gif
-------------------------
بكل بساطة سيكون لدينا 5 عناصر أساسية في الأجاكس http://traidnt.net/vb/images/smilies/cupidarrow.gif
خلونا ناخدهم واحده واحده ونطبق كلامنا علي نظام تسجيل الدخول في هذا السكريبت :
http://www.yazeedalrajhi.com (http://www.yazeedalrajhi.com/)
أول عنصر : مكان إدخال البيانات وفي مثالنا هنا ستكون هذه البيانات هي إسم المستخدم وكلمة المرور وسيكون الكود الخاص بها كالتالي :
<input name="meuser" id="meuser" size="15" maxlength="32" class="brdr" type="****">
<input name="password" id="password" size="15" maxlength="20" class="brdr" type="password">
نلاحظ أننا خلال هذه الكود قمنا بعمل التالي :
قمنا بعمل مكانين لإدخال البيانات عن طريق التاج input قمنا بإعطاء لكل مكان إسم و id والباقي لا يهم ويمكنك حذفه بالكامل .
ثاني عنصر : زر إعتماد البيانات و تشغيل دالة الجافا سكريبت المسئولة عن إرسال البيانات وكما نسميها نحن بالإنجليزي Event Handler .
وستكون عبارة عن الكود التالي :
<input class="btn" onclick="getPage();" value="دخول" name="B2" type="button">
قمنا في هذا الكود بعمل رز وعملنا Event Handler وهو onclick="getPage();" بحيث إذا تم الضغط علي هذا الزر يقوم بتشغيل دالة getpage() وسنعرف فيما بعد مكان وجود هذه الدالة .
ثالث عنصر : المكان الذي سيوجد فيه هذا الكود والذي سيتم إختفائه عقب عمل إعتماد وسيظهر مكانه نتيجة تسجيل الدخول وسكون هذا المكان عبارة عن وسم div سنضع كل ماذكر أعلاه داخل وسم div ونعطي هذا الوسم id لنستطيع التعامل معه من خلال الجافا سكريبت وذلك عن طريق الكود التالي :
<div id="Login">ضع هنا كود المذكور في العنصر الأول والثاني</div>
رابع عنصر : دالة إحضار القيمة من الحقول وإرسالها لصفحة العمليات وسنعرف ماهي صفحة العمليات فيما بعد .
وكود الدالة سيكون كالتالي وسنضعه في اول السكريبت في تاج الـHead :
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 = ********.getElementById("meuser").value;
var password = ********.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)
********.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.response****;
if( content ){
********.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
return;
هنا ستبدأ كل الصعوبة ولكن ليست صعوبة بالشكل المتخيل فأعتقد ان الأمر حتي الان سهل صح ؟؟
هذا الكود سنقوم بتجزئته لعدة أجزاء وشرحه http://traidnt.net/vb/images/smilies/cupidarrow.gif
أولا :
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();
}
هذا الكود ستقوم بوضعه في كل مره ستقوم فيها بإستخدام تقنية الأجاكس بدون تعديل اي حرف فيه وهو بإختصار يقوم بعمل أوبجكت من الكلاس الخاصة بإرسال وتلقي البيانات في الجافا سكريبت <<< لو مافهمت شيء من هالكلام ماعليك طنشه ماله لازمه الحين http://traidnt.net/vb/images/smilies/cupidarrow.gif
الجزء الثاني :
var meuser = ********.getElementById("meuser").value;
var password = ********.getElementById("password").value;
من خلال هذا الكود قمنا بجلب البيانات من الإنبوت عن طريق الـid الخاص به ووضعناه في متغيرات ليسهل التعامل معهم خلال الكود الخاص بنا
الجزء الثالث :
xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);
من خلال هذا الكود قمنا بإرسال قيم المتغيرات إلي صفحة إسمها login-check.php للتأكد منها ومن خلال هذه الصفحة سيتم الرد علينا بتسجيل الدخول الصحيح ام لا . . .
ولنتخيل مثلا أننا أدخلنا إسم مستخدم :
TH3 C0D3R
وكذلك كلمة المرور :
TH3 C0D3R
سيكون شكل الرابط كالتالي
login.php?do=check&meuser=TH3C0D3r&password=TH3C0D3R
الجزء الرابع من كود الدالة :
وهو الخاص من تأكد وجود رد من الملف الذي تم إرسال المعلومات له من عدمه
ففي حال عدم وجود رد سيتم إظهار صورة التحميل اما في حال وجود رد سيتم إظهار نتيجة هذا الرد
ملحوظة : ده شرح عام للكود ولن تحتاج لتغيير هذا الكود إلا في حال تغيير إسم الـ div (العنصر الثالث) فكل ماعليك فعله هو تغيير إسم الديف في الكود التالي من Login إلي إسم الديف الجديد
وإذا كنت في حاجه لفهم كيفية عمل الكود ده أستطيع شرحه بالتفصيل خلال احد ردودي القادمة
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
********.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="templates/deafult/images/loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.response****;
if( content ){
********.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
يتبقي الأن العنصر الخامس في الية عمل الأجاكس وهو صفحة login-check.php
الصفحة بكل بساطة ستستلم المتغيرات عن طريق المصفوفة $_GET وسيتم عمل التأمين اللازم للبيانات علشان ما يحصل SQL INJECTION او FILE INCLUDE عن طريق الدوال الموضحه هنا في القسم
ومن ثم نقوم بعمل إستعلام في قاعدة البيانات عن أسم المستخدم وكلمة المرور ونقارن بينهم وبين المعلومات التي تم إرسالها في هذه الصفحة ونستخدم الدالة echo لإخراج رسالة بنجاح تسجيل الدخول من عدمه مع فتح سيشن جديدة او عمل كوكيز جديد
الخطوة الخامسة هي خطوه سهله قمت بالتعليق عليها سريعا ولم اقم بشرحها لإن لها شروحات كثيره في القسم هنا
أتمني ان تكون وضحت الفكرة وان يكون هناك تطبيق عليها وان توريني كيف راح تسوون تسجيل خروج أجاكس برضه http://traidnt.net/vb/images/smilies/cupidarrow.gif
أي أسئلة او إستفسارات انا حاضر . . .
طلب احد الزملاء مني في موضوعي عن شروحات الجافا سكريبت والبي إتش بي و .. . . ..
شرح كيفية عمل تسجيل دخول بالأجاكس ولكني خفت ان يكون هو او من سيأتي من بعده ليس لديه خلفية عن فكرة عمل الأجاكس وبالتالي يكون الكود نسخ ولصق واكون قتلت الإبداع لديه
ففضلت ان اقوم بعمل موضوع عن كيفية سير طلبات الأجاكس وكيفية إستلامها ومعالجتها وإرسال الرد بدون عمل اي تحديث للصفحة . . .
--------------------------------------
ماهو الأجاكس ؟؟
الأجاكس ليست لغة برمجة قائمة بذاتها وإنما هي إستغلال متقدم لإضافات جديدة في لغة الجافا سكريبت
ولا يحتاج إلي اي برمجيات لتركيبها علي سيرفر الموقع حيث انه من المعروف ان الجافا سكريبت تعمل علي جهاز المستخدم وليس السيرفر . . .
الأجاكس هو بكل بساطة إعتماد بيانات معينة ومعالجتها وعمل بعض العمليات عليها ثم إرجاعها بدون تحديث الصفحة مرة أخري . . .
كمثال :
في المنتديات الفي بي كلنا يعرف حركة الأجاكس الي ظهرت في الجيل 3.5 وما بعده وهو عند ضغط علي زر إعتماد الرد
يظهر لك جملة + صورة للتحميل يقول لك جاري إعتماد المشاركة وفجأة تظهر المشاركة الجديدة http://traidnt.net/vb/images/smilies/cupidarrow.gif
هل تم عمل تحديث للصفحة ؟؟؟
بالطبع لا http://traidnt.net/vb/images/smilies/cupidarrow.gif إذا ماذا حدث ؟؟ دعونا نتعرف علي ألية عمل الأجاكس الان كفكرة ومن ثم نتعرض لها كتطبيق . . . أتمني ان أحوذ علي كامل إنتباهكم الفكرة سهله ولكن تحتاج لتركيز http://traidnt.net/vb/images/smilies/cupidarrow.gif
-------------------------
بكل بساطة سيكون لدينا 5 عناصر أساسية في الأجاكس http://traidnt.net/vb/images/smilies/cupidarrow.gif
خلونا ناخدهم واحده واحده ونطبق كلامنا علي نظام تسجيل الدخول في هذا السكريبت :
http://www.yazeedalrajhi.com (http://www.yazeedalrajhi.com/)
أول عنصر : مكان إدخال البيانات وفي مثالنا هنا ستكون هذه البيانات هي إسم المستخدم وكلمة المرور وسيكون الكود الخاص بها كالتالي :
<input name="meuser" id="meuser" size="15" maxlength="32" class="brdr" type="****">
<input name="password" id="password" size="15" maxlength="20" class="brdr" type="password">
نلاحظ أننا خلال هذه الكود قمنا بعمل التالي :
قمنا بعمل مكانين لإدخال البيانات عن طريق التاج input قمنا بإعطاء لكل مكان إسم و id والباقي لا يهم ويمكنك حذفه بالكامل .
ثاني عنصر : زر إعتماد البيانات و تشغيل دالة الجافا سكريبت المسئولة عن إرسال البيانات وكما نسميها نحن بالإنجليزي Event Handler .
وستكون عبارة عن الكود التالي :
<input class="btn" onclick="getPage();" value="دخول" name="B2" type="button">
قمنا في هذا الكود بعمل رز وعملنا Event Handler وهو onclick="getPage();" بحيث إذا تم الضغط علي هذا الزر يقوم بتشغيل دالة getpage() وسنعرف فيما بعد مكان وجود هذه الدالة .
ثالث عنصر : المكان الذي سيوجد فيه هذا الكود والذي سيتم إختفائه عقب عمل إعتماد وسيظهر مكانه نتيجة تسجيل الدخول وسكون هذا المكان عبارة عن وسم div سنضع كل ماذكر أعلاه داخل وسم div ونعطي هذا الوسم id لنستطيع التعامل معه من خلال الجافا سكريبت وذلك عن طريق الكود التالي :
<div id="Login">ضع هنا كود المذكور في العنصر الأول والثاني</div>
رابع عنصر : دالة إحضار القيمة من الحقول وإرسالها لصفحة العمليات وسنعرف ماهي صفحة العمليات فيما بعد .
وكود الدالة سيكون كالتالي وسنضعه في اول السكريبت في تاج الـHead :
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 = ********.getElementById("meuser").value;
var password = ********.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)
********.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.response****;
if( content ){
********.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
return;
هنا ستبدأ كل الصعوبة ولكن ليست صعوبة بالشكل المتخيل فأعتقد ان الأمر حتي الان سهل صح ؟؟
هذا الكود سنقوم بتجزئته لعدة أجزاء وشرحه http://traidnt.net/vb/images/smilies/cupidarrow.gif
أولا :
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();
}
هذا الكود ستقوم بوضعه في كل مره ستقوم فيها بإستخدام تقنية الأجاكس بدون تعديل اي حرف فيه وهو بإختصار يقوم بعمل أوبجكت من الكلاس الخاصة بإرسال وتلقي البيانات في الجافا سكريبت <<< لو مافهمت شيء من هالكلام ماعليك طنشه ماله لازمه الحين http://traidnt.net/vb/images/smilies/cupidarrow.gif
الجزء الثاني :
var meuser = ********.getElementById("meuser").value;
var password = ********.getElementById("password").value;
من خلال هذا الكود قمنا بجلب البيانات من الإنبوت عن طريق الـid الخاص به ووضعناه في متغيرات ليسهل التعامل معهم خلال الكود الخاص بنا
الجزء الثالث :
xmlhttp.open('GET','login-check.php?do=check&meuser=' + meuser + '&password=' + password + '&remember_me=' + remember_me , true);
من خلال هذا الكود قمنا بإرسال قيم المتغيرات إلي صفحة إسمها login-check.php للتأكد منها ومن خلال هذه الصفحة سيتم الرد علينا بتسجيل الدخول الصحيح ام لا . . .
ولنتخيل مثلا أننا أدخلنا إسم مستخدم :
TH3 C0D3R
وكذلك كلمة المرور :
TH3 C0D3R
سيكون شكل الرابط كالتالي
login.php?do=check&meuser=TH3C0D3r&password=TH3C0D3R
الجزء الرابع من كود الدالة :
وهو الخاص من تأكد وجود رد من الملف الذي تم إرسال المعلومات له من عدمه
ففي حال عدم وجود رد سيتم إظهار صورة التحميل اما في حال وجود رد سيتم إظهار نتيجة هذا الرد
ملحوظة : ده شرح عام للكود ولن تحتاج لتغيير هذا الكود إلا في حال تغيير إسم الـ div (العنصر الثالث) فكل ماعليك فعله هو تغيير إسم الديف في الكود التالي من Login إلي إسم الديف الجديد
وإذا كنت في حاجه لفهم كيفية عمل الكود ده أستطيع شرحه بالتفصيل خلال احد ردودي القادمة
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
********.getElementById('Login').innerHTML = '<p align="center"><img border="0" src="templates/deafult/images/loading.gif"></p>';
if (xmlhttp.readyState==4) {
var content = xmlhttp.response****;
if( content ){
********.getElementById('Login').innerHTML = content;
}
}
}
xmlhttp.send(null) ;
يتبقي الأن العنصر الخامس في الية عمل الأجاكس وهو صفحة login-check.php
الصفحة بكل بساطة ستستلم المتغيرات عن طريق المصفوفة $_GET وسيتم عمل التأمين اللازم للبيانات علشان ما يحصل SQL INJECTION او FILE INCLUDE عن طريق الدوال الموضحه هنا في القسم
ومن ثم نقوم بعمل إستعلام في قاعدة البيانات عن أسم المستخدم وكلمة المرور ونقارن بينهم وبين المعلومات التي تم إرسالها في هذه الصفحة ونستخدم الدالة echo لإخراج رسالة بنجاح تسجيل الدخول من عدمه مع فتح سيشن جديدة او عمل كوكيز جديد
الخطوة الخامسة هي خطوه سهله قمت بالتعليق عليها سريعا ولم اقم بشرحها لإن لها شروحات كثيره في القسم هنا
أتمني ان تكون وضحت الفكرة وان يكون هناك تطبيق عليها وان توريني كيف راح تسوون تسجيل خروج أجاكس برضه http://traidnt.net/vb/images/smilies/cupidarrow.gif
أي أسئلة او إستفسارات انا حاضر . . .