معرفی ajax

معرفی

در این مقاله یک معرفی کوتاه از Ajax و استفاده های آن خواهیم داشت قبل از شروع کار چندین نمونه ی تمرینی ببینید تا با قدرت ajax آشنا شوید. Facebook، اینستاگرام،توییتر و غیره نمونه هایی هستند که زمانی که شما دکمه ی like را فشار می دهید تعداد لایک ها بدون بارگذاری مجدد صفحه اضافه می شود. حال موقعیتی را تصور کنید که شما روی دکمه ی لایک کلیک می کنید و کل صفحه باید مجددا بارگذاری شود تا تعداد لایک ها مشخص شود حال سوال این است که برای چنین کار کوچکی آیا نیاز است که کل صفحه مجددا بارگذاری شود؟ واضح است که نه هیچ کسی چنین کاری را انجام نمیدهد. بنابراین این به آن معنی است که این ویژگی بسیار لازم است زیرا از بارگذاری مجدد کل صفحه جلوگیری می کند و فقط برای اطلاعات مورد نیاز، با سرور ارتباط برقرار می کند و آن ها را به کاربر نهایی نشان می دهد( در مثال ما تعداد لایک ها را نشان می دهد)

مورد دیگری را درنظر بگیرید که برای جستجو به گوگل می روید معمولا دیده اید که وقتی کلمه ی موردنظرتان را برای جستجو تایپ می کنید پیشنهاد های زیادی در نوار جستجو به شما نمایش داده می شود اما این ها از کجا می آیند؟ طبیعتا از سمت کلاینت نمی آیند. نتیجه، حاصل قدرت ارتباط با سرور بدون بارگذاری مجدد صفحه است.

نمونه هایی مانند موارد گفته شده بسیار زیاد است. قدرتی که پشت این مثال ها کار می کند چیزی نیست جز ajax. اجازه دهید به صورت مختصر درباره ی ajax و پیاده سازی آن صحبت کنیم.

Ajax چیست؟

Ajax مخفف جاوااسکریپت و XML ناهمگام است و برای ارتباط با سرور بدون بارگذاری مجدد صفحه وب استفاده می شود که موجب UX و کارایی بهتر می شود.

پیش نیاز ها

هیچ پیش نیاز خاصی برای متوجه شدن باقی این مقاله نیاز نیست فقط آشنایی ابتدایی با HTML، CSS و جاوااسکریپت برای شروع کافی است.

Ajax چگونه کار می کند؟

در ابتدا اجازه دهید بررسی کنیم که ناهمگامی به چه معناست. دو نوع درخواست وجود دارد همگام و ناهمگام. درخواست های همگام مواردی هستند که به ترتیب انجام می شوند یعنی اگر یک پروسه درحال انجام است و پروسه ی دیگری درهمان زمان بخواهد انجام شود به پروسه دوم اجازه ی اجرا شدن داده شدن نمی شود این به آن معناست که در هر زمان فقط یک پروسه انجام می شود. این کار خوب نیست زیرا در این نوع بیشتر CPU در بیشتر زمان ها بیکار است مانند عملیات های I/O که بسیار کند تر از عملیات های CPU هستند بنابراین برای بهره برداری از تمام ظرفیت CPU و منابع دیگر از فراخوانی های ناهمگام استفاده می شود اما کلمه ی جاوااسکریپت چرا در ajax وجود دارد؟ درواقع درخواست ها به وسیله ی توابع جاوااسکریپت تولید می شوند و XML نیز برای ساخت شیئ XMLHttpRequest  استفاده می شود.

بنابراین خلاصه توضیح بالا این است که صفحات وب می توانند به صورت ناهمگام به روزرسانی شوند و فقط تعداد محدودی از داده ها تغییر یابند. حال می خواهیم درباره ی بخش های مهم و پیاده سازی ajax صحبت کنیم. برای پیاده سازی Ajax فقط مراقب شیئ XMLHttpRequest  باشید اما این شیئ چیست؟ این شیئ برای تعویض داده با سرور در پشت پرده استفاده می شود. سعی کنید که الگوی OOP  که می گوید شیئ از طریق متد های فراخوانی ارتباط برقرار می کند را به خاطر بیاورید چنین چیزی در اینجا نیز انجام می شود. معمولا این شیئ ساخته می شود و برای فراخوانی متدهایی که منجر به ارتباط موثر می شود استفاده می شود. همه ی مرورگرهای مدرن از شیئ XMLHttpRequest  پشتیبانی می کنند.

سینتکس ابتدایی: سینتکس ساخت این شیئ به صورت زیر است:

;()req = new XMLHttpRequest

دو نوع متد Open() و send() داریم که استفاده از این دو متد به صورت زیر است

;(req.open("GET", "abc.php", true

;()req.send

دو خط بالا دو متد را تعریف می کند.reg مخفف request است و اساسا یک متغیر ارجاعی است. پارامتر Get نیز مانند همیشه یکی از انواع متد ها برای ارسال درخواست است. از Post نیز به همان صورت Get می توانید استفاده کنید. پارامتر دوم نام فایلی است که معمولا درخواست ها و پروسه ها از آنجا مدیریت می شوند. پارامتر سوم true است که یعنی درخواست از نوع ناهمگام است. متد Open() درخواست را قبل از ارسال به سرور آماده می کند. متد دوم برای ارسال درخواست به سرور است.

سینتکس ارسال پارامتر از طریق درخواست Get یا Post به صورت زیر است

;(req.open("GET", "abc.php?x=25", true

;()req.send

در کد های بالا کوئری خاص به صورت URL با ؟ همراه است که پس از آن با نام متغیر و سپس = و نهایتا مقدار مربوطه همراه است در صورت ارسال دو یا تعداد بیشتری متغیر از علامت & بین دو متغیر استفاده کنید. متد بالا همانطور که پیداست برای درخواست GET است. داده را از طریق Post ارسال کنید و سپس آن را به صورت زیر به متد Send بفرستید

;("req.send("name=johndoe&marks=99

استفاده از متد setRequestHeader() به صورت زیر است

;("req.setRequestHeader("Content-type", "application/x-www-form-urlencoded

Event ها و مدیریت مکانیزم

هر فعالیتی که انجام می شود مانند کلیک روی دکمه،hover کردن روی یک المان،بارگذاری صفحه و غیره Event نامیده می شوند. همچنین باید بدانید که جاوااسکریپت می تواند Event ها را تشخیص دهد بنابراین کد یک event خاص را با اکشن آن که می تواند به وسیله جاوااسکریپت پیاده سازی شود الحاق کنید به این کار مدیریت Event ها گفته می شود.

با پیاده سازی event handler ها می توانید Event ها را نگهداری کنید. event handler ها اساسا توابعی هستند که در جاوااسکریپت نوشته می شوند که زمانی که یک کاربر یک Event انجام می دهد روی یک یا مجموعه ای از اکشن ها عمل می کند. زمان ارسال یک درخواست از طریق متد send معمولا پاسخ از سرور بعدا دریافت می شود اما زمان دریافت پاسخ شناخته شده نیست.

بنابراین باید پاسخ event موردنظر که با event handler (تابع) که زمانی که یک پاسخ می آید اجرا خواهد شد، همراه است را پیگیری کنید.

زمانی که یک درخواست به سرور فرستاده می شود عملیات هایی را بر مبنای پاسخ انجام دهید. Event موردنظر هربار که readyState  تغییر کند انجام می شود اما readyState  چیست و چه وقت event مربوط به آن اتفاق می افتد و بین پاسخ و درخواست چندبار اتفاق می افتد؟

شیئ XMLHttpRequest  یک property  به نام readyState  دارد که مقدار آن در یک دور request و response ،یعنی زمانی که یک درخواست آماده می شود،ارسال می شود،حل می شود و زمانی که پاسخ می آید، تغییر می کند.

onreadystatechange  یک تابع (و یا اسم تابع) را در خودش ذخیره می کند تا زمانی که readyState  تغییر می کند بطور خود کار فراخوانی شود.

readyState  مقادیر مختلفی از 0 تا 4 را نگهداری می کند.

1.request های غیر اولیه

2.برقراری ارتباط با سرور

3.دریافت request

4.پردازش request

5.کار request تمام شده و response آماده است.

XMLHttpRequest  یک ویژگی به نام status  دارد که به صورت زیر است:

200: “OK”

404: “Page not found”

حال فرض کنید readyState  4 است و status  نیز 200 است که به معنی این است که response آماده است.

مزایا

سرعت افزایش می یابد زیرا نیازی به بارگذاری مجدد صفحه نیست.

AJAX باعث فراخوانی های غیرهمزمان به وب سرور می شود که به این معنی است که دیگر نیازی نیست کاربر منتظر بماند تا تمام داده قبل از شروع رندر شدن برسد.

اعتبارسنجی فرم از طریق AJAX با موفقیت انجام شود.

استفاده بهینه از پهنای باند

تعاملی تر است.

معایب

ajax وابسته به جاوااسکریپت است بنابراین اگر در سیستم عامل یا مرورگر با جاوااسکریپت مشکلی وجود داشته باشد،ajax پشتیبانی نخواهد شد.

ajax در موتور های جستجو می تواند مشکل ساز باشد زیرا در بسیاری از قسمت ها از جاوااسکریپت استفاده می کند.

Sourse code هایی که با Ajax نوشته می شوند به راحتی قابل خواندن هستند بنابراین باعث برخی مشکلات امنیتی می شوند.

دیباگ کردن دشوار است.

 

 

 

  

نظر شما

0 نظر

نظری ثبت نشده است