illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

سری آموزشی Ajax – جلسه چهارم : XMLHttpRequest

9 7154 ۳۱ فروردین ۹۳

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

در جلسه ی پیش ما با زبان XML آشنا شدیم، در این جلسه، شروع به یادگیری Ajax و طریقه ی ایجاد یک Request ، اجزاء سازنده ی یک درخواست، متد ها و .... خواهیم پرداخت پس با ما همراه باشید.

XMLHttpRequest

اولین چیزی که درمورد XMLHttpRequest باید بدانید، طریقه نوشتن آن است! (به حروف کوچک و بزرگ دقت کنید.) زیرا  همانطور که میدانید جاوااسکریپت به حروف کوچک و بزرگ حساس است پس نوشتن این عبارت به شکل های دیگر، باعث از کار افتادن کدهای شما می شود.

خب، XMLHttpRequest یک شئ (Object) از پیش ساخته ی جاوااسکریپت است، که با استفاده از آن می توان درخواست هایی به سرور ارسال و بدون لود مجدد صفحه نتیجه را نمایش داد. این شئ همانند سایر اشیاء دارای propertyهایی نیز هست، که برای کنترل درخواست از آن ها استفاده می شود.

پنج property مهم XMLHttpRequest عبارتند از :

  • readyState
  • responseText
  • responseXML
  • status
  • statusText

readyState

این property نمایش وضعیت درخواستی که ما ارسال کرده ایم را به عهده دارد. به این صورت که چهار مقدار زیر را به ترتیب بر می گرداند

  • 0 : مقدار صفر مقدار پیشفرض این property است و به این معناست که "هنوز درخواستی ارسال نشده".
  • 1 : در هنگام ارسال درخواست این propery مقدار 1 را در خود ذخیره می کند و به معنای "در حال ارسال درخواست" است.
  • 2 : پس از ارسال کامل درخواست این مقدار در readyState ذخیره می شود که به معنای "درخواست به طور کامل ارسال شد" است.
  • 3 : هنگامی که سرور به درخواستی که ما ارسال کرده ایم به سرور برسد و سرور واکنش نشان دهد. این مقدار درون readyState ذخیره می شود.
  • 4 : زمانی که سرور درخواست ما به طور کامل دریافت کرد، این مقدار درون readyState ذخیره میشود و به این معناست که درخواست شما دریافت شد.

status

این propery وضعیت درخواست ما را بعد از دریافت و پردازش آن نمایش می دهد. که مقادیر مختلفی را بر می گرداند که مهم ترین، و عمده ترین آن ها شش مقدار زیر است:

  • 200 : OK = به این معناست که درخواست به خوبی پردازش شد.
  • 400 : Bad Request = درخواست نامعتبر است.
  • 401 : Unauthorized = درخواست شما غیر مجاز است.
  • 402 : Forbidden = ارسال کننده ی درخواست، دسترسی کافی را ندارد.
  • 404 : Not Found = دادهای جهت پردازش یافت نشد.
  • 500 : internal server error = وجود مشکل در سرور.
نکته : هنگامی که مقدار 4 در readystate و مقدار 200 در status باز گردانده شود، به معنای ارسال، تحویل و پردازش کامل درخواست ماست.

خب حال بیاید یک شئ XHR (مخفف XMLHttpRequest)بسازیم تا بتوانیم درخواستی را ارسال و اطلاعاتی را دریافت کنیم.

ایجاد درخواست

کدهای html زیر را در نظر بگیرید : (یک فایل با نام index.html ایجاد کرده و کدهای زیر رو درون اون کپی کنید.)

نتیجه کد فوق در مرورگر :

simple-example-p1کاری که می خواهیم انجام دهیم این است که موقع کلیک بر روی دکمه ی فراخوانی، با استفاده از Ajax متنی را از یک فایل گرفته و آن متن را در تگ div نمایش دهیم.

نکته : ممکن است کدهای برنامه ی ajax ما کار نکنند به همین دلیل برای رفع مشکل، کدهاتون رو بر روی localhost اجرا کنید. 

خب حال نوبت کدهای جاوا اسکریپت می رسد.

نکته : میتونید کدهای زیر رو درون خود فایل index.html بنویسید یا یک فایل js ایجاد کرده، کدهای زیر رو درون اون نوشته و فایل رو به سند html متصل کنید

اولین کار ایجاد شئ XHR است. برای اینکار کدهای زیر را می نویسیم :

در خط شماره ی 1 ابتدا یک فانکشن ایجاد کرده ایم (کدهای ajax رو درون این فانکشن خواهیم نوشت.) در خط شماره 2 یک متغییر جهت ذخیره درخواست در آن، تعریف کردیم. سپس در خط شماره ی سه یک شرط گذاشته ایم که اگر مرورگر ما از XMLHttpRequest پشتیبانی می کند شئ XMLHttpRequest را درون متغییر request قرار بده. در غیر اینصورت شئ ActiveXObject را درون متغییر قرار بده. دلیل اینکار این است که مرورگرهای قدیمی (IE5 , IE6 و ...) جهت ایجاد یک درخواست ajax از شئ ActiveXObject بجای XHR استفاده می کنند.

خب حال شئ XHR ما ایجاد شد.

حال درخواستمان را که دسترسی به یک فایل است را ارسال می کنیم. (البته همه درخواست های Ajax به همین منوال هستند و فقط فایلی که به آن دسترسی پیدا می کنیم و اطلاعات را از آن می گیریم فرق می کند.)

خب ابتدا یک فایل txt ایجاد کنید و اون رو در کنار فایل index.html قرار دهید. درون فایل هم هر متنی که دلتان میخواهد نمایش داده شود بنویسید.

سپس کد زیر رو بعد از کدهای فوق (بعد از else قرار دهید، یعنی درون فانکشن) قرار می دهیم.

خب همانطور که می بینید، ما از متد open که مخصوص شئ XHR است و جهت دسترسی به فایل ها استفاده می شود، استفاده کرده ایم.

این متد سه پارامتر را می گیرد. (البته فعلا از دو پارامتر استفاده کرده ایم. در آینده پارامتر سوم رو توضیح خواهم داد.)

پارامتر اول متد درخواست ماست، که می تواند GET یا POST باشد. که حتما فرق این دو متد رو می دونید. و پارامتر دوم، نام فایلی که میخواهیم اطلاعات را از آن بگیریم است، فایل من myfile.txt است.

بعد از دسترسی به فایل حال بایستی  اول چک کنیم که اگر درخواست ما به درستی ارسال شده است آنگاه متن فایل را در مکان مورد نظر نمایش دهیم.

خب در خط اول تعیین کرده ایم هنگامی که readystate شئ XHR ما تغییر وضعیت داد (با استفاده از متد onreadystatechange این را مشخص کرده ایم.) یک فانکشن ایجاد کن و درون فانکشن شرط گذاشته ایم که اگر readyState برابر با 4 یعنی سرور درخواست را دریافت و status برابر با 200 یعنی درخواست به درستی پردازش شد یک متغییر با نام result ایجاد کن و المنت با آیدی result رو درونش ذخیره کن سپس در خط بعدش innerHTML این المنت را برابر با responseText شئ XHR قرار بده. responseText اطلاعات دریافت شده از فایلی که به آن دسترسی پیدا کرده ایم را درون خود دخیره می کند. در آخر هم درخواست را ارسال کرده ایم!

بعد از نوشتن کدهای javascript کدهای فایل index.html ما به صورت زیر خواهد بود :

حال در صورت اجرای کد و کلیک بر روی دکمه فراخوانی تغییری ایجاد نخواهد شد!!! برای کار کردن کد در رویداد کلیک (onclick) دکمه، فانکشن loadAjax() را فراخوانی می کنیم :

حال کد را اجرا کنید....

می بینید که محتویات فایلتان درون تگ div جایگزین متن قبلی شدند. بدون ریفرش و یا انتقال به صفحه دیگر!

اینم از اولین برنامه ی ما. خسته نباشد.

در جلسه آینده کارهای پیشرفته تری را انجام خواهیم داد.

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

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 9 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمد اسفندیاری(۳۱ فروردین ۱۳۹۳)

    ممنونم از آموزش خوبتون.

  • ‏‏

    این سری آموزشی دیگه ادامه نداره ؟

  • ‏‏

    سلام .
    من کلا از onreadystatechange نمی تونم سر در بیارم .
    یعنی چی ؟

  • ‏‏
    علی بلالی(۹ تیر ۱۳۹۳)

    مباحث پیشترفتش توی سایت نیست ؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram