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

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

در قسمت قبل کار با AJAX در جاوا اسکریپت را بطور کلی همراه با یک مثال بررسی کردیم. در این قسمت متد های بیشتر و مثال های کاربردی تر ای جکس را بررسی می کنیم.

برسی پاسخ های یک درخواست ای جکس :

هنگامی که ما شی از کلاس XMLHttpRequest می سازیم با یک صفت از این شی به نام xhr.responseType رو برو هستیم در این صفت میتوان فرمت پاسخی که سرور به ما می دهد را تنظیم کنیم. این فرمت ها به شرح زیر است:

"" (default) – بصورت پیشفرض یک رشته است,
"text" – تنظیم پاسخ بصورت یک رشته,
"arraybuffer" – تنظیم بصورت یک ArrayBuffer
"blob" – تنظیم بصورت اعداد باینری یا دودوئی
,"document" – تنظیم پاسخ بصورت xml
"json" –تنظیم پاسخ بصورت json

به مثال زیر دقت کنید :

```
function getInfo(){
```
```
    var xhttp = new XMLHttpRequest();
```

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

```
    xhttp.responseType="json";
```
```
    xhttp.send();
```

    xhttp.onreadystatechange=function() {

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

            let res=this.response;// the response is {"message": "Hello, world!"}

            document.getElementById("msg").innerHTML = res.message;//Hello, world!

```
        }
```
```
    };
```
```
}
```

در خط 4 نوع پاسخ یک فرمت json تنظیم شده است در این صورت هنگامی که پاسخ را به یک متغییر نسبت می دهیم آن متغییر مانند یک شی جی سان عمل می کند و می توانیم به هر کدام از اشیا درون این ابجکت دستری پیدا کرده در خط 9 گفته شده شی message را نمایش یده که این شی محتوای Hello, worl! است.

فرستادن محتویات یک فرم به سرور :

فرض کنید یک فرم به نام person داریم که شامل دو تکست باکس به نام های name , surname می باشد می خواهیم این فرم را به سرور ارسال کنیم و پاسخ سرور را نمایش دهیم.

```
function sendMyForm()
```
```
{
```
```
  // pre-fill FormData from the form
```

  let formData = new FormData(document.forms.person);

```
 
```
```
  // send it out
```
```
  let xhttp = new XMLHttpRequest();
```

  xhttp.open("POST", "user.php", true);

```
  xhttp.send(formData);
```
```
  xhttp.onreadystatechange=function() {
```

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

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

```
      }
```
```
  };
```
```
}
```

همانطور که می بینید با استفاده از ajax محتویات فرم person را اسال کرده ایم. و در انتها همین مثال را اینبار بصورت یک فایل json ارسال میکنیم.

```
let xhr = new XMLHttpRequest();
```
```
 
```
```
let json = JSON.stringify({
```
```
  name: "John",
```
```
  surname: "Smith"
```
```
});
```
```
 
```
```
xhr.open("POST", '/submit')
```

xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

```
 
```
```
xhr.send(json);
```

دقت نمایید که در خط 9 نوع درخواست ما یک فایل جی سان با فرمت utf-8 تنظیم شده .

منابع این مقاله :

https://javascript.info/xmlhttprequest
https://www.w3schools.com/js/js_ajax_http.asp

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