¿Cómo hacer una llamada AJAX sin jQuery?

789

¿Cómo hacer una llamada AJAX usando JavaScript, sin usar jQuery?

discky
fuente
20
Tenga en cuenta que, si bien muchas de las respuestas aquí sugieren escuchar readystatechange , los navegadores modernos ahora admiten los eventos de carga , aborto , progreso y error para XMLHttpRequest ( aunque probablemente solo le importe la carga ).
Paul S.
2
@ImadoddinIbnAlauddin, por ejemplo, cuando no se necesita su funcionalidad principal (desplazamiento DOM).
SET
8
youmightnotneedjquery.com muchos ejemplos puros de js incl. ajax para ie8 +, ie9 + y ie10 +
Sanya_Zol
1
w3schools tiene una buena introducción paso a paso en ajax sin jquery: w3schools.com/js/js_ajax_intro.asp
eli
También puede usar EHTML: github.com/Guseyn/EHTML Use el elemento e-json para obtener json y
asignarlo al

Respuestas:

591

Con JavaScript "vainilla":

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

Con jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});
dov.amir
fuente
1
@Fractaliste Si simplemente llama a las devoluciones de llamada después de los bloques if relacionados con xmlhttp.status, simplemente llámalos allí y listo.
Jay
55
@Wade Creo que Gokigooooks dice que cuando leyó Con JavaScript "vainilla" pensó que era una biblioteca de JavaScript que necesitaba descargar. También podría estar haciendo referencia a Vanilla JS .
Trisped
221

Usando el siguiente fragmento puedes hacer cosas similares con bastante facilidad, como esta:

ajax.get('/test.php', {foo: 'bar'}, function() {});

Aquí está el fragmento:

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, 'POST', query.join('&'), async)
};
Petah
fuente
1
Este es un gran comienzo, pero creo que te estás perdiendo algo que aparece en la respuesta de @ 3nigma. Es decir, no estoy seguro de cuánto tiene sentido realizar ciertas solicitudes (todas obtenidas y algunas publicadas) sin devolver la respuesta del servidor. Agregué otra línea al final del método de envío return x.responseText;, y luego devolví cada una de las ajax.sendllamadas.
Sam
3
@Sam que [normalmente] no puede regresar ya que es una solicitud asincrónica. Debe manejar la respuesta en una devolución de llamada.
Petah
@Sam hay un ejemplo allí:ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
Petah
Bonito fragmento. Sin embargo, ¿no debería ser query.join('&').replace(/%20/g, '+')en su lugar?
afsantos
3
Incluya la solicitud CORS también incluyendo esta línea como una opción. 'xhr.withCredentials = true;'
Akam
131

Sé que esta es una pregunta bastante antigua, pero ahora hay una API más agradable disponible de forma nativa en los navegadores más nuevos . El fetch()método le permite realizar solicitudes web. Por ejemplo, para solicitar algunos json de /get-data:

var opts = {
  method: 'GET',      
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

Ver aquí para más detalles.

Will Munn
fuente
99
En realidad, sería incorrecto afirmar que la API Fetch funciona en "navegadores más nuevos", ya que IE y Edge no lo admiten. (Edge 14 requiere que el usuario active específicamente esta función) caniuse.com/#feat=fetch
saluce el
77
Debería mencionarse el polyfill de GitHub aquí. github.com/github/fetch
TylerY86
77
Solo agrega <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>y usa fetch como un campeón.
TylerY86
77
@saluce Ahora está habilitado de forma predeterminada en Edge 14 (y IE ya no es un navegador "nuevo" :-)
Supersharp
1
No uses Fetch en dispositivos móviles. Tiene un problema de mayúsculas y minúsculas en el encabezado HTTP en Android. Funciona bien en iOS.
Kenny Lim
104

Puede usar la siguiente función:

function callAjax(url, callback){
    var xmlhttp;
    // compatible with IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

Puede probar soluciones similares en línea en estos enlaces:

AbdelHady
fuente
También sería bueno agregar alguna variable de entrada para la solicitud (se usará en xmlhttp.send (solicitud);)
Pavel Perna
2
@PavelPerna, ya que el ejemplo aquí es a GET, por lo que puede agregarlos a la solicitud, pero para ser más general, estoy con usted, realmente pensé en actualizar la respuesta para aceptar los parámetros de solicitud como un parámetro para la función aquí , y también para pasar el método ( GETo POST), pero lo que me detuvo es que quiero mantener la respuesta aquí lo más simple posible para que la gente lo intente lo más rápido posible. En realidad, odiaba algunas otras respuestas por ser demasiado largas porque intentaban ser perfectas :)
AbdelHady
40

¿Qué tal esta versión en ES6 / ES2015 simple ?

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

La función devuelve una promesa . Aquí hay un ejemplo sobre cómo usar la función y manejar la promesa que devuelve:

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

Si necesita cargar un archivo json, puede usarlo JSON.parse()para convertir los datos cargados en un objeto JS.

También puede integrarse req.responseType='json'en la función, pero desafortunadamente no hay soporte para IE , por lo que me quedaría con JSON.parse().

Rotareti
fuente
2
Al XMLHttpRequestusarlo, realiza un intento asincrónico de cargar un archivo. Eso significa que la ejecución de su código continuará, mientras su archivo se carga en segundo plano. Para usar el contenido del archivo en su script, necesita un mecanismo que le diga a su script cuando el archivo terminó de cargarse o no pudo cargarse. Ahí es donde las promesas son útiles. Hay otras formas de resolver este problema, pero creo que las promesas son más convenientes.
Rotareti
@Rotareti ¿Los navegadores móviles son compatibles con este enfoque?
bodruk
Solo las versiones más nuevas del navegador lo admiten. Una práctica común es escribir su código en el último ES6 / 7 / .. y usar Babel o similar para volver a compilarlo en ES5 para un mejor soporte del navegador.
Rotareti
2
@Rotareti ¿Puede explicar también por qué esto sería más conveniente que una devolución de llamada 'simple'? ¿Vale la pena esta conveniencia del esfuerzo adicional para recopilarlo para el soporte de navegador antiguo?
lennyklb
@LennartKloppenburg Creo que esta respuesta lo explica bien: stackoverflow.com/a/14244950/1612318 "¿Vale la pena el esfuerzo extra de esta conveniencia para recopilarla para el soporte de navegador antiguo?" Las promesas son solo una de las muchas características que vienen con ES6 / 7. Si usa un transpiler, puede escribir JS actualizado. ¡Vale la pena!
Rotareti
38
 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 alert(serverResponse); // Shows "15"
Rafay
fuente
58
No hagas llamadas sincrónicas. Use xhReq.onload y use las devoluciones de llamada.
19h
3
@FellowStranger oReq.onload = function () {/*this.responseText*/};
19h
3
@kenansulayman ¿Qué tiene de malo la llamada sincrónica? A veces se ajusta mejor.
Andrii Nemchenko
@Andrey: nada, hasta donde te das cuenta de que estás deteniendo la ejecución de todo hasta que la respuesta del servidor regrese. Nada excepcionalmente malo, pero tal vez no sea exactamente adecuado para algunos usos.
mrówa
Además, si el servidor nunca responde por alguna razón, el resto del código nunca se ejecutará.
Elefante al azar
35

Utilice XMLHttpRequest .

Solicitud GET simple

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

Solicitud POST simple

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

Podemos especificar que la solicitud debe ser asíncrona (verdadera), la predeterminada o síncrona (falsa) con un tercer argumento opcional.

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

Podemos configurar encabezados antes de llamar httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Podemos manejar la respuesta configurando httpRequest.onreadystatechangeuna función antes de llamarhttpRequest.send()

httpRequest.onreadystatechange = function(){
  // Process the server response here.
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}
Harlem Ardilla
fuente
1
Tenga en cuenta que hay otros estados exitosos que 200, por ejemplo, 201
Nate Vaughan el
30

Puede obtener el objeto correcto de acuerdo con el navegador con

function getXmlDoc() {
  var xmlDoc;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlDoc = new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlDoc;
}

Con el objeto correcto, se puede abstraer un GET para:

function myGet(url, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('GET', url, true);

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send();
}

Y un mensaje para:

function myPost(url, data, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('POST', url, true);
  xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send(data);
}
brunops
fuente
18

Estaba buscando una manera de incluir promesas con ajax y excluir jQuery. Hay un artículo sobre HTML5 Rocks que habla sobre las promesas de ES6. (Podría rellenar con una biblioteca prometedora como Q ) Puede usar el fragmento de código que copié del artículo.

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

Nota: También escribí un artículo sobre esto .

Alineado
fuente
15

Una pequeña combinación de un par de ejemplos a continuación y creó esta pieza simple:

function ajax(url, method, data, async)
{
    method = typeof method !== 'undefined' ? method : 'GET';
    async = typeof async !== 'undefined' ? async : false;

    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    if (method == 'POST')
    {
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(data);
    }
    else
    {
        if(typeof data !== 'undefined' && data !== null)
        {
            url = url+'?'+data;
        }
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(null);
    }
    //var serverResponse = xhReq.responseText;
    //alert(serverResponse);
}

// Example usage below (using a string query):

ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');

O si sus parámetros son objeto (s) - ajuste de código adicional menor:

var parameters = {
    q: 'test'
}

var query = [];
for (var key in parameters)
{
    query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}

ajax('http://www.google.com', 'POST', query.join('&'));

Ambos deben ser totalmente compatibles con el navegador y la versión.

tfont
fuente
¿Vale la pena usar hasOwnProperty dentro del bucle for aquí?
kibibu
15

Si no desea incluir JQuery, probaría algunas bibliotecas AJAX ligeras.

Mi favorito es reqwest. Tiene solo 3.4kb y está muy bien desarrollado: https://github.com/ded/Reqwest

Aquí hay una solicitud GET de muestra con reqwest:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

Ahora, si quieres algo aún más liviano, probaría microAjax a solo 0.4kb: https://code.google.com/p/microajax/

Este es todo el código aquí:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

Y aquí hay una muestra de llamada:

microAjax(url, onSuccess);
Ryan
fuente
1
Creo que hay un problema con microAjax, cuando lo llamas dos veces (debido a los numerosos "esto", creo que debe haber una colisión). No sé si llamar a dos "nuevo microAjax" es una buena solución, ¿verdad?
Jill-Jênn Vie
13

Viejo pero lo intentaré, tal vez alguien encuentre útil esta información.

Esta es la cantidad mínima de código que necesita para hacer una GETsolicitud y obtener algunos JSONdatos formateados. Esto es aplicable solo a los navegadores modernos como las últimas versiones de Chrome , FF , Safari , Opera y Microsoft Edge .

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async 
xhr.responseType = 'json'; // in which format you expect the response to be


xhr.onload = function() {
  if(this.status == 200) {// onload called even on 404 etc so check the status
   console.log(this.response); // No need for JSON.parse()
  }
};

xhr.onerror = function() {
  // error 
};


xhr.send();

Consulte también la nueva API Fetch, que es un reemplazo basado en promesas para la API XMLHttpRequest .

Blago Eres
fuente
9

XMLHttpRequest ()

Puede usar el XMLHttpRequest()constructor para crear un nuevo XMLHttpRequestobjeto (XHR) que le permitirá interactuar con un servidor utilizando métodos de solicitud HTTP estándar (como GETy POST):

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

const request = new XMLHttpRequest();

request.addEventListener('load', function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
});

request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

ir a buscar()

También puede usar el fetch()método para obtener un Promiseque resuelva el Responseobjeto que representa la respuesta a su solicitud:

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: data,
}).then(response => {
  if (response.ok) {
    response.text().then(response => {
      console.log(response);
    });
  }
});

navigator.sendBeacon ()

Por otro lado, si simplemente está intentando obtener POSTdatos y no necesita una respuesta del servidor, la solución más corta sería utilizar navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);
Grant Miller
fuente
1
Realmente me gustan sus respuestas, porque cubre la mayoría de los casos incluso para Internet Explorer con XMLHttpRequest, pero recomendaría cambiar el: "const data = ..." para ser: "var data = ..." en ese ejemplo (XMLHttpRequest) por lo que es totalmente compatible con él
Dazag
8

De youMightNotNeedJquery.com +JSON.stringify

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
Mikel
fuente
7

Esto puede ayudar:

function doAjax(url, callback) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
Ashish Kumar
fuente
4
<html>
  <script>
    var xmlDoc = null ;

  function load() {
    if (typeof window.ActiveXObject != 'undefined' ) {
      xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      xmlDoc.onreadystatechange = process ;
    }
    else {
      xmlDoc = new XMLHttpRequest();
      xmlDoc.onload = process ;
    }
    xmlDoc.open( "GET", "background.html", true );
    xmlDoc.send( null );
  }

  function process() {
    if ( xmlDoc.readyState != 4 ) return ;
    document.getElementById("output").value = xmlDoc.responseText ;
  }

  function empty() {
    document.getElementById("output").value = '<empty>' ;
  }
</script>

<body>
  <textarea id="output" cols='70' rows='40'><empty></textarea>
  <br></br>
  <button onclick="load()">Load</button> &nbsp;
  <button onclick="empty()">Clear</button>
</body>
</html>
Vosobe Kapsimanis
fuente
4

Bueno, es solo un paso fácil de 4 pasos,

Espero que ayude

Step 1. Almacene la referencia al objeto XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Recupere el objeto XMLHttpRequest

function createXmlHttpRequestObject() {
    // will store the reference to the XMLHttpRequest object
    var xmlHttp;
    // if running Internet Explorer
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    }
    // if running Mozilla or other browsers
    else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    // return the created object or display an error message
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
}

Step 3. Realice una solicitud HTTP asincrónica utilizando el objeto XMLHttpRequest

function process() {
    // proceed only if the xmlHttp object isn't busy
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        // retrieve the name typed by the user on the form
        item = encodeURIComponent(document.getElementById("input_item").value);
        // execute the your_file.php page from the server
        xmlHttp.open("GET", "your_file.php?item=" + item, true);
        // define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
        // make the server request
        xmlHttp.send(null);
    }
}

Step 4. Se ejecuta automáticamente cuando se recibe un mensaje del servidor

function handleServerResponse() {

    // move forward only if the transaction has completed
    if (xmlHttp.readyState == 4) {
        // status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200) {
            // extract the XML retrieved from the server
            xmlResponse = xmlHttp.responseText;
            document.getElementById("put_response").innerHTML = xmlResponse;
            // restart sequence
        }
        // a HTTP status different than 200 signals an error
        else {
            alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
    }
}
Prateek Joshi
fuente
3

en JavaScript simple en el navegador:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE ) {
    if(xhr.status == 200){
      console.log(xhr.responseText);
    } else if(xhr.status == 400) {
      console.log('There was an error 400');
    } else {
      console.log('something else other than 200 was returned');
    }
  }
}

xhr.open("GET", "mock_data.json", true);

xhr.send();

O si desea usar Browserify para agrupar sus módulos usando node.js. Puedes usar superagente :

var request = require('superagent');
var url = '/mock_data.json';

 request
   .get(url)
   .end(function(err, res){
     if (res.ok) {
       console.log('yay got ' + JSON.stringify(res.body));
     } else {
       console.log('Oh no! error ' + res.text);
     }
 });
svnm
fuente
3

Aquí hay un JSFiffle sin JQuery

http://jsfiddle.net/rimian/jurwre07/

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://echo.jsontest.com/key/value/one/two';

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            } else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            } else {
                console.log('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
};

loadXMLDoc();
Rimian
fuente
3
var load_process = false;
function ajaxCall(param, response) {

 if (load_process == true) {
     return;
 }
 else
 { 
  if (param.async == undefined) {
     param.async = true;
 }
 if (param.async == false) {
         load_process = true;
     }
 var xhr;

 xhr = new XMLHttpRequest();

 if (param.type != "GET") {
     xhr.open(param.type, param.url, true);

     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
     }
     else if (param.contentType != undefined || param.contentType == true) {
         xhr.setRequestHeader('Content-Type', param.contentType);
     }
     else {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     }


 }
 else {
     xhr.open(param.type, param.url + "?" + obj_param(param.data));
 }

 xhr.onprogress = function (loadTime) {
     if (param.progress != undefined) {
         param.progress({ loaded: loadTime.loaded }, "success");
     }
 }
 xhr.ontimeout = function () {
     this.abort();
     param.success("timeout", "timeout");
     load_process = false;
 };

 xhr.onerror = function () {
     param.error(xhr.responseText, "error");
     load_process = false;
 };

 xhr.onload = function () {
    if (xhr.status === 200) {
         if (param.dataType != undefined && param.dataType == "json") {

             param.success(JSON.parse(xhr.responseText), "success");
         }
         else {
             param.success(JSON.stringify(xhr.responseText), "success");
         }
     }
     else if (xhr.status !== 200) {
         param.error(xhr.responseText, "error");

     }
     load_process = false;
 };
 if (param.data != null || param.data != undefined) {
     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
             xhr.send(param.data);

     }
     else {
             xhr.send(obj_param(param.data));

     }
 }
 else {
         xhr.send();

 }
 if (param.timeout != undefined) {
     xhr.timeout = param.timeout;
 }
 else
{
 xhr.timeout = 20000;
}
 this.abort = function (response) {

     if (XMLHttpRequest != null) {
         xhr.abort();
         load_process = false;
         if (response != undefined) {
             response({ status: "success" });
         }
     }

 }
 }
 }

function obj_param(obj) {
var parts = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
}
return parts.join('&');
}

mi llamada ajax

  var my_ajax_call=ajaxCall({
    url: url,
    type: method,
    data: {data:value},
    dataType: 'json',
    async:false,//synchronous request. Default value is true 
    timeout:10000,//default timeout 20000
    progress:function(loadTime,status)
    {
    console.log(loadTime);
     },
    success: function (result, status) {
      console.log(result);
    },
      error :function(result,status)
    {
    console.log(result);
     }
      });

para cancelar solicitudes anteriores

      my_ajax_call.abort(function(result){
       console.log(result);
       });
karthikeyan ganesan
fuente
2

HTML:

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

PHP:

<?php

$id = $_GET[id];
print "$id";

?>
99freebies.blogspot.com
fuente
Una sola línea si no necesita llaves, nadie usa IE6, probablemente fue una copia pegada, usa onload en lugar de onreadystatechange, atrapa errores para posibles llamadas recursivas, xmlhttp es un nombre de variable terrible, solo llámalo x.
super
1

Una muy buena solución con javascript puro está aquí

/*create an XMLHttpRequest object*/

let GethttpRequest=function(){  
  let httpRequest=false;
  if(window.XMLHttpRequest){
    httpRequest   =new XMLHttpRequest();
    if(httpRequest.overrideMimeType){
    httpRequest.overrideMimeType('text/xml');
    }
  }else if(window.ActiveXObject){
    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
      try{
        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
  if(!httpRequest){return 0;}
  return httpRequest;
}

  /*Defining a function to make the request every time when it is needed*/

  function MakeRequest(){

    let uriPost       ="myURL";
    let xhrPost       =GethttpRequest();
    let fdPost        =new FormData();
    let date          =new Date();

    /*data to be sent on server*/
    let data          = { 
                        "name"      :"name",
                        "lName"     :"lName",
                        "phone"     :"phone",
                        "key"       :"key",
                        "password"  :"date"
                      };

    let JSONdata =JSON.stringify(data);             
    fdPost.append("data",JSONdata);
    xhrPost.open("POST" ,uriPost, true);
    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
    xhrPost.onloadstart = function (){
      /*do something*/
    };
    xhrPost.onload      = function (){
      /*do something*/
    };
    xhrPost.onloadend   = function (){
      /*do something*/
    }
    xhrPost.onprogress  =function(){
      /*do something*/
    }

    xhrPost.onreadystatechange =function(){

      if(xhrPost.readyState < 4){

      }else if(xhrPost.readyState === 4){

        if(xhrPost.status === 200){

          /*request succesfull*/

        }else if(xhrPost.status !==200){

          /*request failled*/

        }

      }


   }
  xhrPost.ontimeout = function (e){
    /*you can stop the request*/
  }
  xhrPost.onerror = function (){
    /*you can try again the request*/
  };
  xhrPost.onabort = function (){
    /*you can try again the request*/
  };
  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
  xhrPost.setRequestHeader("Content-disposition", "form-data");
  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
  xhrPost.send(fdPost);
}

/*PHP side
<?php
  //check if the variable $_POST["data"] exists isset() && !empty()
  $data        =$_POST["data"];
  $decodedData =json_decode($_POST["data"]);
  //show a single item from the form
  echo $decodedData->name;

?>
*/

/*Usage*/
MakeRequest();
Ir Calif
fuente