ایجکس (Ajax) چه است؟

درین بخش از خصوصی یادگرفتن جاوا اسکریپت قصد داریم به شما طریق پیاده سازی Ajax در جاوا اسکریپت را یادگرفتن بدیم.

طراحی سایت در مشهد

ایجکس (Ajax) چه است؟
Ajax مخفف Asynchronous Javascript And Xml میباشد که به معنای لود اطلاعات از سرور و بروزرسانی بخش هایی از ورقه اینترنت بصورت انتخابی فارغ از بارگذاری دوباره کل ورقه اینترنت میباشد.

به لهجه معمولی, Ajax در جاوا اسکریپت مرورگر را بدون چاره به استعمال از شیٔ XMLHttpRequest (XHR) برای ارسال و اخذ داده ها از اینترنت سرور بصورت غیرهمزمان (asynchronously) در پشت صحنه, فارغ از بلاک کردن ورقه یا این که تولید تداخل در رابط کاربری میباشد.

Ajax آنقدری دوست داستنی میباشد که به مشقت میتوانید یک نرم افزار را پیدا فرمایید که در برخی از نصیب ها از Ajax به کار گیری نکرده باشد. این نمونه در مقایس های پهناور نرم افزار های آنلاین می‌تواند : Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr و … اکثری از اپ های دیگر.

نکته: Ajax یک تکنولوژی نو وجود ندارد. در واقع, ایجکس به طور کلی حقیقتا یک تکنولوژی وجود ندارد. Ajax تنها یک اصطلاح برای شرح روند تبادل داده از اینترنت سرور بصورت غیرهمگام با جاوا اسکریپت فارغ از رفرش ورقه میباشد.

نکته ۲: کلمه x در Ajax را با بطور نمونه XML نادرست نگیرید. اینجا صرفا دعوا دوره مطرح میباشد. چرا‌که فرمت های تبادل داده ای مثل JSON یا این که HTML یا این که متن بی آلایش نیز میتواند به جای XML استعمال شود.



Ajax در جاوا اسکریپت چطور عمل می نماید
برای ساخت رابطه Ajax , جاوا اسکریپت از یک شیٔ در مرورگر به اسم XMLHttpRequest به کار گیری مینماید که منجر ارسال درخواست های HTTP به سمت سرور و اخذ اطلاعات در جواب (response) می‌گردد.

همگی مرورگر های امروزی و IE7+ از شیٔ XMLHttpRequest پشتیبانی می نمایند.

تصویر ذیل طریق عمل رابطه AJAX را نشان میدهد.



از‌آن‌جا‌که درخواست های Ajax معمولا غیرهمزمان می‌باشند, اجرای اسکریپت به محض ارسال درخواست ایجکس, ادامه می‌یابد. بدین ترتیب اجرای اسکریپت تا وقتیکه جواب اخذ شود, متوقف نخواهد شد.

در بخش ذیل درباره ی هر مورد از فرایندهایی که با آن فعالیت خوا‌هیم کرد, دعوا میکنیم.

ارسال درخواست و اخذ جواب
قبلی از تولید رابطه Ajax دربین سرور و کلاینت, اولی کاری که بایستی انجام بدید این میباشد که یک مثال از شیٔ XMLHttpRequest بسازید.


1
var request = new XMLHttpRequest();
حال, در مرحله بعدی ارسال درخواست به سرور, تولید یک درخواست نو با متد open() از شیٔ XMLHttpRequest میباشد.

متد open() معمولا دو پارامتر اخذ مینماید – گونه درخواست HTTP که می‌تواند GET, POST ,.. باشد و دومین نیز نشانی URLی که قصد ارسال درخواست را دارید.


1
request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");
نکته: پوشه میتواند هر نوعی مثل .text, .xml یا این که اسکریپت های زیر سرور مثل .php, .asp باشد که برخی عملیات را روی سرور انجام دهد (بیش تر یا این که تلاوت داده از دیتابیس)

در غایت از متد send() برای ارسال درخواست به سرور به کار گیری می‌کنیم.


1
request.send(); -Or- request.send(body);
نکته: متد send() یک پارامتر از روی میل body که به شما اذن میدهد بدنه درخواست را معلوم نمایید, اخذ می نماید. در مرتبه نخستین زیرا درخواست های GET بدنه درخواست ندارند, پس برای درخواست های POST استعمال می گردد.

متد GET معمولا برای ارسال حجم یه خرده از داده ها به سرور استعمال میشود درحالی که متد POST برای ارسال حجم متعددی از اطلاعات مثل داده فرم ها به کارگیری می‌گردد.

در متد GET داده تحت عنوان پارامترهای URL ارسال میگردد البته در متد POST اطلاعات تحت عنوان بدنه درخواست ارسال میگردد پس در URL مرورگر قابل اکران نیستند.

فراگیری پایین را برای مقایسه دو متد POST و GET با ریزه کاری مطالعه فرمائید :

https://netparadis.com/post-get-variables-php

در بخش تحت نگاهی با جزییات بیشتر به طرز عمل درخواست های Ajax می اندازیم.



اجرای درخواست GET ایجکس
درخواست GET معمولا برای اخذ یا این که بازیابی بعضا داده ها از سمت سرور که نیاز به بازنویسی یا این که تولید تغییر و تحول در دیتابیس وجود ندارد, به کار گیری میکنیم. به عنوان مثال, اخذ نتیجه ها کاوش, اخذ داده ها استفاده کننده مبنی بر id یا این که اسم و … .

نمونه تحت به شما شیوه ارسال درخواست GET برای Ajax در جاوا اسکریپت را نشان میدهد:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34











Content of the result DIV box will be replaced by the server response




Display Full Name


وقتی که درخواست غیرهمزمان میباشد, متد send() سریعا یک مقدار را بعداز ارسال درخواست (request) رجوع و برگشت می‌دهد.

از این رو, شما بایستی پیشین از پردازش آن باز‌نگری فرمایید که جواب اکنون کجای چرخه حیات جای‌دارد که اینکار با ویژگی readyState از شیٔ XMLHttpRequest انجام می گردد.

readyState یک مقدار عددی میباشد که حالت درخواست HTTP را مشخص و معلوم می‌نماید. همینطور, تابع اختصاص داده گردیده به هندلر روی داد onreadystatechange در هربار تغییر‌و تحول ویژگی readyState صدا زده میشود.

مقادیر احتمالی ویژگی readyState در ذیل خلاصه گردیده اند.

Value State Description
۰ UNSENT An XMLHttpRequest object has been created, but the open() method hasn’t been called yet (i.e. request not initialized).
۱ OPENED The open() method has been called (i.e. server connection established).
۲ HEADERS_RECEIVED The send() method has been called (i.e. server has received the request).
۳ LOADING The server is processing the request.
۴ DONE The request has been processed and the response is ready.
نکته: از دید تئوری اتفاق افتاد readystatechange در هر توشه تغییر‌و تحول ویژگی readyState اجرا شود ولی بیش تر مرورگرها هنگامی که readyState به ۰ یا این که ۱ تغییر و تحول می‌کنند, این روی داد را ساخت نمی‌کنند. به هر هم اکنون تمام مرورگرها این اتفاق افتاد را هنگامی که readyState به ۴ عوض می شود, اجرار می نمایند.

ویژگی status یک مقدار عددی کد شرایط HTTP را از جواب XMLHttpRequest رجوع و برگشت میدهد.

برخی از این کدهای معمول بصورت تحت می باشند.

۲۰۰ – OK . درخواست با پیروزی در سرور پردازش شد.
۴۰۴ – Not Found . سرور نمی تواند برگه درخواستی را پیدا نماید.
۵۰۳ – Service Unavailable . سرور بصورت موقت غیر قابل دسترس میباشد.
برای دیدن لیست بدون نقص میتوانید نوشته‌علمی کد حالت HTTP را مطالعه نمایید

کد greet.php ما به آسانی یک اسم بی نقص از اتصال اسم و اسم خانوادگی ساخت و پیام خوش آمد گویی را رجوع میدهد.


1
2
3
4
5
6
7
8
9
10
11
12
13
14