مرجع مقالات رسمی طراحی سایت مرجع مقالات رسمی طراحی سایت .

مرجع مقالات رسمی طراحی سایت

ایجکس (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 در جاوا اسکریپت را نشان می د 

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 ما به سادگی یک نام کامل از اتصال نام و نام خانوادگی ایجاد و پیام خوش آمد گویی را برگشت می دهد


برچسب: طراحی سایت در مشهد،
امتیاز:
 
بازدید:

+ نوشته شده: ۱۴ تیر ۱۳۹۹ساعت: ۰۷:۴۰:۰۵ توسط:علی پور موضوع: نظرات (0)