سلام دوستان،
همون طوري که قبلا گفته بودم امروز مي خوام در مورد Ajax و متد هاي اون يه خورده بحث کنم...
اول اين که ببينيم اصلا کلمه Ajax از کجا اومده ...
Ajax مخفف عبارت Asynchronous JavaScript and XML است به معني ادغام نامتقارن JavaScript و XML ...
XML چيه؟ eXtensible Markup Language در واقع زبان داده هاست ... براي انتقال داده از Application هاي مختلف با سيستم عامل ها و سخت افزار هاي مختلف هست يعني مثلا با يه برنامه کاربردي تحت ويندوز که با دلفي نوشته شده بتونيم به اطلاعات ديتابيس MySql که روي Linux کار ميکنه دست يابي پيدا کنيم... خوب ديگه خيلي از بحث منحرف نشيم
JavaScript هم که ديگه بايد براتون آشنا باشه يه زبون برنامه نويسي سمت Client که Syntax ي شبيه به ++C داره...
Ajax مثل لامپ يک تکنولوژي جديد نيست (يک ايده توپ است) اما اين تمايل وجود داره که اون رو جزء دسته اي از تنولوژي ها قرار بديم.
Ajax به ما اين امکان رو ميده که برنامه هاي تحت وبي بسازيم که کاربر فک کنه همه چيز روي کامپيوتر خودش داره رخ ميده مثل برنامه هاي کاربردي تحت ويندوز ...
Jesse James Garrett کسي بود که براي اولين بار ايده Ajax به ذهنش رسيد درحدود 1999 اما چرا تا به حال در مورد اون چيزي نگفته ؟؟!!!
Garrett مورد نکوهش هايي قرار گرفت ... ما کاري به اين چيزا نداريم...
مقايسه برنامه نويسي کلاسيک و Ajax:در برنامه نويسي کلاسيک اعمال ارسال و دريافت را مرورگر انجام ميدهد ... يعني کاربر با کليک کردن روي لينک ها يا نوشتن آدرس در آدرس بار و ارسال فرم ها در واقع به مرورگر درخواست ميدهد و سرور بايد به ازاي هر درخواست کاربر صفحه اي را بسازد و براي او ارسال نمايد... اما در Ajax ارسال و دريافت ها به دست خود برنامه نويس هست و ما به عنوان برنامه نويس وب مي تونيم بر اساس حرکات و رفتار کاربر يا هر جور که مايل باشيم ارسال و دريافت را انجام دهيم مثل يک برنامه کاربردي تحت ويندوز ...
در شيوه کلاسيک وقتي که Client در حال کار کردن است سرور بيکار است و بلعکس وقتي که اطلاعات در سرور در حال پردازش است Client بايستي منتظر بماند...
اما در Ajax ما ميتوانيم چندين درخواست همزمان بفرستيم و يا کارهاي ديگري لنجام دهيم به صورتي که نه سرور بيکار باشد و نه کلاينت در واقع مفهوم نامتقارن بودن اينجا ديده مي شود.
چرا Ajax مفيده؟ گوگل در اين زمينه راهنمايي هاي مفيدي ارائه داده و يه جورايي Ajax رو براي خودش با ظهور Gmail سلطنتي کرده.
1- استفاده web Application ها رو زياد تر ميکنه.
2- در Bandwidth به صورت چشمگيري صرفه جويي ميکنه.
3- فقط داده هاي مورد نياز ارسال و دريافت ميشوند.
4- در اکثر مواقع interfaces سريعتري داره.
معايب Ajax 1- دکمه Back - Forward -Stop , ... رو نداريم (البته در روش پيشرفته Ajax که در ادامه بحث ميکنيم.)
2- در موقع درخواست و دريافت در Status bar هيچ پيغامي نمايش داده نميشود.
3- چون ارسال و دريافت دست خود ما است ممکنه برخلاف تدابير امنيتي مرورگر رفتار شود.
4- اجراي کدهاي JavaSCript بر روي CPU هاي قديمي ممکنه هزينه بر باشه.
5- به Domain هاي ديگر دسترسي نيست.
6- ممکنه JavaScript روي مرورگر کاربر غير فعال باشه.
7- Debug کردن اون واقعا کار طاقت فرسايي است.(اينو از ته دلم ميگم)
متد هاي Ajax Ajax کلا دو روش داره يکي روش Hidden frames و ديگري XML HTTP Request که در ادامه اينا رو بررسي ميکنيم.
Hidden frame featuresInline Frame ها در واقع يک Mini Browser است که توي خيلي از سايت ها اونو ديديد Inline Frame ميتونه آدرس خودش رو داشته باشه ... ميتونه مخفي بشه مثلا عرض و ارتفاع اون رو صفر ميکنيم يا با استفاده از Css و ... بوسيله JavaScript ميتونيم به متن داخل اون دسترسي داشته باشيم يا از داخل Frame به پدرش يعني پنجره اصليمون دسترسي داشته باشيم. در اين روش براي ارسال و دريافت کاربر بر روي Status bar پيغام ها رو ميبينه ... همچنين دکمه هاي Back - Forward -Stop , ... را هم داريم در مرورگر IE هنگام ارسال صداي click رو هم ميشنويم.
اما نسبت به روش دوم کند تره و نميشه بيشتر از يه درخواست رو به صورت همزمان داد(مگر اين که تعداد Frame ها رو بيشتر کنيم).
خوب يه مثال از اين روش فرض کنيد يه frame داريم به نام مثلا MyFrame و يه فرم ساده داريم ... همچنين يه div داريم به نام DivTarget که مي خواهيم نتيجه اي که از server مي آد اينجا نمايش داده بشه ...
کد:
<form action=“MyPage.php” target=“MyFrame” method=“POST”>
<input type=“text” name=“TextBox1”>
<div id=“DivTarget”></div>
<input type=“submit”>
</form>
<iframe name=“MyFrame” style=“display:none;”>
</iframe>
دقت کنيد که target فرم رو MyFrame قرار دادم.
خوب همون طور که ميبينيد در Action فرم نام فايل MyPage.php رو نوشتيم ببينيم توي اين فايل چيه؟
کد:
<!-- MyPage.php -->
<script language=“javascript”>
<?
$Message = ‘Hello ’ . $_POST[‘TextBox1’];
?>
parent.document.getElementById(“DivTarget”).innerHTML =“<?= $Message;?>”;
</script>
همون طور که ميبينيد توي فايل MyPage.php پس از انجام پردازش هاي لازم يک کد جاوا اسکريپت توليد ميکنيم. چون اين صفحه در فريم MyFrame باز ميشود و اين frame فرزند پنجره ما به حساب مي آد، پس ما ميتونيم با استفاده از کد هاي جاوا اسکريپت به پدر (پنجره اصلي) دسترسي داشته باشيم همچنين به اجزاي پدر با کد زير يک متن که نتيجه پردازش ما است رو داخل DivTarget مينويسيم.
کد:
parent.document.getElementById(“DivTarget”).innerHTML =“My HTML code”;
کد زير مشابه کد بالاست ولي با ASP نوشته شده:
کد:
<!-- MyPage.asp -->
<script language=“javascript”>
<%
Dim Message As String
Message = “Hello “ + Request.form(“TextBox1”)
%>
parent.document.getElementById(“DivTarget”).innerHTML =“<%= Message %>”;
</script>
نکته: همون طوري که مشاهده ميکنيد سرور ما نياز به امکان اضافي نداره و زبون برنامه نويسي سمت سرور ما مهم نيست چي باشه...
XMLHTTP Request featuresاين روش پيشرفته تر Ajax هست که نسبت به روش قبل از سرعت و کارايي بيشتري برخورداره (در واقع به اين ميگن Ajax اما روش قبلي رو هم به خاطر شباهت هايي Ajax به حساب مي آرن.)
1- به ما اين امکان رو ميده که درخواست هاي POST و GET رو به صورت نامتقارن از سرور انجام دهيم.
2- هيچ پيغامي بر روي Status bar به کاربر نشون نميده.
3-در يک لحظه به هر تعداد که بخواهيم ميتوانيم درخواست بدهيم (همزمان).
4- براي هر تغيير وضعيت مي ميتونيم متد هايي رو داشته باشيم و کارهايي رو به دلخواه انجام بديم. چون ما 4 وضعيت براي يک درخواست داريم که پشت سر هم اتفاق مي افتند :
الف- Initialized
ب- Started
ج- In the process of being returned
د- Completely finished
که براي هر کدوم ميتونيم کدي رو اجرا کنيم.
5- همه مرورگر ها از اون پشتيباني نمي کنند.
6- در اين روش ارسال داده دست خود ما است.
يک مثال از اين روش:
مثل مثال قبل يک فرم داريم و يک div :
کد:
<form onsubmit=“return AjaxSubmitForm(this);”>
<input type=“text” name=“TextBox1”>
<div id=“DivTarget”></div>
<input type=“submit”>
</form>
همون طور که مي بينيد خبري از frame نيست فقط يه تابع جاوا اسکريپت رو توي رخداد onsubmit فرم صدا ميزنيم.
حالا کدهاي مربوط به Ajax Engine(به دلايل آموزشي سعي شده کد ها ساده تر باشد):
کد:
function GetXmlHttpRequest()
{
var XmlHttpReq;
var msxmlhttp = new Array('Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
for (var i = 0; i != msxmlhttp.length; i++)
{
try {
XmlHttpReq = new ActiveXObject(msxmlhttp[i]); //For IE
} catch (e) {
XmlHttpReq = null;
}
}
if(!XmlHttpReq )
XmlHttpReq = new XMLHttpRequest();//For NS
return XmlHttpReq;
}
/* ---------------------------------------------------------------------------- */
function PostData(Data, Url)
{
var XmlHttpReq = GetXmlHttpRequest();
if(!XmlHttpReq)
{
alert('Your Browser not support AJAX!');
return false;
}
XmlHttpReq.open("POST", Url, true);
XmlHttpReq.onreadystatechange = function()
{
if(XmlHttpReq.readyState == 4 && XmlHttpReq.status == 200)
PrintResult(XmlHttpReq.responseText);
};
XmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XmlHttpReq.send(Data);
return true;
}
/* ---------------------------------------------------------------------------- */
function AjaxSubmitForm(FrmObject)
{
var Data;
Data = "&TextBox1=" + FrmObject.TextBox1.value;
PostData(Data, 'MyPage.php');
return false;
}
/* ---------------------------------------------------------------------------- */
function PrintResult(TheData)
{
window.document.getElementById(‘DivTarget').innerHTML = TheData;
}
قسمتي که با اون بيشتر سرو کار داريم توابع AjaxSubmitForm و PrintResult است.
چون XmlHTTPRequest در مرورگر هاي مختلف شکل هاي متفاوتي دارد تابع GetXmlHttpRequest با توجه به ورژن و نوع مرورگر Object مربوط به Xml Http Request ر ابراي ما مي سازد.
تابع PostData يک داده و يک آدرس مي گيرد و داده را به آدرس post مي کند. در واقع داده محتويات فرم ما است و آدرس همون آدرسيه که توي Action فرم مي نوشتيم (در برنامه نويسي کلاسيک)، اين تابع يعد از گرفتن نتيجه تابع PrintResult را صدا ميزند و نتيجه اي که از سرور رسيده است رو به اين تابع ارسال ميکند. اين تابع هم که مشخص است که چه کاري انجام ميده ... داده ورودي رو توي DivTarget مي نويسه.
در اين روش در کد سمت سرور نيازي به استفاده از کد هاي جاوا اسکريپت نيست مثال:
کد:
<!-- MyPage.php -->
<?
$Message = ‘Hello ’ . $_POST[‘TextBox1’];
print( $Message);
?>
نمونه هايي از Ajax:
1- سرويس
Gmail که از هر دو روش فوق استفاده ميکنه.
2-
http://www.maps.google.com3-
سيستم ثبت نام مقدماتي دانشگاه که از روش اول استفاده ميکنه.
4- همين جا (
http://www.RightClick.ir ) که از روش دوم استفاده ميکنه.
فايل PowerPoint اين مطلب رو ميتونيد از لينک زير دريافت کنيد:
http://www.rightclick.ir/downloads/ajax_zipمنابع:
http://www.ajaxpatterns.orghttp://www.ajaxmatters.comhttp://www.ajaxinfo.comhttp://www.ajaxian.comhttp://www.ajaxpatterns.orghttp://www.petefreitag.comhttp://www.clearnova.comموفق و پيروز باشيد.
ورود
عضويت
پرسش و پاسخ
جستجو
