Web-1/AJAX/AJAX-experimenten

AJAX experimenten

Dit zijn enkele experimenten met verschillende formaten, en met verschillende libraries.

url-encoded data

De volgende versie werkt - maar is nogal omslachtig. Een belangrijk aspect hierin is dat de formulier-data verstuurd wordt in het url-encoded formaat. Dat is het normale formaat dat ook door de html-post verstuurd wordt. Dit formaat wordt in elk geval door NodeRed goed herkend.

var users = document.getElementById("users");
var login = document.getElementById("loginform");

login.onsubmit= function (event) {
    var form = "username=" + encodeURI(login.username.value);
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    fetch("/login", {
        method: "POST", 
        body: form,
        headers: myHeaders,
        credentials: "include"      
    });
    event.preventDefault();
    getUsers();
};

function getUsers() {
  fetch("api/users", {credentials: "include"}).then(function (response) {
      return response.json();
  }).then(function (data) { // data now in json format
      users.innerHTML = JSON.stringify(data);
  });
}

getUsers();

window.setInterval(getUsers, 60000);
// timer in msec

Enkele opmerkingen bij deze code:

• bij de fetch-aanroepen is het essentieel om de credentials (cookies) mee te geven. Als deze niet meegegeven worden aan NodeRed, dan werkt het interface niet meer. En voor het functioneren van de eigen website hebben we deze cookies ook nodig.
• bij fetch is de default codering van de data niet url-encoded; dit moeten we zelf verzorgen, en de header daarvoor moeten we zelf aanmaken en meegeven.
• het zelf aanmaken van de url-encoding is in dit geval -een formulier met één invulveld- nog eenvoudig, maar voor een groter formulier betekent dat extra werk.

JSON-encoded data

JSON-encoded data wekrt ook met NodeRed. Maar in "default" JS moet je daar weer zelf het nodige werk aan doen, om het formulier om te zetten in JSON. Dit kan eventueel via FormData; maar je moet dat wel zelf uitprogrammeren.

var users = document.getElementById("users");
var login = document.getElementById("loginform");

login.onsubmit= function (event) {
    var form = '{"username": "' + login.username.value + '"}';
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    event.preventDefault();

    fetch("/login", {
        method: "POST", 
        body: form,
        headers: myHeaders,
        credentials: "include"      
    }).then( function() {
        getUsers(); 
    });
};

function getUsers() {
  fetch("api/users", {credentials: "include"}).then(function (response) {
      return response.json();
  }).then(function (data) { // data now in json format
      users.innerHTML = JSON.stringify(data);
  });
}

getUsers();

window.setInterval(getUsers, 60000);
// timer in msec

Omzetten van FormData in JSON

Omzetten van FormData in JSON:

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

jQuery

Met behulp van jQuery kunnen we AJAX-verzoeken aanmerkelijk vereenvoudigen; in ons geval krijgen we dan:

var users = document.getElementById("users");
var login = document.getElementById("loginform");

login.onsubmit= function (event) {
    event.preventDefault();
    $.post("/login", $("#loginform").serialize(), function (data) {
        users.innerHTML = JSON.stringify(data);
    });
};

function getUsers() {
  $.get("api/users", function (data) {
      users.innerHTML = JSON.stringify(data);
  });
}

getUsers();

window.setInterval(getUsers, 60000);
// timer in msec

Vraag: de response van de server is al in JSON formaat; zet jQuery dit automatisch om in een JavaScript-object, of is de JSON.stringify-aanroep hierboven overbodig?

NB: Als we de inhoud van het formulier versturen via een AJAX-request, dan is het ook niet nodig om als resultaat een HTML-document op te leveren. Het ligt meer voor de hand om een JSON-document op te leveren; in dit geval bijvoorbeeld, de lijst met actieve gebruikers.

• In de NodeRed-flow is dat een kwestie van het omleggen van een verbinding...