آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

جستجوگر

موضوعات

  • آرشیو برنامه ها
  • امنیتی
  • آنتی ویروس 30
  • ضد جاسوسی 24
  • پاک کننده ها 24
  • برنامه امنیتی 26
  • چند رسانه ای
  • تبدیل فرمت 24
  • رایت و کپی 60
  • پخش کننده 31
  • کدک 21
  • ویرایش ویدئو 26
  • برنامه مالتی مدیا 25
  • گرافیک
  • تبدیل تصاویر 23
  • انیمیشن سازی 20
  • ویرایش عکس 27
  • طراحی 23
  • اینترنت و شبکه
  • مرورگر 27
  • مدیریت دانلود 21
  • مسنجر 19
  • اف تی پی 20
  • مدیریت شبکه 22
  • ابزار شبکه 27
  • ایمیل 19
  • کاربردی
  • فشرده سازی 22
  • پشتیبان گیری 23
  • بازیابی اطلاعات 24
  • بهینه سازی 25
  • ضبط صفحه نمایش 21
  • برنامه کاربردی 45
  • حذف کننده 19
  • برنامه نویسی
  • طراحی وب 26
  • دسکتاپ
  • مدیریت دسکتاپ 17
  • محافظ صفحه نمایش 19
  • ابزار اداری
  • پی دی اف 21
  • ویرایشگر متن 23
  • تبدیل اسناد 19
  • آفیس 19
  • گفتار 17
  • ابزار رسم 18
  • برنامه های ارائه 17
  • نرم افزار اداری 20
  • سیستم عامل
  • سیستم عامل ویندوز 23
  • سیستم عامل لینوکس 19
  • سیستم عامل مک 19
  • آرشیو موزیک
  • اخبار موسیقی 40
  • آلبوم 107
  • تيتراژ 67
  • تک اهنگ 105
  • رمیکس 54
  • عمومی 18
  • فول آلبوم 29
  • موزیک ویدیو 59
  • بی کلام 27
  • نوحه 29
  • موزیک آنلاین 20
  • آرشیو فیلم و سریال
  • اجتماعی 25
  • تاریخی 20
  • ترسناک 25
  • حادثه ای 23
  • خانوادگی 27
  • درام 26
  • مستند 21
  • کمدی 31
  • تخیلی 28
  • اکشن 29
  • کودک و نوجوان 22
  • کارتون و انیمیشن 28
  • دفاع مقدس 14
  • سریال های ایرانی 28
  • سریال های خارجی 20
  • فیلم ایرانی 19
  • آرشيو عکس ها
  • عکس بازیگران 31
  • عکس خواننده ها 23
  • عکس فیلم ها و سریال 20
  • عکس وسایل نقلیه 24
  • تصاویر سه بعدی 21
  • عکس شهر و کشور 24
  • عکس خوردنی 21
  • عکس کودکان 20
  • عکس طبیعت 20
  • عکس حیوانات 21
  • عکس فضا 19
  • عکس ورزشی 21
  • عکس مد و پوشاک 20
  • عکس فانتزی 22
  • عکس دکوراسیون 19
  • عکس بازی 19
  • عکس مذهبی 19
  • عکس عاشقانه 21
  • عکس كاريكاتور 19
  • عکس کارت پستال 19
  • عکس متفرقه وجالب 24
  • عکس بگراند 23
  • عکس والپیپر 19
  • آرشیو وبمستر ها
  • قالب سایت
  • قالب های وردپرس 38
  • قالب های جوملا 22
  • قالب های نیوک 17
  • قالب های دیتالایف 21
  • قالب وبلاگ
  • قالب بلاگفا 26
  • قالب میهن بلاگ 24
  • قالب بلاگ اسکای 23
  • قالب رزبلاگ 23
  • قالب انجمن رزبلاگ 16
  • ابزارهای کاربردی
  • ابزار وبلاگ و سایت 37
  • ابزار زیباسازی 28
  • ترفند ها و آموزش ها 39
  • ابزار حرفه ای وبلاگ 25
  • آرشیو اسکریپت سایت ها
  • آپلودسنتر 24
  • آمارگیر 23
  • اسلایدر 19
  • اشتراك گذاري فايل 21
  • اپلیکیشن فیسبوک 17
  • ایجاد سایتهای موزیک 19
  • بازي انلاين 19
  • تالار گفتگو 18
  • جاوا اسکریپت/ایجکس 17
  • جامعه مجازی 19
  • جستجوی دامنه 19
  • حراجی آنلاین 18
  • خبر خوان 18
  • خبرنامه 19
  • خبرگزاری/خبری 18
  • خدماتی 18
  • دایرکتوری 19
  • دفتر میهمان 8
  • ديگر اسكريپتها 22
  • ساب دومین دهی 7
  • سیستم مدیریت محتوا 18
  • علاقه مندی 17
  • فروشگاه ساز 19
  • فرم ها 17
  • پرسش و پاسخ 18
  • پشتیبانی مشتری 18
  • وبلاگ دهی 18
  • ویرایشگر آنلاین 17
  • ویکی 8
  • لینکدونی 7
  • نظر سنجی 19
  • هاستينگ 18
  • مدیریت آزمون 17
  • مدیریت ایمیل 17
  • مدیریت تبلیغ 19
  • مدیریت دانلود 11
  • مدیریت صورت حساب 18
  • مدیریت پایگاه داده 15
  • مدیریت مدارس 16
  • مدیریت کاربران 16
  • موتور جستجو 18
  • کاریابی انلاین 15
  • کوتاه کننده لینک 16
  • گالری تصاویر 16
  • چت 17
  • اسکریبت های تراوین 10
  • آرشیو اندروید
  • بازیهای اندروید 98
  • نرم افزارهای اندروید 124
  • تلگرام 21
  • واتس اپ 3
  • آرشیو بازی ها
  • بازی های اکشن 56
  • بازی های ماجرایی 35
  • بازی های استراتژیک 32
  • بازیهای ورزشی 23
  • بازی های کودکان 31
  • بازی های فکری 29
  • بازی های مسابقه ای 24
  • کرک بازیهای کامپیوتری 13
  • رفع مشکلات رایج 15
  • آرشیو بازی های آنلاین
  • بازى هاى مرحله اى 22
  • بازى هاى ورزشى 24
  • بازى هاى فکرى 22
  • بازى هاى اکشن 25
  • بازى هاى مسابقه اى 22
  • بازى هاى تيراندازى 22
  • بازى هاى دختران 21
  • بازى هاى کودکان 21
  • آرشیو سرگرمی تفریحی خدماتی
  • اختصاصی سایت 73
  • اس ام اس 32
  • رمان و داستان 43
  • دانستنی جالب و جدید 31
  • طنز جوک و خنده دار 28
  • متن و اشعار عاشقانه 176
  • آهنگ پیشواز ایرانسل 8
  • اخبار 43
  • آموزش 39
  • بخش ویدئو های آنلاین 61
  • هک 14
  • مقاله و پایان نامه 9
  • دیگر مطالب 18
  • شبکه های پرطرفدار

    آخرین ارسالی های انجمن

     آموزش جاوا اسکریپت – 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 بسازید.

    حالا, در مرحله بعدی ارسال درخواست به سرور, ایجاد یک درخواست جدید با متد open() از شیٔ XMLHttpRequest است.

    متد open() معمولا دو پارامتر دریافت می کند – نوع درخواست HTTP که می تواند GET, POST ,..  باشد و دومی نیز آدرس URLی که قصد ارسال درخواست را دارید.

    نکته: فایل می تواند هر نوعی مثل .text, .xml یا اسکریپت های تحت سرور مثل .php, .asp باشد که بعضی عملیات را روی سرور انجام دهد (اضافه یا خواندن داده از دیتابیس)

    در نهایت از متد send() برای ارسال درخواست به سرور استفاده می کنیم.

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

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

     

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

    متد POST اساسا برای ارسال داده های فرم به سمت وب سرور استفاده می شود.

    مثال زیر به شما نحوه ارسال (submit) داده های فرم به سمت سرور را با Ajax در جاوا اسکریپت نشان می دهد.

    اگر از آبجکت FormData برای ارسال داده ها استفاده نکنید. برای مثال, اگر داده ها را در فرمت query string مثل request.send(key1=value1&key2=value2) ارسال کنید, پس نیاز است که هدر درخواست را با متد setRequestHeader() بصورت زیر مشخص کنید :

    متد setRequestHeader() باید بعد از open() و قبل از send() استفاده کنید.

    بعضی از هدرهای درخواست معمول :

    application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml, text/plain, text/html

    نکته: شیٔ FormData یک راه آسان برای ایجاد جفت کلید/مقدار برای نمایش فیلدهای فرم و مقادیر آنها که می توانند با متد XMLHttpRequest.send() ارسال شوند, ارایه می دهد.

    کد فایل confirmation.php مقادیر ارسال شده توسط کاربر را در خرورجی برگشت می دهد.

    بنابر دلایل امنیتی, مرورگرها اجازه ارسال درخواست های Ajax بین دامنه ها را نمی دهند. به این معنا که فقط می توانید یک درخواست Ajax را از آدرس های URL همان دامنه به عنوان صفحه اصلی ارسال کنید.

    برای مثال, اگر اپلیکیشن شما روی دامنه “mysite.com” در حال اجرا است, نمی توانید یک درخواست ایجکس را از دامنه mysite.com به othersite.com یا هر دامنه دیگر ارسال کنید که به عنوان قانون same origin شناخته می شود.

    به هر حال, می توانید تصاویر, استایل ها, فایل های JS و دیگر منابع را از هر دامنه ای لود کنید.

    نکته: متد های Ajax در جی کویری را هم می توانید برای پیاده سازی سریع ایجکس بررسی کنید. فریمورک jQuery متدهای راحتی را برای پیاده سازی قابلیت Ajax ارایه داده است.

     

    امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش Ajax در جاوا اسکریپت نهایت استفاده را برده باشد.

    هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

    موفق باشید.

    برچسب ها

    ارسال نظر

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی

    نظرات ارسال شده

    ممکن است به این موارد نیز علاقه مند باشید:

    برنامه های ضروری ویندوز

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

    آمارگیر

    • :: آمار مطالب
    • کل مطالب : 4782
    • کل نظرات : 85
    • :: آمار کاربران
    • افراد آنلاين : 77
    • تعداد اعضا : 815
    • :: آمار بازديد
    • بازديد امروز : 3,637
    • بازديد ديروز : 17,142
    • بازديد کننده امروز : 1220
    • بازديد کننده ديروز : 4918
    • گوگل امروز : 615
    • گوگل ديروز: 2204
    • بازديد هفته : 97,307
    • بازديد ماه : 191,270
    • بازديد سال : 7,027,943
    • بازديد کلي : 16,205,963
    • :: اطلاعات شما
    • آي پي : 3.236.15.142
    • مرورگر :
    • سيستم عامل :

    چی شد که سر از گود دانلود درآوردی؟





    بخش تبلیغات بک لینک سایت