آموزش ایجکس

آنچه در این صفحه می خوانید:

معرفی ایجکس (AJAX)

Asynchronous JavaScript And XML یا به اختصار Ajax مجموعه ای از تکنیک های توسعه وب با استفاده از بسیاری از فناوری های وب در سمت کلاینت برای ایجاد برنامه های وب ناهمزمان است. با ایجکس، برنامه های وب می توانند داده ها را از سرور یا پایگاه داده به طور همزمان (در پس زمینه) و بدون دخالت در نمایش صفحه و رفتار صفحه موجود ارسال و بازیابی کنند. ایجکس با جدا کردن لایه تعویض داده از لایه نمایش، به سایت و برنامه های وب اجازه می دهد تا بدون نیاز به بارگیری مجدد کل صفحه، محتوای آن را به صورت پویا تغییر دهند. در واقع، روش تبادل داده ها با سرور و به روز رسانی قسمت های صفحه وب بدون بارگذاری مجدد کل صفحه می باشد. در عمل، پیاده سازی های مدرن معمولاً از جی سان (JSON) به جای اکس ام ال (XML) استفاده می کنند.

ایجکس یک فناوری واحد نیست بلکه یک گروه از فناوری است. اچ تی ام ال (HTML) و سی اس اس (CSS) را می توان در ترکیب برای علامت گذاری و سبک کردن اطلاعات استفاده کرد. سپس صفحه وب می تواند توسط جاوااسکریپت تغییر یابد تا به صورت پویا نمایش داده شود و به کاربر اجازه دهد تا با اطلاعات جدید ارتباط برقرار کند. شی داخلی XMLHttpRequest یا از سال 2017 عملکرد جدید "()fetch" در JavaScript، معمولاً برای اجرای Ajax در صفحات وب استفاده می شود که به وب سایت ها اجازه می دهد تا محتوا را بر روی صفحه بارگذاری کنند بدون اینکه صفحه را رفرش کنند. ایجکس فناوری جدید یا زبان برنامه نویسی نیست، فقط فناوری های موجود است که به روش های جدید مورد استفاده قرار می گیرد.

تاریخچه ایجکس (AJAX)

در اوایل اواسط دهه 1990، بیشتر وب سایت ها کامل مبتنی بر صفحات HTML بودند. هر اقدام کاربر نیاز به بارگیری صفحه کامل از سرور دارد. این روند، همانطور که توسط تجربه کاربر منعکس شده است ناکارآمد است: تمام محتوای صفحه ناپدید شدند، سپس صفحه جدید ظاهر شد. هر بار مرورگر به دلیل تغییر جزئی، بارگیری مجدد صفحه، مجبور می شد مجدداً ارسال شود، حتی اگر برخی از اطلاعات تغییر کرده بودند. این بار اضافی را روی سرور قرار داده و پهنای باند را به عنوان عامل محدود کننده در عملکرد تبدیل کرده است.

در سال 1996، تگ iframe توسط Internet Explorer معرفی شد. مانند عنصر شی، می تواند محتوای را بصورت غیر همزمان بارگیری کند. در سال 1998، تیم مایکروسافت Outlook Web Access مفهوم پشت شی برنامه نویسی XMLHttpRequest را توسعه داد. به عنوان XMLHTTP در نسخه دوم كتابخانه MSXML ظاهر شد كه در مارس 1999 با Internet Explorer 5.0 ارسال شد.

عملکرد کنترل XMLHTTP ActiveX در اینترنت اکسپلورر 5 بعداً توسط مرورگرهای موزیلا، سافاری، اپرا و سایر موارد به عنوان شی JavaScript XMLHttpRequest اجرا شد. مایکروسافت مدل بومی XMLHttpRequest را از طریق Internet Explorer 7 اتخاذ کرده است. نسخه ActiveX هنوز در اینترنت اکسپلورر پشتیبانی می شود، اما در Microsoft Edge پشتیبانی نمی شود. ابزار این درخواست های پس زمینه HTTP و فناوری های وب ناهمزمان نسبتاً مبهم است تا اینکه در برنامه های آنلاین گسترده در مقیاس بزرگ مانند Outlook Web Access و Oddpost ظاهر شود.

گوگل از Ajax با Gmail (2004) و Google Maps (2005) استفاده گسترده ای به صورت سازگار با استانداردها و مرورگرهای ایجکس انجام داد. در اکتبر 2004، انتشار بتا عمومی Kayak.com جزو اولین استفاده های گسترده در تجارت الکترونیکی از آنچه توسعه دهندگان آنها در آن زمان "the xml http thing" نامیده می شدند بود. این افزایش علاقه در AJAX در بین برنامه نویسان برنامه وب است. در 5 آوریل 2006، کنسرسیوم جهانی وب (W3C) اولین تلاش برای ایجاد XMLHttpRequest را با هدف ایجاد استاندارد وب رسمی منتشر کرد. آخرین پیش نویس شی XMLHttpRequest در 6 اکتبر 2016 منتشر شد.

تکنولوژی های ایجکس (AJAX)

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

  • HTML (یا XHTML) و CSS برای ارائه
  • Document Object Model (DOM) برای نمایش پویا و تعامل با داده ها
  • JSON یا XML برای تبادل داده و XSLT برای دستکاری آن
  • هدف XMLHttpRequest برای ارتباطات ناهمزمان است
  • جاوا اسکریپت برای جمع آوری این فناوری ها

از آن زمان، پیشرفت های بسیاری در فناوری های مورد استفاده در برنامه Ajax و در تعریف اصطلاح Ajax به وجود آمده است. XML دیگر برای تبادل داده دیگر لازم نیست و بنابراین، XSLT دیگر برای دستکاری داده ها لازم نیست. نوت بوک جاوا اسکریپت (JSON) اغلب به عنوان قالب جایگزین برای تبادل داده استفاده می شود، اگرچه می توان از قالب های دیگر مانند HTML از پیش ساخته یا متن ساده نیز استفاده کرد. انواع کتابخانه های محبوب JavaScript، از جمله جی کوئری، شامل موارد انتزاعی برای کمک به اجرای درخواست های Ajax هستند.

ویژگی های ایجکس (AJAX)

  • مستقل از فناوری سرور.
  • عملکرد صفحه وب را افزایش دهید.
  • پشتیبانی از اتصال داده زنده
  • پشتیبانی از کنترل View Data
  • پشتیبانی از ارائه الگوهای سمت کلاینت
  • رابط کاربری غنی و رسپانسیو
  • کاهش مصرف منابع سرور
  • بدون نیاز به فشار دادن دکمه ارسال و بارگذاری مجدد کامل وب سایت.
  • فقط نیازی به بارگذاری مجدد کل صفحه فقط بخشی از صفحه بارگیری مجدد می شود که برای بارگیری مجدد لازم است.
  • جدا از به دست آوردن هدف XMLHTTP، تمام پردازش ها برای همه انواع مرورگر یکسان است، زیرا از JavaScript استفاده می شود.
  • با استفاده از ایجکس برنامه های وب سریعتر و تعاملی ایجاد کنید.

ایجکس (AJAX) چگونه کار می کند؟

طبق گفته Cascarano، جاوااسکریپت و XML با هم ترکیب می شوند تا با استفاده از شی XMLHttpRequest، بروزرسانی ناهمزمان اتفاق بیفتد. هنگامی که کاربر از صفحه وب که برای استفاده از AJAX طراحی شده بازدید می کند و رویداد پیش بینی شده رخ می دهد (کاربر صفحه را باز می کند، روی دکمه کلیک می کند، فرم را پر می کند و غیره.) JavaScript شی XMLHttpRequest را ایجاد می کند، که سپس داده ها را در XML منتقل می کند. XMLHttpRequest درخواستی برای داده های صفحه به روز شده به سرور وب ارسال می کند، سرور درخواست را پردازش می کند، پاسخ توسط سرور ایجاد می شود و به مرورگر ارسال می شود، سپس از JavaScript برای پردازش پاسخ و نمایش آن بر روی صفحه به عنوان محتوای به روز شده استفاده می شود.

JavaScript فرآیند به روزرسانی را خودکار می کند، درخواست محتوای به روز شده در XML قالب بندی می شود تا آن را به کلی درک کند، و جاوا اسکریپت دوباره شروع به کار می کند تا محتوای مربوطه را برای مشاهده کاربر صفحه بازخوانی کند. Cascarano خاطرنشان می کند که تکنیک AJAX داده های صفحه غیرمجاز را نادیده گرفته و فقط درخواست های اطلاعات به روز شده و خود اطلاعات به روز شده را کنترل می کند. این واقعاً قلب کارآیی AJAX است و باعث می شود وب سایت ها و برنامه هایی که از AJAX استفاده می کنند سریعتر و رسپانسیو برای کاربران باشد.

مثال ایجکس (AJAX)

 <!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

صفحه HTML شامل بخش <div> و یک <button> است. از بخش <div> برای نمایش اطلاعات از سرور استفاده می شود. <button> یک تابع (در صورت کلیک) فراخوانی می کند. این عملکرد داده ها را از سرور وب درخواست می کند و آن را نمایش می دهد:

()Function loadDoc

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
نظرتون درباره این نوشته چیه؟ عالیه بد نیست خوب نبود