بخشی از پاورپوینت

--- پاورپوینت شامل تصاویر میباشد ----

اسلاید 1 :

The usual way we operate in the Web

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

اسلاید 2 :

Things change…

  • اخیرا روش مناسبی برای جایگزینی با متدبارگذاری/انتظار/پاسخ به اسم Ajax مطرح گردیده است.
  • در آژاکس بدون اینکه فرمی ارسال شود یا صفحه جدیدی بارگذاری شود، با استفاده از JavaScript با سرور ارتباط برقرار می گردد .
  • آژاکس برای انجام این کار از یک شئ به نام XMLHttpRequestاستفاده می کند.
  • این شئ هنوز جزء استاندارد DOM (Document Object Model) نیست. اما هر کدام از مرورگرها به طرق متفاوتی از آن پشتیبانی می کنند.
  • کلمه آژاکس در سال 2005 مطرح شد اما شئ XMLHttpRequest از سالها قبل توسط IE پشتیبانی می شد.

اسلاید 3 :

Ajax

Ajax مخفف کلمه Asynchronous JavaScript and XML است.

استفاده معمول از آژاکس بصورت زیر است:

.1JavaScript یک شئXMLHttpRequest ایجاد می کند و قسمتهای مختلف آنرا  مقدار دهی می کند. سپس آنرا به سرور می فرستد. اسکریپت و صفحه حاوی آن می توانند بعد از ارسال شئ به سرور ادامه پیدا کنند.

.2سرور با ارسال متن یک فایل یا خروجی یک زبان اسکریپتی سمت سرور، به مشتری جواب می دهد.

.3وقتی جواب به مقصد رسید، یک تابع JavaScript فعال می شود تا روی داده های ارسالی سرور عمل نماید.

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

اسلاید 4 :

The Back End

  • به آن قسمت از آژاکس که در وب سرور قرار دارد back end گفته می شود.
  • این back end می تواند یک فایل باشد که سرور آنرا به مشتری می فرستد و بعدا به مشتری نشان داده می شود.
  • یا می تواند یک برنامه باشد که به زبان PHP، Perl، Ruby، Python یا C نوشته شده است. خروجی این برنامه به مرورگر مشتری فرستاده می شود.
  • شئ XMLHttpRequestبرای ارسال اطلاعات از متدهای GET و POST استفاده می کند. (درست مثل فرمهای HTML)
  • متد GET اطلاعات ارسالی را داخل URL جاسازی می کند. در حالیکه متد POST آنها را جداگانه می فرستد. لذا POST می تواند مقدار بیشتری اطلاعات بفرستد.

اسلاید 5 :

Writing an Ajax application

  • قسمت front end کاربردهای آژاکس به زبان JavaScript نوشته می شود.
  • قسمت back end درخواست را پردازش کرده و پاسخ را به مشتری بر می گرداند. معمولا back end یک برنامه کوتاه است که یک کار مشخص را انجام میدهد.
  • همچنین نیاز است که یک تابع JavaScript نوشته شود تا پاسخ back end را پردازش نماید و نتایج را نشان دهد.
  • حرف x در کلمه Ajax نماینده XML است. XML (eXtensible Markup Language) شبیه HTML است. قسمت back end می تواند نتیجه را بصورت XML برگرداند. در طرف مشتری می توان با استفاده از توابع پیش ساخته موجود در JavaScript کد XML را پردازش کرد. بعلاوه قسمت back end می تواند متن ساده، کد HTML و یا کد JavaScript بفرستد.

اسلاید 6 :

The XMLHttpRequest object

شئ XMLHttpRequestستون فقرات متد آژاکس است. هر کاربردی باید یک نمونه از این شئ را ایجاد کند.

این موضوع کاملا به نوع مرورگر وابسته است.

در مرورگرهای Firefox، Safari و Opera می توان یک نمونه از این شئ را به طریق زیر ایجاد نمود:

      

       <script type=“text/javascript”>

              ajaxRequest = new XMLHttpRequest();

   

    </script>

اسلاید 7 :

The XMLHttpRequest object (cont.)

  • اما مرور گر IE این شئ را توسط تکنولوژی ActiveX پشتیبانی می کند. لذا نحوه ایجاد شئ متفاوت است و حتی به نسخه مرورگر نیز ارتباط دارد.
  • برای اینکه مشکل تفاوت مرورگرها را حل کنیم ما از دستور زیر استفاده می کنیم:
  • try { . . . } catch (error) { . . . }
  • دستور try سعی می کند یک کد JavaScript را اجرا کند. اگر در حین اجرا خطایی رخ دهد، قبل از اینکه خطا موجب سقوط JavaScript شود قسمت Catch دخالت می نماید.
  • برای ایجاد شئ XMLHttpRequestما از دنباله ای از دستورات try…catch استفاده می نماییم و راه های مختلف ایجاد شئ XMLHttpRequestرا امتحان می کنیم.     

اسلاید 8 :

The XMLHttpRequest object (cont.)

function getXMLHttpRequest()

/*   This function attempts to get an Ajax request object by trying

     a few different methods for different browsers.  */

{

   var request, err;

   try {

          request = new XMLHttpRequest();   // Firefox, Safari, Opera, etc.

       }

   catch(err) {

       try {             //  first attempt for Internet Explorer

          request = new ActiveXObject("MSXML2.XMLHttp.6.0");

           }

       catch (err) {

                      try {    //  second attempt for Internet Explorer

                      request = new ActiveXObject("MSXML2.XMLHttp.3.0");

                          }

                      catch (err) {

                           request = false;  // oops, can’t create one! 

                                  }

                   }

              }

   return request; 

}

اگر تابع فوق مقدار false بر نگرداند فرآیند ایجاد شئ XMLHttpRequest با موفقیت انجام شده است.

اسلاید 9 :

The XMLHttpRequest object (cont.)

  • شئ شامل متدها و خواص متعددی است.
  • لیستی از مهمترین خواص و متدهای این شئ در صفحه بعد آورده شده است.
  • ایده اصلی این است که بعد از ایجاد شئ خواص آن تنظیم می گردند. این خواص شامل نحوه ارسال اطلاعات به سرور و نحوه پردازش جواب سرور است. بعضی از خواص شئ توسط سرور تنظیم می شوند و وضعیت جواب سرور را مشخص کنند.

اسلاید 10 :

    Property              Description                                         

readyState             An integer from 0. . .4.  (0 means the call

                       is uninitialized, 4 means that the call is

                       complete.)

onreadystatechange     Determines the function called when the

                       objects readyState changes.

responseText           Data returned from the server as a text

                       string (read-only).

responseXML            Data returned from the server as an XML 

                       document object (read-only).

status                 HTTP status code returned by the server

statusText             HTTP status phrase returned by the server

از روی readyState می فهمیم که آیا درخواست جواب داده شده است یا نه؟سپس با چک کردن status وضعیت جواب را بررسی می کنیم.

در متن اصلی پاورپوینت به هم ریختگی وجود ندارد. برای مطالعه بیشتر پاورپوینت آن را خریداری کنید