Making Request Using XMLHttpRequest

XMLHttpRequest API is used heavily in ajax request, it is an older form of making client requests.

Browser Compability of XMLHttpRequest API

While it is an old API, it has widely support among browsers, you can inspect detailed compability table from here

JSON Request Using XMLHttpRequest API

Let's make a simple request

<script>
    let httpRequest = new XMLHttpRequest();

    httpRequest.open('POST', 'https://formcarry.com/s/yourFormId');
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    httpRequest.setRequestHeader('Accept', 'application/json');
    httpRequest.send(JSON.stringify({name: 'Alex', surname: 'Moran'}));

    httpRequest.onreadystatechange = function(){
      if(this.readyState == 4){
        // when request is complete.
        console.log(this.response);
      }
    }
</script>

Output:

{"code":200,"status":"success","title":"Thank You!","message":"We received your submission"}

To try it, just change the url to your forms url.

FormData Request Using XMLHttpRequest API

Let's make a simple request

<script>
    let httpRequest = new XMLHttpRequest();
    let formData = new FormData();

    formData.append('name', 'Alex');
    formData.append('surname', 'Moran');

    httpRequest.open('POST', 'https://formcarry.com/s/yourFormId');
    httpRequest.setRequestHeader('Accept', 'application/json');
    httpRequest.send(formData);

    httpRequest.onreadystatechange = function(){
      // Resource: https://developer.mozilla.org/tr/docs/Web/API/XMLHttpRequest/readyState

      // readyState
      // 0 = UNSENT
      // 1 = OPENED
      // 2 = HEADERS_RECEIVED
      // 3 = LOADING
      // 4 = DONE
      
      if(this.readyState == 4){
        // when request is complete.
        console.log(this.response);
      }
    }
</script>

Output:

{"code":200,"status":"success","title":"Thank You!","message":"We received your submission"}