آموزش Ajax در 5 دقیقه!

JavaScript

توسط reza-irdev در 6 سال پیش
0 38.4k 3 6 سال پیش
reza-irdev ramin000 daniel
0

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

برای اطلاعات بیشتر به این تاپیک مراجعه کنید [ [url]http://www.softafzar.net/thread686.html/[/url] ].

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

0

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

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

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

محتویات فایل ajax.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;
            }
       }
   }

محتویات فایل index.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>

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

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

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

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

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

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

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

0

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

0

> سلام سایت بسیار خوبی دارید کد بدرستی اجرا نمیشه Please Wait... فقط میاد
سلام باید در محیط اینترنت یا [_**لوکال هاست**_](http://www.softafzar.net/thread10.html/) اجراش کنی.

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید