Me traducis una funcion Jquery a Javascript?

Aviso, teclado ingles.

Buenas, llevo unos dias peleandome con un programa, y cuando lo he conseguido hacer por fin funcionar hoy se lo ensenyo al profesor y me dice que esta perfecto... pero que no puedo usar Jquery.

No tengo idea de como hacerlo en Javascript "puro", podriais echarme una mano? es cortito...

Primero tengo esto

function getData(group){
if (group=='pilot'){
urlUse = "http://XXX.pythonanywhere.com/api/pilot";
}
else if (group=='team'){
urlUse = "http://XXX.pythonanywhere.com/api/team";
}
else{
urlUse = "http://XXX.pythonanywhere.com/api/crew";
}
}

Que si esta en Javascript, y luego:

$(document).ready(function(){
$(".add").click(function(group){
$.ajax({
type: 'GET',
url: urlUse,
beforeSend: function(xhr){
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
},
dataType: 'json',
success: function(data){
document.getElementById('result').value = data;
},
error: function() {
alert('Error retrieving data');
},
});
});
});

Y eso es lo que quisiera hacer tambien en javascript sin usar Jquery...


Gracias de antemano por cualquier ayuda!

superx335 escribió:

Vamos por partes. La carga del DOM del documento, la puedes detectar mediante el evento DOMContentLoaded, mientras que la asignación del evento, la realizas con el método addEventListener:

Código Javascript :

//Equivalente a $(document).ready()
document.addEventListener("DOMContentLoaded", function(){
    //Instrucciones
}, false);

Lo mismo va para asignar el evento click al elemento de clase add, pero primero debes de seleccionarlo con el método querySelector (compatible con todos los navegadores, excepto IE 7 y versiones anteriores):

Código Javascript :

document.querySelector(".add").addEventListener("click", function(){
    //Instrucciones
}, false);

Y por último, el método Ajax:

Código Javascript :

var ajax = function(){
    var xhr = window.XMLHttpRequest ? 
              new XMLHttpRequest() : 
              new ActiveXObject("Microsoft.XMLHTTP") || 
              new ActiveXObject("Msxml2.XMLHTTP"),
        urlUse = "ejemplo.php", //Tu URL
        result = document.getElementById("result");
    
    xhr.open("GET", urlUse, true);
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            switch (xhr.status){
                case 200:
                    result.value = xhr.responseText;
                break;

                case 404:
                    result.value = "La dirección brindada no existe";
                break;

                default:
                    alert("Error retrieving data");
                break;
    };
    
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
};

Ahora, solo es cuestión de que unas todo.

Saludos