pure javascript send post no jquery

1const data = JSON.stringify({
2  example_1: 123,
3  example_2: 'Hello, world!',
4});
5
6fetch('example.php', {
7  method: 'POST',
8  headers: {
9    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
10  },
11  body: data,
12}).then(response => {
13  if (response.ok) {
14    response.text().then(response => {
15      console.log(response);
16    });
17  }
18});
19

1/*create an XMLHttpRequest object*/
2
3let GethttpRequest=function(){  
4  let httpRequest=false;
5  if(window.XMLHttpRequest){
6    httpRequest   =new XMLHttpRequest();
7    if(httpRequest.overrideMimeType){
8    httpRequest.overrideMimeType('text/xml');
9    }
10  }else if(window.ActiveXObject){
11    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
12  }catch(e){
13      try{
14        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
15      }catch(e){}
16    }
17  }
18  if(!httpRequest){return 0;}
19  return httpRequest;
20}
21
22  /*Defining a function to make the request every time when it is needed*/
23
24  function MakeRequest(){
25
26    let uriPost       ="myURL";
27    let xhrPost       =GethttpRequest();
28    let fdPost        =new FormData();
29    let date          =new Date();
30
31    /*data to be sent on server*/
32    let data          = { 
33                        "name"      :"name",
34                        "lName"     :"lName",
35                        "phone"     :"phone",
36                        "key"       :"key",
37                        "password"  :"date"
38                      };
39
40    let JSONdata =JSON.stringify(data);             
41    fdPost.append("data",JSONdata);
42    xhrPost.open("POST" ,uriPost, true);
43    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
44    xhrPost.onloadstart = function (){
45      /*do something*/
46    };
47    xhrPost.onload      = function (){
48      /*do something*/
49    };
50    xhrPost.onloadend   = function (){
51      /*do something*/
52    }
53    xhrPost.onprogress  =function(){
54      /*do something*/
55    }
56
57    xhrPost.onreadystatechange =function(){
58
59      if(xhrPost.readyState < 4){
60
61      }else if(xhrPost.readyState === 4){
62
63        if(xhrPost.status === 200){
64
65          /*request succesfull*/
66
67        }else if(xhrPost.status !==200){
68
69          /*request failled*/
70
71        }
72
73      }
74
75
76   }
77  xhrPost.ontimeout = function (e){
78    /*you can stop the request*/
79  }
80  xhrPost.onerror = function (){
81    /*you can try again the request*/
82  };
83  xhrPost.onabort = function (){
84    /*you can try again the request*/
85  };
86  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
87  xhrPost.setRequestHeader("Content-disposition", "form-data");
88  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
89  xhrPost.send(fdPost);
90}
91
92/*PHP side
93<?php
94  //check if the variable $_POST["data"] exists isset() && !empty()
95  $data        =$_POST["data"];
96  $decodedData =json_decode($_POST["data"]);
97  //show a single item from the form
98  echo $decodedData->name;
99
100?>
101*/
102
103/*Usage*/
104MakeRequest();
105