APIs de JavaScript - AJAX

Ejemplos de acceso cruzado

<script>

 let resultado = document.getElementById('resultado');

function getURL(url, target) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function (evento) {
        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                resultado.innerHTML = req.responseText;
            } else {
                resultado.innerHTML = "<p>[" + req.readyState + "] Error recibiendo datos.</p>";
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('GET', url);
    req.send(null);
}

function postData(url) {
    let req = new XMLHttpRequest();
    let datos = new FormData;
    const event = new Date(Date.now());
    const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};

    datos.append("user", "usuario");
    datos.append("pass", "12345");
    datos.append("date", event.toLocaleDateString("es-Es", options));

    req.onreadystatechange = function (evento) {

        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                let tipo = req.getResponseHeader("Content-Type");

                console.log("Contenido tipo MIME:" + tipo);
                console.log("Contenido tipo:" + req.responseType);
                resultado.innerHTML = req.responseText;
            } else {
                resultado.innerHTML = "<p>[" + req.readyState + "] Error recibiendo datos.</p>";
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('POST', url);
    req.send(datos);
}

function postDataJSON(url) {
    let req = new XMLHttpRequest();
    let datos = {"user": "Usuario", "pass": "12345"};


    req.onreadystatechange = function (evento) {

        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                let tipo = req.getResponseHeader("Content-Type");

                console.log("Contenido tipo MIME:" + tipo);
                console.log("Contenido tipo:" + req.responseType);
                resultado.innerHTML = req.responseText;
            } else {
                resultado.innerHTML = "<p>[" + req.readyState + "] Error recibiendo datos.</p>";
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('POST', url);
    req.setRequestHeader("Content-Type", "application/json");
    req.send(datos);
}

Abra la consola y verá el mensaje de error en el navegador. Observe también en la pestaña de Red que la petición no tiene respuesta porque ni siquiera ha sido enviada.

El recurso https://www.ujaen.es/departamentos/ingtel/ es una página en otro dominio que no implementa CORS.
El recurso https://labtelema.ujaen.es:8083/ es una página en el mismo dominio pero otro puerto que no implementa CORS.
- No es un petición verificada ya que es un GET.
El recurso https://labtelema.ujaen.es/api/form.php/ es un formulario en un servidor que sí implementa CORS.
- No es un petición verificada ya que es un POST con datos application/x-www-form-urlencoded.
El recurso https://labtelema.ujaen.es/api/form.php/ es un formulario en un servidor que sí implementa CORS.
- Es un petición verificada ya que es un POST con datos application/json.
- El navegador envía previamente a la petición POST un mensaje OPTIONS.

APIs de JavaScript - Ejemplos de protección entre orígenes y CORS

Peticiones de origen cruzado y a través de CORS

Ejemplos de acceso cruzado