کار با AJAX در جاوا اسکریپت

در این مقاله به بیان این موضوع می پردازیم که AJAX چیست و چطور می توان با استفاده از آن در جاوا اسکریپت وبسایت های پویا ایجاد کرد.

AJAX چیست ؟

AJAX (ای جکس) یک زبان برنامه نویسی نیست بلکه یک تکنیک است که به کمک آن می توانیم در بک صفحه وب سایت بارگزاری شده با سرور تبادل اطلاعات انجام دهیم و بدون بارگزاری مجدد اطلاعات بخشی از صفحه را تغییر دهیم.

این تکنیک را به کمک زبان برنامه نویسی جاوا اسکریپت (و فناوری DOM ) و html,css این تکنیک را پیاده سازی میکنیم. در این تکنیک برای تبادل اطلاعات با سرور از فرمت xml یا json می توان استفاده کرد.
نکته : در این آموزش برای تبادل اطلاعات از فرمت JSON استفاده شده.

طرز کار AJAX :

هنگامی که یک رویدادی رخ داد مثلا کاربر روی کلید مورد نظر کلیک کرد. برای ارسال درخواست مورد نظر یک شی جدید XMLHttpRequest در جاوا ایکریپت میسازیم سپس درخواست مورد نظر را ارسال می کنیم . سرور درخواست ما را پردازش کرده و یک پاسخ به سمت ما می فرستد این پاسخ را با جاوا اسکریپت خوانده و با توجه به نیاز خود یک عملیاتی انجام می دهیم مثلا قسمتی از صفحه را بروز می کنیم.

یک مثال :

در این مثال هنگامی که یک درخواست ajax به سرور می دهیم یک پاسخ را به ما بر می گرداند.

```
<!DOCTYPE html>
```
```
<html dir="rtl">
```
```
    <head>        
```
```
        <title> AJAX example</title>
```
```
        <style>
```

            body{background:#eee;text-align:center;font-size:14pt;}

            #msg{font-size:16pt;font-weight:bold;margin:20px auto;border:1px solid lightblue;padding:10px;}

            .mrzx{color:#F0F;font-weight:bold;}

```
        </style>
```
```
    </head>
```
```
    <body>        
```

        <button onclick="getInfo();">دریافت اطلاعات</button>

```
        <div id="msg">
```
```
        </div>
```

        <div class="mrzx"> MRZX.ir </div>

```
        <script>
```
```
            function getInfo(){
```

                var xhttp = new XMLHttpRequest();

                xhttp.open("GET", "getinfo.php", true);

```
                xhttp.send();
```

                xhttp.onreadystatechange=function() {

                    if (this.readyState == 4 && this.status == 200) {

                    document.getElementById("msg").innerHTML = this.responseText;

```
                    }
```
```
                };
```
```
            }
```
```
        </script>
```
```
    </body>
```
```
</html>
```

در تابع getinfo یک شی از نوع XMLHttpRequest ایجاد شده در خط بعدی متد open از این شی فرا خوانده شده و سپس با فراخوانی متد send درخواست مورد نظر ارسال می شود.

متد open(method, url, async) سه پارامتر دارد پارامتر اول نوع درخواست است که میتواند از نوع GET یا POST باشد.پارامتر دوم ادرس و مسیر فایل مورد نظر روی سرور است که قرار است با آن اطلاعات را رد و بدل کنیم.پارامتر سوم مشخص کردن همزمانی یا غیر همزمانی است که بطور پیش فرض مقدار true بعنی غیر همزمان ( آسنکرون) می باشد.

متد send() اطلاعات را به سرور ارسال می کند .

متد onreadystatechange برای تعریف یک تابع هنگامی که مقدار عضو readyState یک تغییری بکند چه رویدادی رخ دهد(این عضو وضعیت درخواست را در خود نگه می دارد و به صورت زیر است:

0: request not initialized /درخواست مقدار دهی اولیه نشده
1: server connection established/ارتباط برقرار است
2: request received / درخواست دریافت شده(از سمت سرور)
3: processing request /درخواست در حال پردازش است
4: request finished and response is ready / درخواست به پایان پذیرفته و پاسخ خوانده شده

عضو status در این شی حاوی مقادیر زیر است :

200: “OK”
403: “Forbidden”
404: “Page not found”

حال در تابعی که تعریف کرده ایم اگر پاسخ دریافت شد و خطایی نداشت آن پاسخ را با یک دستور DOM در جای مناست قرار داده ایم.

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

این مقاله ادامه خواهد داشت…

کار با AJAX در جاوا اسکریپت - وب سایت رضا احمدی