AJAX یک نوع برنامه نویسی است که در سال 2005 توسط گوگل به طور عمومی ایجاد شد.
باAJAX می توانید Web Application های بهتر , سریعتر و بسیارکاربر پسند ایجاد کنید.
AJAX مبنی برجاوا اسکریپت و HTTP Request است.
معرفی AJAX
آجاکس یک زبان برنامه نویسی جدید نیست بلکه یک تکنیک جهت ایجاد Web application های بهتر و سریعتر و بسیار تعاملی است.
با آجاکس , جاوا اسکریپت می تواند مستقیما با سرور ارتباط برقرار کند, و از شی جاوا اسکریپتی XMLHttpRequest استفاده کند. با این شی , جاوا اسکریپت می تواند داده را با یک Web server , بدون لود مجدد صفحه , مبادله کند.
آجاکس از انتقال ناهمزمان داده ها(درخواستهای HTTP) در بین browser و web server استفاده می کند , اجازه می دهد صفحات وب به جای درخواست کل صفحه, اطلاعات کمی را از سرور درخواست کنند.
تکنیک آجاکس, application های اینترنت را کوچکتر و سریعترو بسیار کاربرپسند می کند.
آجاکس یک تکنولوژی browser وابسته به نرم افزار web server است.
آجاکس مبنی بر استانداردهای وب است.
آجاکس بر مبنای استانداردهای وب زیر است:استانداردهای وبی که آجاکس مبنی بر آنها است , به خوبی تعریف شده اند و توسط browser های زیادی پشتیبانی می شوند. Application های آجاکس و browser و platform بهم وابسته اند.
وب application ها مزایای زیادی در بین application های دیگر دارند; آنها می توانندبه داده ی بیشتری دستیابند,نصب و پشتیبانی آنها بسیار آسان است وجهت توسعه راحترند.
به هر حال , application های اینترنتی همانند desktop application های سنتی همیشه غنی و کاربرپسند نیستند.
با آجاکس , internet application ها می توانند غنی تر و کاربرپسندتر درست شوند.
در خواستهای Http آجاکس (ajax httprequest)
در کد گذاری سنتی جاوا اسکریپت, اگر اطلاعاتی از یک دیتابیس یا یک فایل در سرور می خواستید, یا جهت ارسال اطلاعات کاربر به یک سرور, می بایست یک فرم HTML درست می کردیدو داده ها را به سرور می فرستادید(POST)یا از آن می گرفتید(GET). کاربر جهت دریافت یا ارسال اطلاعات باید روی دکمه ی “Submit” کلیک می کرد, منتطر پاسخگویی سرور می ماند, سپس یک صفحه ی جدید با نتیجه لود می شد.سرور در هر بار که کاربر ورودی را ارائه کند,یک صفحه ی جدید برمی گرداند, وب application های سنتی خیلی کند اجرا و کمتر کاربرپسند هستند .
با آجاکس , جاوا اسکریپت در میان شی JavaScriptXMlHttpRequestمستقیما با سرور در ارتباط است .
با یک درخواست HTTP , صفحه ی وب می تواند یک درخواست به سرور درست کند, و پاسخی از یک وب سرور,بدون لود مجدد صفحه , دریافت کند. کاربر در همان صفحه می ماند, و به درخواستهای اسکریپتی صفحات توجهی ندارد.
شی XMLHttpRequest
با استفاده از شی XMLHttpRequest ,یک وب developer می تواند یک صفحه دارای داده از سرور را بعد از لود صفحه! , به روز کند.
آجاکس به طور عمومی در سال 2005 توسط Google sugestدرست شد.
Google Suggest از شی XMLHttpRequest برای ایجاد یک رابط وب پویا , استفاده می کند: زمانی که مطلبی را جهت جستجو در google تایپ میکنید, یک جاوا اسکریپت , متن شما را به یک سرور ارسال می کند و سرور لیست پیشنهادهایش را بر می گرداند.
جستجوگرهای 5.0IE Safari 1.2, , 8 opera , Mozila 1.0/Firefox و Netscape 7 , شی XMLHttpRewuest را پشتیباتی می کند.
مثالی از AJAX
برای درک چگونگی کار آجاکس , بیایید یک Ajax application کوچک ایجاد کنیم.
ابتدا , یک فرم HTML ساده با دو متن ایجاد می کنیم: username وtime . فیلد username با کاربر پر میشود و فیلد time با استفاده از آجاکس پر می شود.
فایل HTML را testajax.htm بنامید . قطعه کد لازم در زیر نشان داده شده است. توجه کنید که این فرم HTML دکمه ی submit ندارد.
<<html
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time:<input type="text" name="time" />
</form>
</body>
</html>
بخش بعدی در مورد keystone های آجاکس توضیحی می دهد.
پشتیبانی Browser از آجاکس
Keystone های آجاکس , شی XMLHttpRequest است.
Browser های مختلف , ازمتدهای مختلفی جهت ایجاد شی XMLHttpRequest استفاده می کنند.
Internet Explorer از یک شی ActiveX استفاده می کند, در حالی که browser های دیگر از شی توکار JavaScript فراخوانده شده در XMLHttpRequest استفاده می کنند.
برای ایجاد این شی , و تبادل با browser های مختلف , از عبارت “try …catch” استاده می کنیم.
بیایید فایلtestAjax.htm را با با جاوا اسکریپتی که شی XMLHttpRequest را ایجاد میکند, به روز کنیم:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
دراین مثال ابتدا یک متغیر xmlHttp جهت نگه داشتن یک شی XMLHttpRequest ایجاد می کنیم.
سپس سعی می کند با دستور () xmlHttp=new XMLHttpRequestیک شی ایجاد کند.این برای browser های Fierfox,Opera و Safari است. اگر آن ممکن نبود, برای Internet Explore 6.0 سعی می کند با دستور xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”) یک شی ایجادکند, و اگر آنهم ممکن نبود,برای Internet Explorer 5.5 سعی می کند با دستور
xmlHttp=new ActiveXObject(“Microsoft.XMlHTTP”) یک شی ایجاد کند.
اگر هیچ کدام از این سه متد کار نکند , کاربر یک browser بسیار قدیمی دارد و یک اخطار مبنی براینکه browser اش آجاکس را پشتیبانی نمی کند, می بیند.
توجه: کد ویژه ی browser بالا طولانی ونسبتا پیچیده است. اما شما می توانید هر زمان که خواستید یک شی XMLHttpRequest ایجاد کنید , آن را کپی کنید.
بخش بعدی به بررسی چگونگی استفاده از شی XMLHttpRequest در ارتباط با سرور می پردازد.
شی XMLHttpRequest
مطالب بیشتر در رابطه با شی XMLHttpRequest
قبل از فرستادن داده ها به سرور , می بایست سه خصوصیت مهم شی XMLHttpRequest را بدانیم.
خصوصیت onreadystatechange
بعد از یک تقاضا به سرور , نیازمند تابعی هستیم که بتواند داده یی که توسط سرور برگردانده می شود را دریافت کند.
خصوصیت onreadystatechange , تابعی را که پاسخ یک سرور را پردازش می کند, ذخیره می کند. کدی که در زیر نوشته شده است یک تابع خالی تعریف می کند و خصوصیت onreadystatechange را در یک زمان تنظیم می کند:
xmlHttp.onreadystatechange=function() {
// We are going to write some code here
{
خصوصیت readyState
خصوصیت readyState وضعیتهای پاسخ سرور را نگه می دارد. هر بار که readyState تغییر می کند, تابع onreadystatechange اجرا خواهد شد.
در زیر مقدار های مجاز خصوصیت readystate آورده شده است:
0 درخواست آغاز (initialize) نشده است(Not initialized)
درخواست برقرار شده شده است
2 درخواست فرستاده شده است 3 درخواست در حال پردازش است
4 درخواست کامل است(Loaded).
برای آزمودن اینکه آیا پاسخ کامل است(به این معنا که می توانیم داده هایمان را بگیریم), باید یک عبارت if به تابع onreadychange بیفزاییم.
xmlHttp.onreadystatechange=function()
{ if(xmlHttp.readyState==4)
{ // Get the data from the server's response
{
{
خصوصیت responseText
داده ی برگشتی از سرور با خصوصیتresponseText قابل بازیابی است.
در کد زیر , ما مقدار فیلد “time” را مساوی با responseText تنظیم کرده ایم:
xmlHttp.onreadystatechange=function()
{ if(xmlHttp.readyState==4)
{ document.myForm.time.value=xmlHttp.responseText
{
{
بخش بعدی نشان می دهد که چگونه بعضی از داده ها را ازسرور درخواست کنیم.
ارسال یک درخواست به سرور
جهت بدرقه ی یک درخواست به سرور, از متدهای open() و send() استفاده می کنیم.
متد open() سه آرگومان می پذیرد. آرگومان اول برای تعیین متد(GET یا POST) جهت ارسال درخواست استفاده شود. آرگومان دوم URL اسکریپت سمت سرور را مشخص می کند.آرگومان سوم مشخص می کند که درخواست باید به طور ناهمزمان کنترل(handled) شود یا نه.متد send() , درخواست را به سرور همراهی و بدرقه می کند .با فرض اینکه فایل HTML وASP در یک مسیر هستند, کد به صورت زیر است:
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
اکنون باید در مورد زمان اجرا ی تابع آجاکس تصمیم گیری کنیم. برای مثال هنگامی که کاربر در فیلد username متنی را تایپ می کند , اجازه دهیم تابع در"پشت صحنه " اجرا شود.مانند زیر:
<form name="myForm">
Name: <input type="text"onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
< /form >
فایل testAjax به روز شده با قطعه کد با لا به صورت زیر است:
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text"onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
در بخش بعدی AJAX application را با اسکریپت"time.asp" کامل می کنیم.
اسکریپت سمت سرور ASP
اکنون قصد داریم اسکریپتی ایجاد کنیم که زمان جاری سیستم را نمایش دهد.
خصوصیت responceText (که در بخشهای قبلی توضیح داده شد), داده ی بازگشتی از سرور را ذخیره می کند . در اینجا می خواهیم زمان جاری را برگردانیم.کد نوشته شده در time.asp به صورت زیر است:
%>
response.expires=-1
response.write(time)
<%
توجه: با استفاده خصوصیت Expire مدت زمان cache یک صفحه قبل از منقضی شدن آن در یک browser را تنظیم می کند.اگر کاربر صفحه ی مشابهی را قبل از زمان انقضا بر گرداند, نسخه ی cache شده نشان داده می شود.برای اینکه صفحه هرگز cache نشود, باید Response.Expire=-1 باشد.
اجرای AJAX application
با تایپ متنی در textbox مربوط بهName وسپس کلیک در داخل text box مربوط به time نتیجه را خواهید دید.
Text box مربوط به time بدون لود دوباره ی صفحه, زمان سرور را از فایل time.asp می گیرد.
