شروع کار با Ajax

نیروی پیشبرنده پشت رمز Ajax، تولید رابطه در بین کلاینت و سرور میباشد.   طراحی سایت در مشهد پیش از این این رابطه محصور به بسط زبانهای سمت سرور مانند perl و CGI بود، تکنولوژیهای تازه مانند PHP ،asp.net و jsp تکنیک های را برای آمیختن نرم‌افزار های سمت سرور و کلاینت برای علاقمندان به تولید نرم افزار های اینترنت آماده آوردند، ولی آن ها فاقد تکنیک های سمت کلاینت مانند جاوااسکریپت بودند. البته اینک آونگ در سوی دیگری تاب می‌خورد، بسط دهندگان سمت سرور نیاز به دانستن چیزهای متعددی در رابطه تکنیک های سمت کلاینت دارا‌هستند

تا بتوانند راه‌حل Ajax را به فعالیت ببرند. استارت با HTTP

شایسته ترین طرز شعور Ajax فهم HTTP میباشد، HTTP پروتکلی برای ارسال صفحه های اینترنت، تصویر و گونه های دیگر فولدر ها بر روی وب به سمت مرورگر شما و یا این که برعکس )سمت سرور( میباشد. وقتی که شما یک URL را در مرورگر تایپ میکنید، یک //:HTTP به آدرس شما اضافه می‌گردد که علامت می‌دهد شما میخواهید از HTTP برای دسترسی به داده ها محل مذکور به کارگیری نمایید. )اکثر وقت ها مرورگرها تعداد دیگری از پروتکل ها

مانند FTP را نیز پشتیبانی می نمایند(

HTTP از دوقسمت درست شده میباشد: درخواست)request( و جواب )Response(. هنگامی که شما در

مرورگر اینترنت یک URL را تایپ می‌کنید، مرورگر از طرف شما یک درخواست ساخت و ساز کرده و آن را ارسال می

نماید این درخواست مشمول Url ی که شما تایپ نموده اید و برخی داده ها دیگر که به مرورگر مربوط می

خواهد شد میباشد. سرور این درخواست را اخذ و به سمت عقب )سمت مرورگر( پاسخی را ارسال می نماید. جواب

مشتمل بر اطلاعاتی در رابطه محل رقم خورده داده در URL میباشد. این وظیفه مرورگر میباشد که جواب را تغییر و تحول داده و آن

را در کاغذ اینترنت اکران دهد.

درخواست های HTTP فرمت یک درخواست HTTP به طور پایین میباشد:

در یک درخواست HTTP، خط نخستین می بایست یک خط درخواست باشد تا نوع درخواست، منابع در دسترس، و ورژن HTTP که آیتم به کار گیری قرار میگیرد را نشانه دهد. خط آن گاه، یک قطعه header میباشد که داده ها مازاد که بوسیله سرور آیتم به کارگیری قرار میگیرد را علامت میدهد. پس از Header یک خط خالی وجود

داردکه قادر است با داده ها مازاد مالامال گردد.






[]
اشکال مختلفی از درخواست وجود دارااست که در HTTP تعریف و تمجید می‌گردد البته دو نوع آیتم اعتنا بسط دهندگان Ajax درخواست های نوع: GET و POST هستند. هر وقتی که شما یک URL را در مرورگر اینترنت تایپ نمایید، برای آن URL، یک درخواست GET به سمت سرور ارسال میکنید، که بطور کلی به سرور میگوید که منابع را بگیرد و آن را به سمت عقب ارسال نماید. اینجا یک نمونه از چیزی که درخواست GET برای آدرس

www.sample.com میتواند نشانه دهد آورده گردیده است:

خط نخستین آرم میدهد که نوع درخواست GET میباشد. بخش دوم )HTTP( از آن خط آرم میدهد که درخواست برای یک Domain میباشد انتهای خط درخواست مشخص و معلوم می نماید که از ورژن ۱٫۱، HTTP به کار گیری می گردد. )ورژن قبل آن ۱٫۰ بوده میباشد( البته درخواست به کجا ارسال گردیده‌است؟ این قضیه در خط دوم نماد داده گردیده است. خط دوم او‌لین Header در درخواست میباشد. هدر Host، مقصد درخواست را آرم می‌دهد. ادغام Host با اسلش جلو)/( در خط اولیه به سرور اعلام می نماید که درخواست برای

www.sample.com میباشد. )هدر Host در Http1.1 مایحتاج میباشد در ورژن پیش از آن مورد نیاز نبود.( خط سوم مشمول User-Agent میباشد، که هم اسکریپتهای سمت سرور و هم کلاینت به آن دسترسـی دارنـد و در برخی مرورگرها برای یافتن خطاهای منطقی مایحتاج میباشد. این داده ها به وسیله مرورگر آیتم استعمال شما ساخت میگردند. )درین نمونه Firefox( و به طور خود کار در هر درخواست برای سرور ارسال می‌شوند. خـط آقاطر Connection میباشد که برای مثال بالا با Keep-Alive مقداردهی شد‌ه‌است. )می توانـد بـا مقـادیر دیگری نیز ست گردد که بیرون از مشاجره کتاب میباشد.( اعتنا فرمائید که یک خط خـالی بعـد از آخـرین Header وجود داراست با اینکه هیچ بدنه درخواستی وجـود نـدارد ولـی خـط خـالی مورد نیاز اسـت. اگـر یـک زیـر دمـین ماننـد

www.sample.com/books را درخواست فرمایید درخواست شما به طور تحت خواهد بود:

GET /books/ HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive
دقت داشته باشید که فقط خط نخستین عوض شده میباشد که مشتمل بر قسمتی میباشد که پس از www.sample.com در URL آمده میباشد.

GET / HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.6)

Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive


ارسال پارامتر برای Get مستلزم این میباشد که داده ها فرنگی را به URL اضافه فرمایید:

URL ? name1=value1&name2=value2&..&nameN=valueN
این داده ها که حرفه query نامیده می‌شوند، در خط درخواست از یک درخواست HTTP تکرار می‌شوند:

GET /books/?name=root%20Directory HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive
دقت فرمائید که متن “root Directory”، زمانی که تحت عنوان پارامتر با URL ارسال می‌شود، باید رمزگذاری گردد، به همین خیال مکان خالی با ۲۰% جایگزین می‌گردد. به‌این دستور encode کردن URL گفته می‌گردد و در بخش های متعدد HTTP به کار گیری می‌گردد. )جاوااسکریپت یک تابع داخلی دارااست که عملیات رمزگذاری و رمزگشائی URL را جاری ساختن می‌دهد. در رابطه این تابع بعداً درین فصل مشاجره شود.( مقادیر

فیلدهای متعدد با یک آمپرسند “&” از هم جداگانه می‌شوند. بخش اعظمی از تکنولوژیهای سمت سرور به طور خود کار بدنه درخواست را رمزگشائی می نمایند و دسترسی به

این مقادیر را به شیوه های گوناگونی ممکن میسازند. اما، این مرتبط با سرور میباشد که با این اطلاعات چه عمل نماید. از سوی دیگر، درخواست POST، داده ها را به بدنه درخواست اضافه می نماید. از جمله، وقتی که شما یک فرم online را مالامال و آن را submit میکنید، اطلاعات به طور درخواست POST ارسال میشوند. اینجا مثال ای از درخواست POST آمده میباشد:

POST / HTTP/1.1
Host: www.sample.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.6)

Gecko/20050225 Firefox/1.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=root%20Directory&Operating System=Unix
می بایست به یک سری تفاوت اصلی در میان درخواست POST و درخواست GET اعتنا نمائید. نخستین اینکه خط درخواست بجای GET با POST آغاز میشود، که نوع درخواست را نماد میدهد. شما میتوانید ملاحظه کنید که هدرهای Host و User-Agent هم پا با دو گزینه نو سرجای خودشان می‌باشند. هدر Content-Type علامت میدهد که بدنه درخواست چه‌گونه کد گردیده‌است. مرورگر مدام داده POST را به طور application/x-www-form-urlencoded رمزگذاری می نماید که رمزگذاری بی آلایش URL از نوع MIME میباشد. هدر Content-Length ارتفاع بایت های بدنه درخواست را نماد می‌دهد. بعداز Connection یک خط خالی در بدنه درخواست وجود داراست، که در بیشتر مرورگرها یک جفت >اسم-

مقدار< می سازد که در اینجا name برابر با root Directory و سیستم عامل با Unix برابر میباشد. شما میتوانید مشاهده کنید که‌این فرمت مشابه پارامترهای حرفه ای Query در URL میباشد. همان طور که پیش از این گفتیم، گونه های دیگر درخواست HTTP وجود داراست، اما آن ها نیز از فرمت های مشابه POST و GET تاسی می نمایند. قدم‌بعدی

نگاه به چیزی میباشد که سرور به سمت عقب )سمت مرورگر(، بعنوان جواب درخواست HTTP ارسال می نماید. جواب HTTP

فرمتیکپاسخ HTTP،کهخیلیشبیهدرخواستآناست،درزیرآمدهاست:

همان طور که می‌بینید، صرفا تفاوت جواب با یک درخواست این میباشد که خط نخستین مشتمل بر داده ها موقعیت به مکان داده ها درخواست میباشد. خط حالت در رابطه منابع درخواست گردیده به وسیله یک کد موقعیت آگهی می نماید. اینجا یک جواب معمولی HTTP آمده میباشد:






[]
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
دراین نمونه خط شرایط یک کد حالت HTTP، ۲۰۰ و یک پیغام ok میباشد. خط موقعیت مدام مشتمل بر کد موقعیت و یک پیغام کوتاه میباشد. مهم ترین کدهای حالات در ذیل آمده اند: ۲۰۰ )ok(: منبع پیدا گردیده است و تمامی چیز خوب میباشد. ۳۰۰ )NOT MODIFIED(: منبع نتوانسته آن گاه درخواست آالاغ تصحیح خواهد شد. این کد بیشتر وقت ها برای مکانیزم های cache مرورگر به فعالیت می رود. ۴۰۱ )UNAUTHORIZED(: کلاینت حق دسترسی به منبع را ندارد. اکثر اوقات منجر می گردد که مرورگر برای login به سرور اسم کاربری و پسورد را درخواست نماید. ۴۰۳)FORBIDDEN(: کلاینتدردسترسیبهمنابعباخطامواجعهشدهاست.ایننوعزمانیاتفاقمیافتد که شما بعداز ۴۰۱ نتوانید با یک نام کاربری صحیحlogin فرمائید. ۴۰۴ )NOT FOUND(: منبع در محل متبوع نیست.

Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122










در خط موقعیت، هدرهای دیگری نیز موجودند. بطور مثال، سرور یک هدر Date را برمی گرداند که فرصت و تاریخ ساخت‌و‌ساز جواب را نماد میدهد. )سرور اطلاعاتی در خصوص خودش نیز ارسال می نماید، در حالتی‌که چه ما یحتاج نباشند( دو هدر بعدی بایستی آشنا باشند، آن ها Content-Type و Content-Length که در درخواست POST نیز به کار گیری می شدند، میباشند. در‌این نمونه، هدر Content-Type نوع MIME را برای text/html با یک رمزگذاری از نوع ۱-۸۸۵۹-ISO گزینش می نماید. )که استاندارد منابع انگلیسی آمریکا میباشد.( بدنه جواب دربرگیرنده یک کد HTML معمولی میباشد. این به عبارتی چیزی میباشد که مرورگر به استفاده کننده آرم خواهد بخشید. دقت نمایید که اشاره ای به نوع درخواست که جواب برای آن ارسال می گردد وجود ندارد؛ در صورتی چه، این مقاله اثری بر روی سرور ندارد. این مقاله مرتبط با کلاینت میباشد که بداند چه نوع داده ای برای هر نوع

درخواست می بایست به سمت عقب برگردانده گردد تا تصمیم بگیرد چه‌گونه از داده باید به کار گیری نماید.

درخواست XMLHttp XMlHttp نخست در IE5 با یک ActiveX معرفی شد. شی XMlHttp بسط دهندگان را به ساخت‌و‌ساز درخواست Http از هر کجای یک نرم افزار قوی می سازد. برای این درخواست یک XML تحت عنوان جواب برگردانده میشود، به همین خاطرXMlHttp یک طرز بی آلایش برای دسترسی به داده ها از روش XML را فراهم می نماید. MozilaنیزبعداXMlHttpًرادرمرورگرهایخود)مانندFirefox( تفاهم نامه.بعدازآنمرورگرهای Safari )بعداز ورژن ۱,۲( و Opera )ورژن ۷,۶ به بالا( از آن حمایت کردند. امروزه، نسبتاً اکثر مرورگرهای مطرح از این نوع درخواست حمایت می نمایند. بایستی اعتنا داشت که XMlHttp استاندارد W3C وجود ندارد، به همین خیال رفتارهای متفاوتی از آن را می قدرت در مرورگرهای متعدد روءیت کرد، اما اکثر متدها و صفات اساسی در تمامی آن ها به یک شکل حمایت می‌شوند. باید بدین قضیه اشاره نمود که در حالتی‌که یوزرها با مرورگرهای کهن خیس به اینترنت شما دسترسی دارا‌هستند باید در گزینش این مورد تجدید لحاظ نمایید.

ایجادشی XMlHttp برای ارسال درخواست و پردازش جواب باید نخست یک شیXMLHttpRequest با به کار گیری از

جاوااسکریپت ساخت‌و‌ساز نمائید. با دقت به‌این قضیه که XMLHttpRequest استاندارد W3C وجود ندارد، می می بایست از طریق های که مرورگرها از آن حمایت می نمایند به ساخت‌و‌ساز شی مبادرتت کرد. IE، به وسیله یک شی ،Firefox را ساخت می نماید در حالی که مرورگرهای دیگر مانند XMLHttpRequest شی ،ActiveX Safari،Opera، آن را به طور یک شی جاوااسکریپتی پیاده سازی می نمایند. بخاطر این قضیه، کد

جاوااسکریپت می بایست مشمول هر دو طریق ساخت و ساز یک مثال XMLHttpRequest با به کار گیری از تکنیک

ActiveX و شی جاوااسکریپتی باشد.

برای جاری ساختن این فعالیت احتیاجی به پی بردن نوع مرورگر وجود ندارد، صرفا چیزی که باید اجرا بدهید این میباشد که محاسبه

فرمایید آیا این که مرورگر از ActiveX حمایت می نماید یا این که خیر؟ در شکل پشتیبانی کردن، شی

XMLHttpRequest را با به کار گیری از تکنیک ActiveX در غیر اینصورت از شی محلی جاوااسکریپتی

برای این خواسته به کارگیری میکنید. برای اینکه در IE با به کار گیری از ActiveX بخواهید یک شی

XMLHttpRequest را مثال سازی فرمائید، باید به طور تحت فعالیت نمایید. var xmlHttp = new ActiveXObject(iEVersion[i]);

مشکلی که اینجا وجود داراست، وجود یک سری ورژن از کتابخانه های MSXML میباشد. زیرا هر ورژن سرعت و ثبات خویش را دارااست، بایستی مطمئن شویدکه از جدیدترین ورژن که ماشین مخاطب از آن حمایت می نماید استعمال می‌کنید یا این که خیر؟ به‌این مراد بایستی ورژن های جانور را محاسبه فرمایید.

ورژن های جان دار MSXML به قرار پایین است:

- Microsoft.XMLHttp
- MSXML2.XMLHttp
- MSXML2.XMLHttp.3.0
- MSXML2.XMLHttp.4.0
- MSXML2.XMLHttp.5.0
متاسفانه، فقط راه و روش تشخیص شایسته ترین ورژن برای استعمال، سعی بر ساخت و ساز هریک از این نسخ میباشد. بخاطر اینکه این نسخ در دست گرفتن ActiveX میباشند، ناتوانی در ساخت و ساز هرمورد از آن ها سبب به ساخت و ساز یک اشتباه گردد، این آیتم به‌این مفهوم میباشد که شما باید از بلوک try…catch به کار گیری نمایید. در اینصورت با تولید یک غلط در یک ActiveX سعی بر ساخت و ساز یک نمونهXMLHttpRequest با استعمال از ActiveX بعدی می نماید. ساخت شی XMLHttp در مرورگرهای دیگر بسیار معمولی میباشد، فقط کافی میباشد از کد تحت

function createXMLHttp() {

var xmlHttp = new XMLHttpRequest();

برای این خواسته استعمال نمایید: فیض فعالیت به طور ذیل خواهد بود:

if (typeof XMLHttpRequest !=”undefined”){

return new XMLHttpRequest()

}else if (window.ActiveXObject){

var iEVersion = [ “MSXML2.XMLHttp.5.0”,

"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0",
" ;]

for (var i=0; i< iEVersion.length; i++){



استارت عمل با Ajax try{

var xmlHttp = new ActiveXObject(iEVersion[i]);

return xmlHttp; }catch(oError){

هیچ عملی انجام نمی گیرد//

}

throw new Error(“XMLHttp object could be created.”); }

تابع createXMLHttp در آغاز با به کار گیری از عملگر typeof محاسبه می نماید که آیا این که کلاس XMLHttpRequest تعریف‌و‌تمجید گردیده‌است یا این که خیر؟)مرورگر ازآن پشتیبانی می نماید یا این که خیر؟( در حالتی‌که XMLHttpRequest جانور بود، از آن برای ساخت‌و‌ساز شی XMLHttp استعمال می نماید، در غیر اینصورت تحلیل می نماید که آیا این که کلاس ActiveXObject مو جود میباشد یا این که خیر؟ در شکل وجود، مجموعه ActiveX ها را در یک آرایه قرار می‌دهد. ) جدیدترین ورژن اولِ آرایه قرار میگیرد. ( با به کارگیری از یک رینگ تکرار ActivX ها را از آرایه خوانده و همت می نماید یک نوع XMLHttp تولید نماید درصورتی که این عمل قابلیت و امکان نداشت، عبارت catch از تولید اشتباه و توقف عملیات دوری می نماید، بعد از آن آیتم بعدی آرایه گزینه آزمایش قرار میگیرد. وقتی که یک شی تولید شد، با برگرداندن آن شی عملیات به نقطه پایان می‌رسد، در غیر اینصورت یک غلط با استعمال از امر throw ساخت‌و‌ساز می نماید که آرم میدهد عملیات با باخت مواجه شد‌ه‌است.

متدها و صفات

اینک توانسته اید یک شی XMLHttp ساخت فرمائید. همانگونه که دیدید برای تولید این شی در مرورگرهای متعدد روشهای مختلفی را انجام کردیم، به همین خیال تفاوتهایی نیز در متدها و صفات این شی در مرورگرهای متفاوت خوا هیم روءیت کرد. میتوانید صفات شی XMLHttpRequest ساخت و ساز گردیده در IE را در جدول ۱-۳ و متدهای آن را در جدول ۲-۳، ملاحظه کنید. صفات این شی در مرورگرهای