السلام عليكم ورحمة الله وبركاتة
سنبدأ بإذن الله بأول دروسنا في عالم تطبيقات الاجاكس
تكمن قوة الاجاكس في التفاعل ما بين web browser و الserver ,
فهم هذا النوع من التفاعل كان مقصورا على اولئك المطورين الذين يتعاملون مع لغات البرمجة
من خلال السيرفر مثل c ,perl .
اللغات الحديثة المتقدمة php, asp.net قامت بعمل مزيج مشترك ما بين المبرمج والسيرفر
لكنهم غالبا ما يفتقرون الى الفهم الكامل لجميع التكنلوجيات من جانب المبرمج مثل JavaScript.
والان وجب علينا فهم اكثر للتكنلوجيات الحديثة لأيجاد مزيد من الحلول في تطبيقات الاجاكس .
مبادئ قراءة HTTP :
الوسيط الجيد في فهم تقنيات الاجاكس هو البروتوكول المستخدم في نقل النص التشعبي HTTP
وهو المسوؤل عن نقل الصور وصفحات الويب والكثير من هذه الامور ما بين متصفح الانترنت
والشبكة العكنبوتية .
عندما تقوم بكتابة الاحرف التالية في متصفحك "http://" فهذا يعني بأنك تعلم المتصفح
بأنك تقوم بأستخدام بروتوكول HTTP لتقوم بجلب الصفحات التي تريدها من الشبكة.
بروتوكول الـ HTTP هو عباره عن قسمين :
1-Request
2-Response
الطلب والرد فعندما تقوم بكتابة رابط الموقع التي تريد الدخول اليه في المتصفح يقوم المتصفح
بأرساال طلب نيابة عنك , ويتضمن هذا الطلب رابط الموقع الذي كنت قد كتبته وبعض المعلومات
عن المتصفح , يستقبل السيرفر هذا الطلب ويقوم بأرسال رد وبها المعلومات حسب الرابط
الذي قمت بكتابتة, ثم يقوم المتصفح بأظهار النتائج القادمة من السيرفر .
الان اصبح لدينا بعض المعلومات عن كيفية اضهار النتائج في المتصفح بشكل اوسع لننطلق الان في
بداية درسنا ولنبدا بـ :
تقنية الاطار المخفي Hidden Frame Technique
ولدت هذه التقنية وقت ادخال لغة الـHTML الى عالم الانترنت , الفكرة الرئسية وراء هذه التقنية
هو انشاء اطار مجموعة يجمع اطر مخفية لتستخدم من جهة العميل.
وبأمكانك اخفاءه كليا في حال ساوية القيم للطول او العرض بـالصفر فهنا سيختفي الاطار
من منطقة العرض ولكن في بعض المتصفحات مثل الNetscape 4 لا يختفي كليا ولكن
يبقى البعض من ثخانة الطار بشكل ظاهر.
الانماط (Pattern) :
دائما نبدا مع الاطر الظاهره حينما يكون المستخدم متفاعل مع صفحة الويب.
فمن الطبيعي ان يكون المستخدم على عدم دراية بوجود اطر مخفية (اذا لم تكن ظاهره امامه في المتصفحات الحديثه)
في هذه النقطه يتوقع المستخدم ان يقوم السيرفر بأرسال البيانات التي قام بطلبها وعندما يحصل ذلك
الخطوه الاولى في هذه العملية تبدأ دوال الجافا سكريبت بالعمل فمثلا تقوم بأرسال البيانات الى صفحة اخرى
في المتصفح ليقوم بتنفيذها وهذه تكون الخطوه الثانية.
في الخطوه الثالثة يقوم السيرفر بأرسال البيانات الى الصفحة الثانية والسبب في ذلك
انك قمت بعمل اتفاق مع الفريم ان يكون بأرسال البيانات الى صفحة اخرى
وفي الخطوه الرابعة يكون اظهار النتائج في الاطر الظاهره في الصفحة الاخرى.
استعمال الاطر المخفية مع طلبات GET :
والان بعد ان فهمنا ما هية الاطر المخفية سنأتي للقسم الاجمل وهو تعلم كيفية عملها.
كما هي الحال في اي تقنية جديدة افضل طريقة لتعلمها هو العمل على الامثلة التطبيقية
واخترت لكم مثالا بسيطا وهو صفحة بسيطة تقوم من خلالها بأدخال بعض المعلومات عن
مستخدم لمنتج وستقوم الصفحة بجلب النتائج لك بعد ادخال رقم الـID الخاص بهذا المستخدم:
اولا عليك ان تقوم بزرع هذا الامر في قاعدة بيانات لتقوم بأنشاء جدول يحمل بعض الصفوف
(لاحظ بأنه في هذه الامثلة عليك ان تكون على دراية ببعض اللغات مثل MySQL , PHP ,JavaScript)
كود PHP:
#
# Table structure for table `Customers`
#
CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL auto_increment,
`Name` varchar(255) NOT NULL default '',
`Address` varchar(255) NOT NULL default '',
`City` varchar(255) NOT NULL default '',
`State` varchar(255) NOT NULL default '',
`Zip` varchar(255) NOT NULL default '',
`Phone` varchar(255) NOT NULL default '',
`E-mail` varchar(255) NOT NULL default '',
PRIMARY KEY (`CustomerId`)
) TYPE=MyISAM COMMENT='Sample Customer Data' ;
#
# Dumping data for table `Customers`
#
INSERT INTO `Customers` VALUES (1, 'Michael Smith', '123 Somewhere Road', 'Beverly Hills', 'California', '90210', '(555) 555-1234', 'michael@somewhere.com');
INSERT INTO `Customers` VALUES (2, 'Matthew Johnson', '1234 Somewhere Else Street', 'Elsewhere', 'Confusion', '00000', '(555) 555-2345', 'johnboy@neato.net');
INSERT INTO `Customers` VALUES (3, 'Cindy Benjamin', '1313 Mockingbird Lane', 'Somewhere', 'Montana', '00000', '(555) 555-9876', 'cindybean@mcok.net');
INSERT INTO `Customers` VALUES (4, 'Mary Klein', '10 Highland Avenue', 'Salem', 'Massachusetts', '01970', '(555) 555-4920', 'mary@klein.net');
اهم حقل في هذا الجدول هو CustomerId فهو ما سنستخدمه للبحث عن معلومات المستخدم.
للنتقل الان الى كود الـ HTML لاستخدام تقنية الاطر المخفية , فعليك اولا البدء مع اطارات الـHTML
اولا قم بفتح صفحة جديدة بأمتداد HTM وقم بادخال الكود التالي بها وحفظها :
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html >
<head >
<title>الاطر المخفية المثال الاول</title>
</head>
<frameset rows="100%,0" frameborder="0" >
<frame name="displayFrame" src="display.htm" noresize="noresize" target="_self" >
<frame name="hiddenFrame" src="about:blank" noresize="noresize" >
</frameset>
</html>
قم بحفظها بأي اسم تشاء .
اهم اتريبيوت في هذا الكود هو rows فمن خلاله سيتعرف المتصفح بأنه لن يقوم بأظهار
جسم الفريم الاخر لوضعنا القيم 100% و صفر ومن ثم قمنا بجعل قيمة frameborder حدود الفريم
مساوية للصفر للتأكد بعدم ظهر حدود الفريم . واخيرا واهم شيء قمنا بتعيين الخاصية noresize
حتى لا يقوم المستخدم برؤية ما يوجد بالفريم المخفي .
ومن ثم الان سنقوم بتصميم صفحة جديدة وليكن اسمها display.htm وسنضع بها
Text area لأدخال رقم العميل انظر الان للكود :
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html dir="rtl">
<head>
<title>معلومات حسابات العملاء</title>
<script type="text/javascript">
function requestCustomerInfo() {
var sId = document.getElementById("txtCustomerId").value;
top.frames["hiddenFrame"].location = "GetCustomerData.php?id=" + sId;
}
function displayCustomerInfo(sText) {
var divCustomerInfo = document.getElementById("divCustomerInfo");
divCustomerInfo.innerHTML = sText;
}
</script>
</head>
<body>
<p>قم بإدخال رقم العميل لإظهار معلوماته:</p>
<p>رقم العميل <input type="text" id="txtCustomerId" value="" ></p>
<p><input type="button" value="جلب معلومات العميل" onclick="requestCustomerInfo()" ></p>
<div id="divCustomerInfo"></div>
</body>
</html>
لنحلل الكود سويا حتى تفهموه بأكمل وجه ...
في بداية الامر في الوسم هيد قمنا بأنشاء داله اسميناها
كود:
requestCustomerInfo()
تقوم بأخذ الرقم الذي قمت بادخالة داخل الخاصية id في الفريم الذي اعطيناه الاسم txtCustomerId
وتقوم بتخزينه بداخل متغير بحيث يقوم هذا المتغير باكمال الرابط
GetCustomerData.php?id=
بحيث يقوم بتعيين الرقم الذي وضع في المتغير بداخل هذا السطر حتى يقوم بجلب النتائج من خلاله
ومن ثم قمنا بأنشاء دالة اخرى اسميناها .
كود:
displayCustomerInfo(sText)
عمل هذه الدالة هو جلب معلومات العميل ,,
الان لنفتح ملف جديد ونقوم بتسميته GetCustomerData.php
ونضع به هذا الكود
كود PHP:
<html>
<head>
<title> جلب معلومات العميل </title>
<?php
//php code
?>
</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>
</body>
</html>
ستلاحظ بأنه لا يوجد به ما يميزه عن اي شيء ولكن لنفهم كيفية عملة لأننا سنضيف اليه
المزيد من الاكواد ..
في الوسم الاول الخاص بالبي اتش بي سنقوم بوضع الكود الخاص بأحضار القيم
وفي الوسم الثاني سيقوم بطباعة ما يحتوية المتغير $sInfo , وفي وسم </div>
الذي ستقوم من خلاله بقراءه البيانات وارسالها الى الصفحة الفريم
لتقوم بهذا سيلزمك ان تقوم بانشاء دالة جديدة من JavaScript تستدعى حينما تبدا الصفحة بالتحميل
هذا كود الدالة وسيكون في الوسم head اسفل كود الـ PHP
كود PHP:
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
</script>
هذه الدالة تعين بشكل مباشر الى window.onload . في البداية تقوم بأسترجاع المؤشر الى </div>
هذا الذي يحتوي على معلومات العميل.
وبعدها, تقوم بالوصول الى فريم العرض بأستخدام مصفوفة top.frames وتستدعي الدالة
displayCustomerInfo() التي حددت في وقت سابق, بالمرور الى innerHtml لـ </div>
ولكن من اين ستأتي هذه المعلومات , الاكيد انها ستأتي من كود الـ PHP
حسنا في البداية يلزمنا تعريف المتغير $sID على انه مصفوفة get ونجلب منها الid
ومن ثم نعرف متغير اخر اسمه $sInfo وسيكون في البداية فارغ
ونضع معلومات الاتصال بقاعدة البيانات
كود PHP:
//customer ID
$sID = $_GET["id"];
//variable to hold customer info
$sInfo = "";
//database information
$sDBServer = "localhost";
$sDBName = "ajax";
$sDBUsername = "root";
$sDBPassword = "root";
قم بتغير المعلومات كما تراه مناسبا للسيرفر الذي تستخدمه .
وبعد الاتصال بقاعدة البيانات سنقوم بكتابة الكود المختص بجلب النتائج من قاعدة البيانات
وتخزينها في المتغير sInfo بالشكل المطلوب ليصبح الكود كاملا على هذا الشكل
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>جلب معلومات العميل</title>
<?php
//customer ID
$sID = $_GET["id"];
//variable to hold customer info
$sInfo = "";
//database information
$sDBServer = "localhost";
$sDBName = "ajax";
$sDBUsername = "root";
$sDBPassword = "root";
//create the SQL query string
$sQuery = "Select * from Customers where CustomerId=".$sID;
//make the database connection
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sInfo = "Unable to open database";
if($sInfo == '') {
if($oResult = mysql_query($sQuery) and mysql_num_rows($oResult) > 0) {
$aValues = mysql_fetch_array($oResult,MYSQL_ASSOC);
$sInfo = $aValues['Name']."<br />".$aValues['Address']."<br />".
$aValues['City']."<br />".$aValues['State']."<br />".
$aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />".
"<a href=\"mailto:".$aValues['E-mail']."\">".$aValues['E-mail']."</a>";
} else {
$sInfo = "Customer with ID $sID doesn't exist.";
}
}
mysql_close($oLink);
?>
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
};
</script>
</head>
<body>
<div id="divInfoToReturn"><?php echo $sInfo ?></div>
</body>
</html>
والان قمنا بالانتهاء من عرض النتائج قم بفتح الملفات في متصفحك الخاص
وانظر الى نتيجة عملك
اتمنى لكم التوفيق وبهذا نكون قد انهينا درسنا الاول
نلتقي في درسنا القادم بأذن الله
يرجى عند نقل الدرس ذكر المصدر .
رد مع اقتباس
وماعندي وقت
