Category Archives: AJAX

الدرس الرابع فى الاجاكس


استخدام قواعد البيانات مع الاجاكس

مثال:

يعتبر استخدام قواعد البيانات مع تقنية الاجاكس من المواضيع البالغة الاهمية حيث ان هذا المثال يعتبر الطريقة المستخدمة فى عمل بحث جوجل كالتالى:

اولا صفحة (index) الخاص بكود الاجاكس:

<html>

<head>

<script>

function showUser(str)

{

if (str==””)

{

document.getElementById(“txtHint”).innerHTML=””;

return;

}

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”page3.php?q=”+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

<select name=”users” onchange=”showUser(this.value)”>

<option value=””>Select ID:</option>

<option value=”1″>1</option>

<option value=”2″>2</option>

<option value=”3″>3</option>

<option value=”4″>4</option>

<option value=”5″>5</option>

</select>

</form>

<br>

<div id=”txtHint”><b>choose.</b></div>

</body>

</html>

ثانيا صفحة (page3) الخاصة بالسرفر وما يتعلق بقاعدة البيانات:

<?php

$q=$_GET[“q”];

$con = mysql_connect(‘localhost’, ‘root’, ”);

if (!$con)

{

die(‘Could not connect: ‘ . mysql_error());

}

mysql_select_db(“ecneraco_casio”, $con);

$sql=”SELECT * FROM products WHERE id = ‘$q'”;

$result = mysql_query($sql);

echo “<table border=’1′>

<tr>

<th>ID</th>

<th>MENU</th>

</tr>”;

while($row = mysql_fetch_array($result))

{

echo “<tr>”;

echo “<td>” . $row[0] . “</td>”;

echo “<td>” . $row[1] . “</td>”;

echo “</tr>”;

}

echo “</table>”;

mysql_close($con);

?>

ثالثا قاعدة البيانات:

تستطيع تحميلها من الرابط التالى:

http://www.mediafire.com/view/ndxhlh8yp8gptgs/ecneraco_casio.sql

الدرس الثالث فى الاجاكس


استخدام المصفوفات مع الاجاكس

مثال:

فى هذا المثال سنوف نقوم بعمل مصفوفة ونضع بدخلها مجموعة من الداتا بحيث يستطيع المستخدم البحث عن معلومات او بيانات من هذة المصفوفة وكل ما علي المستخدم هو ادخال الداتا وعن طريق تقنية الاجاكس تقوم الصفحة بترشيح مجموعة من الداتا قريبة من احرف النص الذى قام بادخالة المستخدم دون اعادة تحميل الصفحة كما نراة عند البحث على موقع جوجل كالتالى:

اولا صفحة (index) الخاص باكواد الاجاكس:

<!DOCTYPE html>

<html>

<head>

<script>

function showHint(str)

{

var xmlhttp;

if (str.length==0)

{

document.getElementById(“txtHint”).innerHTML=””;

return;

}

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”page2.php?q=”+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

ثانيا صفحة (page2) الخاصة بالسرفر

<?php

// Fill up array with names

$a[]=”Abdalla”;

$a[]=”Basem”;

$a[]=”Cazem”;

$a[]=”Dalia”;

$a[]=”Ecco”;

$a[]=”Fozya”;

$a[]=”Gunda”;

$a[]=”Hege”;

$a[]=”Inga”;

$a[]=”Johanna”;

$a[]=”Kitty”;

$a[]=”Linda”;

$a[]=”Nina”;

$a[]=”Omr”;

$a[]=”Petunia”;

$a[]=”Amanda”;

$a[]=”Rady”;

$a[]=”Cindy”;

$a[]=”Doris”;

$a[]=”Eve”;

$a[]=”Evita”;

$a[]=”Sunniva”;

$a[]=”Tove”;

$a[]=”Unni”;

$a[]=”Violet”;

$a[]=”Liza”;

$a[]=”Elizabeth”;

$a[]=”Ellen”;

$a[]=”Wenche”;

$a[]=”Vicky”;

//get the q parameter from URL

$q=$_GET[“q”];

//lookup all hints from array if length of q>0

if (strlen($q) > 0)

{

$hint=””;

for($i=0; $i<count($a); $i++)

{

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

{

if ($hint==””)

{

$hint=$a[$i];

}

else

{

$hint=$hint.” , “.$a[$i];

}

}

}

}

// Set output to “no suggestion” if no hint were found

// or to the correct values

if ($hint == “”)

{

$response=”no suggestion”;

}

else

{

$response=$hint;

}

//output the response

echo $response;

?>

جرب المثال بنفسك.

الدرس الثانى فى الاجاكس


بعد ان قمنا بشرح اكواد الاجاكس فى الدرس السابق سوف نتناول فى هذا الدرس مثال عملي كامل باستخدام الاجاكس:

مثال:

اولا صفحة (index) الخاصة بكود الاجاكس:

<html dir=”rtl”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>

<title>New Page 1</title>

<script>

function loadXMLDoc(str)

{

if(str.length==0)

{

document.getElementById(“myDiv”).innerHTML=””;

return;

}

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{

// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open(“GET”,”page1.php?n=”+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form action=”page1.php” method=”get”>

<input type=”text” name=”n” onKeyUp=”loadXMLDoc(this.value)”/ >

</form>

<div id=”myDiv” ></div>

</body>

</html>

ثانيا صفحة (page1) الخاصة بالسرفر:

<?php

if(isset($_GET[‘n’]))

{

echo “Hello”.’ ‘.$_GET[‘n’];

}

else echo “please enter your name”;

?>

مع العلم ان امتداد الصفحتين (.php) لاننا نتعامل مع كود السرفر بالبى اتش بى اما فى حالة التعامل مع (asp) فيتم كتابة اكواد (asp) فى الصفحة الثانية وجعل الصفحتين بامتداد (.asp) وهذا المثال هو عبارة عن حقل نصوص ياخذ من المستخدم اى نص وليكن اسمة ويكتب لة اسفل حقل النصوص كلمة هالو بالاضافة الى الاسم الذى ادخلة وذلك دون الانتقال الى صفحة جديدة اى فى نفس الصفحة والان جرب المثال بنفسك ولكن لاحظ انة بعد ان تكتب نص داخل حقل النصوص اضغط (enter) لينتقل الى صفحة السرفر.

ملاحظة:

فى المثال السابق استخدامنا دالة (GET) حيث يمكن استبدالها بدالة (POST) والفرق بين الدالتين ان دالة (GET) اسرع من دالة (POST) لكن دالة (POST) تستخدم فى حالة ارسال كميات كبيرة من الداتا للسرفر حيث ان دالة (GET) لا تستطيع ارسال كميات كبيرة من الداتا فسعتها محدودة اما (POST) فغير محدودة كما ان دالة (POST) ذو (security) اعلى من دالة (GET) لان الداتا التى يتم ارسالها عبر دالة (GET) تظهر مع الرابط باعلى الصفحة اما فى حالة الدالة (POST) فان الداتا لا تظهر مع الرابط حيث تنتقل عبر بروتوكول (http).

الدرس الاول فى الاجاكس


يعتمد تطبيق تقنية الاجاكس على جزئين او صفحتين الاول هو عبارة عن الجزء الخاص بالمستخدم وهو الذى يستلم طلبات المستخدم والجزء الاخر يتعامل مع السرفر اى يقوم باستلام الطلبات وارسالها للسرفر ثم العودة مرة اخرى بالنتائج سواء كانت بالقبول او الرفض وهذا الجزء لة مجموعة من الادوات او الاكواد الثابتة عند استخدام تقنية الاجاكس وسنتناولها بالشرح فى هذا الدرس:

(1)XMLHttpRequest Object or ActiveXObject Object:

وهو عبارة عن اوبجيكت يقوم بعملية استقبال طلبات المستخدم ولة نوعين الاول (XMLHttpRequest) وهذا النوع يتعامل مع الاصدارات الحديثة من المتصفحات والنوع الاخر (ActiveXObject) وهذا النوع يتعامل مع الاصدارات القديمة من المتصفحات ولا بد من استخدام النوعين لضمان تنفيذ طلبات المستخدمين مع كافة انواع المتصفحات.

مثال عملى على استخدامها:

var xmlhttp;
if (window.XMLHttpRequest)
{

// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{

// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}

(2)Send a Request To a Server:

وفى هذا الجزء نقوم بتفيذ عملية ارسال طلبات المستخدم الى السرفر وذلك عن طريق الكود التالى:

xmlhttp.open(method, url,true);
xmlhttp.send();

حيث ان الدالة (open) لها ثلاث بارمترات البارمتر الاول عبارة عن نوع الميثود وهما نوعين (GET,POST) والبارمتر الثانى يتم فية تحديد موقع الملف الموجود على السرفر والبارمتر الثالث يفضل تركة (true) .ثم بعد ذلك نستخدم دالة (send) لتنفيذ عملية الارسال الى السرفر.

مثال عملى على استخدامها:

xmlhttp.open(“GET”,”firstpage.php”,true);
xmlhttp.send();

او فى حالة التعامل مع (asp)

xmlhttp.open(“GET”,”firstpage.asp”,true);
xmlhttp.send();

(3)Server Response:

بعد ان قمنا باستقبال الداتا من المستخدم وارسالها الى السرفر يكون قد حان الوقت لتلقى الرد على الداتا التى تم ارسالها الى السرفر ويتم ذلك عن طريق خاصية (responseText).

(4)onreadystatechange event:

بعد ان تم ارسال طلب المستخدم الى السرفر يتم تنفيذ بعض الاجراءات على اساس الاستجابة عن طريق حدث يسمى

(onreadystatechange) ومع هذا الحدث يتم استخدام خاصيتين هما:

(1)readyState:

وهذة الخاصية تعبر عن حالة الطلب المرسل الى السرفر ولها خمس قيم تتدرج من (0) الى (4) كالتالى:

(0)يدل على ان الطلب الذى يتم ارسالة الى السرفر لا يعمل.

(1)يدل على ان هناك وصلة تم عملها لطلب المستخدم الى السرفر.

(2)تدل على ان السرفر استلم طلب المستخدم بالفعل.

(3)تدل على ان السرفر يقوم بمعالجة طلب المستخدم المرسل الية.

(4) يدل على ان السرفر قام بمعالجة طلب المستخدم وجاهز للاستجابة.

(2)Status:

ولها قيمتين كالتالى:

(200)تدل على انة توجد صفحة على السرفر.

(404)تدل على انة لا توجد صفحة على السرفر.

مثال عملى على استخدامها:

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“tag_html”).innerHTML=xmlhttp.responseText;
}
}

مقدمة عن الاجاكس


ظهر مصطلح الاجاكس لاول مرة عام 2005 على يد كاتب امريكى والاجاكس ليست لغة برمجية مستقلة ولكنها تقنية متقدمة تتكون من عدة تقنيات وهى عبارة عن كلمة تتكون من اربعة احرف (AJAX) وهى اختصار لى:

(Asynchronous JavaScript and XML)

اى اتحاد بين لغتى (XML – JavaScript) فتقنية الاجاكس تتكون من دمج بين اكواد الجافا سكريبت والاكس ام ال.

تعتبر تقنية الاجاكس من اكثر التقنيات التى لقت رواجا فى الفترة الاخيرة خاصة على مواقع التواصل الاجتماعى فزر الليك (like) وزر الشير (share) المعروفان على موقع الفيس بوك وموقع اليوتيوب وغيرهما من المواقع قد تم عملهما عن طريقة تقنية الاجاكس فالمستخدم يمكن ان يقوم بعمل لايك لصفحة ما مثلا على الفيس بوك دون تحميل الصفحة مرة اخرى وايضا يمكن ان يقوم بعمل شير لاى صورة او فيديو من صفحتة دون الانتقال الى الصفحة مصدر الصورة و الفيديو وبالتالى فان المستخدم يمكنة من عمل مئات الايك او الشير بسهولة جدا ودون تضييع وقت طويل ومن هنا يمكن ان نلخص تقنية الاجاكس على انها تقنية تمكن مستخدم الموقع من القيام بحدث معين من صفحتة دون الحاجة الى اعادة تحميل صفحات اخرى.

الادوات اللازمة لتعلم الاجاكس:

1- الالمام بلغة HTML.

2- الالمام بلغة JavaScript.

3- الالمام بلغة XML.

%d bloggers like this: