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

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

مثال:

اولا صفحة (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).

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: