javaScriptImportant.js

// GET -- GET -- GET-- GET -- GET-- GET -- GET-- GET -- GET-- GET -- GET-- GET -- GET-- GET -- GET-- GET -- GET
const xhr = new XMLHttpRequest();
const url = 'http://api-to-call.com/endpoint';
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.response);
  }
};
xhr.open('GET', url);
xhr.send();
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//

// POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST -- POST 
const url = 'http://api-to-call.com/endpoint';
const data = JSON.stringify({
  id: '200'
});
xhr.responseType = 'json';
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(xhr.response);
  }
};
xhr.open('POST', url);
//xhr.setRequestHeader('Content-Type', 'application/json');   //optional
xhr.send(data);
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//


// JQUERY IMPORT HTML -- JQUERY IMPORT HTML -- JQUERY IMPORT HTML -- JQUERY IMPORT HTML -- JQUERY IMPORT HTML
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>

// JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET -- JQUERY GET
$.ajax({
  url:'https://api-to-call.com/endpoint',
  type: 'GET',
  dataType: 'json',
  success(response){
    console.log(response);
  },
  error(jqXHR,status,errorThrown) {
    console.log(jqXHR);
  }
});

//OR THE SIMPLE WAY
$.get('https://api-to-call.com/endpoint', response => {...}, 'json');

//OR FOR ONLY JSON TYPE
$.getJSON('https://api-to-call.com/endpoint', response => {...});
                                                       
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//

// JQUERY POST -- JQUERY POST -- JQUERY POST -- JQUERY POST -- JQUERY POST -- JQUERY POST -- JQUERY POST -- JQUERY POST
$.ajax({
  url:'https://api-to-call.com/endpoint',
  type: 'POST',
  data: JSON.stringify({id:200}),
  dataType: 'json',
  success(response){
    console.log(response);
  },
  error(jqXHR,status,errorThrown) {
    console.log(jqXHR);
  }
});
                                                       
//OR THE SIMPLE WAY
$.post('https://api-to-call.com/endpoint', {data}, response => {...}, 'json');
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//
                                                                
                                                                
                                                                
// ADVANCED USING FETCH -- ADVANCED USING FETCH -- ADVANCED USING FETCH -- ADVANCED USING FETCH -- ADVANCED USING FETCH
// https://github.com/github/fetch
// not all browsers support this

// FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET -- FETCH GET 
fetch('url')
  .then(response => {
    if(response.ok){
      return response.json()  //convert response object in json
    }
    throw new Error('Request failed!'); // handle errors
  },
  networkError => console.log(networkError.message) // handle errors
  ).then(jsonResponse => {
    ....      //handle sucess
  });
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//
                                                                
// FETCH POST -- FETCH POST -- FETCH POST -- FETCH POST -- FETCH POST -- FETCH POST -- FETCH POST
  fetch('url',{
    method: 'POST',
    /*headers: {
 				"Content-type": "application/json"  //optional
		},
    */ 
    body: JSON.stringify({id: 200})
  }).then(response => {
      if(response.ok){
        return response.json()
      }
      throw new Error('Request failed!');
    },
    networkError => console.log(networkError.message)
    ).then(jsonResponse => {
      //handle response on success
    });
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//
                                                                
// ASYNCRONOUS GET -- ASYNCRONOUS GET -- ASYNCRONOUS GET -- ASYNCRONOUS GET -- ASYNCRONOUS GET -- ASYNCRONOUS GET
     async function getData() {
      try {
        let response = await fetch('url');
        if(response.ok){
          let jsonResponse = await response.json();
          //handle json response
        }
        throw new Error('Request Failed');
      } catch (error){
        console.log(error);
      }
    }
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//
                                                                
 // ASYNCRONOUS POST -- ASYNCRONOUS POST -- ASYNCRONOUS POST -- ASYNCRONOUS POST -- ASYNCRONOUS POST -- ASYNCRONOUS POST
     async function getData() {
      try {
        let response = await fetch('url',{
              method: 'POST',
              /*headers: {
                  "Content-type": "application/json"  //optional
              },
              */ 
              body: JSON.stringify({id: 200})
        });
        if(response.ok){
          let jsonResponse = await response.json();
          //handle json response
        }
        throw new Error('Request Failed');
      } catch (error){
        console.log(error);
      }
    }
//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//--//