• آموزش Ajax در 5 دقیقه!
    #1
    Note 
    سلام دوستان
    امروزه بازار Ajax و کلا جاوا اسکریپت خیلی داغه. کمتر سایتی پیدا میشه که توش از Ajax استفاده نشده باشه این شد که تصمیم گرفتم این آموزش کوچیک رو بنویسم امیدوارم مفید باشه.
    درحالت معمولی برای یک تغییر هر چند کوچیک در صفحه وب مجبورید کل صفحه رو Reload کنید. تا چند سال پیش این مشکل وجود داشت تا اینکه Ajax معرفی شد. Ajax این مشکل رو پوشونده و شما میتونید بدون بارگذاری مجدد صفحه در اون تغییرات بدید.

    برای اطلاعات بیشتر به این تاپیک مراجعه کنید [ ].

    در ادامه نحوه استفاده ازAjax در صفحه رو با هم یاد میگیریم.

    پاسخ
    #2
    Note 
    ما در این پست بصورت عملی یک تمرین انجام میدیم و در نهایت هم اون رو برای دانلود میذاریم.
    ابتدا باید یه کتابخانه ساده Ajax بنویسیم ، در مرحله دوم یک صفحه ازمایشی درست کنیم و بعد تابع رو برای ارسال یک درخواست AJAX صدا کنیم تا محتویات فایل سوم در فایلمون بارگذاری بشه.

    برای آزمایش ما به سه فایل نیاز داریم:

    • ajax.js
    • index.html
    • pageToLoad.html

    محتویات فایل ajax.js:

    [JS]/*
    ** Softafzar.net | Developers home_
    */
    function AJAX_Request(URL, ELEM, MESSAGE) {
    document.getElementById(ELEM).innerHTML = MESSAGE;
    try {
    req = new XMLHttpRequest(); /* e.g. Firefox */
    } catch(e) {
    try {
    req = new ActiveXObject("Msxml2.XMLHTTP");
    /* some versions IE */
    } catch (e) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    /* some versions IE */
    } catch (E) {
    req = false;
    }
    }
    }

    req.onreadystatechange = function() {responseAJAX(ELEM);};
    req.open("GET",URL,true);
    req.send(null);
    }

    function responseAJAX(ELEM) {
    var output = '';
    if(req.readyState == 4) {
    if(req.status == 200) {
    output = req.responseText;
    document.getElementById(ELEM).innerHTML = output;
    }
    }
    }[/JS]

    محتویات فایل index.html:

    [HTML]<html>
    <head>
    <title>Learn AJAX in 10 minutes! Softafzar.net</title>
    <script src="ajax.js" type="text/javascript"></script>
    </head>
    <body>
    <button onclick="AJAX_Request('pageToLoad.html', 'content','Please Wait...')">Show message</button>
    <div id="content">
    </div>
    </body>
    </html>[/HTML]

    و محتویات فایل pageToLoad.html:

    [HTML]<br/>HELLO!<br/>
    PLEASE VISIT OUR TUTORIAL CENTER<br/>
    <img src="http://www.softafzar.net/tc/wp-content/themes/cyangant2/images/logo.png">[/HTML]

    همونطور که میبینید ما سه پارامتر برای تابع AJAX_Request در نظر گرفتیم:

    URL: ادرس فایلی که باید بارگذاری بشه رو مشخص میکنه.
    ELEM: المنتی که محتویات باید در اون نمایش داده بشه رو مشخص میکنه.
    MESSAGE: پیامی که در زمان بارگذاری باید نمایش داده بشه رو مشخص میکنه میتونه متن ، عکس و... باشه.

    حالا فایل index.html رو اجرا کنید تا نتیجه رو ببینید.

    دانلود فایلها:
    کد:
    http://www.s1.softafzar.net/uploads/201401061389033581ajax[softafzar.net].rar

    اگر سوالی دارید حتما بپرسید.
    موفق باشید.

    پاسخ
    #3
    Note 
    سلام سایت بسیار خوبی دارید
    کد بدرستی اجرا نمیشه Please Wait... فقط میاد

    پاسخ
    #4
    Note 
    Ramin000 نوشته است:سلام سایت بسیار خوبی دارید
    کد بدرستی اجرا نمیشه Please Wait... فقط میاد
    سلام
    باید در محیط اینترنت یا لوکال هاست اجراش کنی.

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    موضوعات مرتبط با این موضوع...
    موضوع نویسنده پاسخ بازدید آخرین ارسال
    Note Jquery Ajax navigation WWWorker 0 669 14-08-2014 ساعت 17:19
    آخرین ارسال: WWWorker
    Note کتاب آموزش node.js C0der 0 750 11-03-2014 ساعت 14:16
    آخرین ارسال: C0der
    Note آموزش جی کوئری: ایجاد تاخیر در انجام دستورات با Delay WWWorker 0 588 01-01-2014 ساعت 20:02
    آخرین ارسال: WWWorker
    Note آموزش جی کوئری: CSS WWWorker 0 340 31-12-2013 ساعت 21:05
    آخرین ارسال: WWWorker
    Note آموزش جی کوئری: رویداد Click WWWorker 0 348 31-12-2013 ساعت 20:55
    آخرین ارسال: WWWorker
    Note آموزش جی کوئری: انیمیشن WWWorker 0 335 31-12-2013 ساعت 20:51
    آخرین ارسال: WWWorker
    Note آموزش جی کوئری: اضافه یا حذف Class WWWorker 0 548 31-12-2013 ساعت 20:40
    آخرین ارسال: WWWorker
    Note آموزش جی کوئری: اضافه کردن المنتهایی به المنت موجود WWWorker 0 425 31-12-2013 ساعت 20:34
    آخرین ارسال: WWWorker
    Note Ajax: چک کردن موجود بودن عکس در داکیومنت WWWorker 0 703 11-10-2013 ساعت 09:45
    آخرین ارسال: WWWorker
    Note اصول تکنیک ای جکس AJAX Stack OverFlow 0 396 27-06-2013 ساعت 14:34
    آخرین ارسال: Stack OverFlow

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان