AJAX and JavaScript with examples

var output = document.getElementById("output");
var btn = document.getElementById("btn1");
var select = document.getElementById("position");

/* the part where the selected option from the dropdown is stored */
var selectPosition= "director";
select.addEventListener("change", function(){
  selectPosition= select.options[select.selectedIndex].value;
}) 

/* Event handler on the button */
btn.addEventListener("click", function() {
  /* Cleaning the screen */
  output.innerHTML="";
  /* New XMLHttpRequest object */
  var httpRequest = new XMLHttpRequest();
  /* EventHandler for ajax request */
  httpRequest.addEventListener("load", function(){
    if (this.status < 400) {
      /* Data obtained by ajax */
      var myObj = JSON.parse(this.responseText);
      /* Print only selected positions */
      var SelectArray= myObj.filter(function (obj) {
          return obj.position== selectPosition;    
      });
       for (let select in SelectArray) {
          output.innerHTML += SelectArray[select].position + " " + SelectArray[select].name+ "<br>";
      }
    } else {
      var errors= new Error("Request failed: " + httpRequest.statusText);
      console.log("Server is OK but some transport error");
    }
  }, false);
  /* Opening a connection and defining parameters */
  httpRequest.open("GET", "https://api.myjson.com/bins/erxi9", true);
  httpRequest.send();
}, false )

Example No.2
For this example, I use the generated endpoint https://api.myjson.com/bins/amz5t.

<p>(Titles obtained by AJAX)</p>
<h1 id="title"></h1>
<h3 id="description"></h3>
<hr>
<div>
  <p>(Links to articles were provided by AJAX)</p> 
  <div id="text"></div>
</div>

TypeScript

function ajax_get(url, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            try {
                var data = JSON.parse(xmlhttp.responseText);
            } catch(err) {
                console.log(err.message + " in " + xmlhttp.responseText);
                return;
            }
            callback(data); 
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

ajax_get('https://api.myjson.com/bins/amz5t', function(data){
  var eNaslov = document.getElementById("title");
  var eOpis = document.getElementById("description");
  var eArtikli = document.getElementById("text");
  var serverArtikli = '';
  serverArtikli += "<ul>";
  for (var i=0; i < data["articles"].length; i++) {
    serverArtikli += '<li><a href="' + data["articles"][i]["url"] + '">' + data["articles"][i]["title"] + "</a></li>";
  }
  serverArtikli += "</ul>";
  
  eNaslov.innerHTML = data["title"]; //
  eOpis.innerHTML = data["description"];
  eArtikli.innerHTML = serverArtikli;
})

b) Uploading data to the server

Example

var newName = 'John Smith';
var xhr = new XMLHttpRequest();
 
xhr.open('POST', 'myservice/username?id=some-unique-id');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseText !== newName) {
        alert('Something went wrong.  Name is now ' + xhr.responseText);
    }
    else if (xhr.status !== 200) {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send(encodeURI('name=' + newName));

Example: submitting form information

document.getElementById("myform").onsubmit = function(e) {
   e.preventDefault();
   var f = e.target,
       formData = '',
       xhr = new XMLHttpRequest();
   // fetch form values
   for (var i = 0, d, v; i < f.elements.length; i++) {
       d = f.elements[i];
       if (d.name && d.value) {
           v = (d.type == "checkbox" || d.type == "radio" ? (d.checked ? d.value : '') : d.value);
           if (v) formData += d.name + "=" + escape(v) + "&";
       }
   }
   xhr.open("POST", f.action);
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
   xhr.send(formData);
}

c) Uploading files to the server

var file = document.getElementById('test-input').files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);