Comment passer un appel AJAX sans jQuery?

789

Comment passer un appel AJAX en utilisant JavaScript, sans utiliser jQuery?

discky
la source
20
Veuillez noter que bien que la plupart des réponses suggèrent d'écouter le readystatechange , les navigateurs modernes prennent désormais en charge les événements de chargement , d' abandon , de progression et d' erreur pour XMLHttpRequest (vous ne vous soucierez probablement que de la charge cependant).
Paul S.
2
@ImadoddinIbnAlauddin par exemple lorsque sa fonctionnalité principale (traversée DOM) n'est pas nécessaire.
SET
8
youmightnotneedjquery.com beaucoup d'exemples js purs incl. ajax pour ie8 +, ie9 + et ie10 +
Sanya_Zol
1
w3schools a une belle introduction étape par étape dans ajax sans jquery: w3schools.com/js/js_ajax_intro.asp
eli
Vous pouvez également utiliser EHTML: github.com/Guseyn/EHTML Utiliser l'élément e-json pour récupérer json et le mapper à l'élément html
Guseyn Ismayylov

Réponses:

591

Avec JavaScript "vanille":

<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>

Avec jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});
dov.amir
la source
1
@Fractaliste Si vous appelez simplement les rappels après les blocs if relatifs au xmlhttp.status, alors appelez-les simplement là et vous avez terminé.
Jay
5
@Wade Je pense que Gokigooooks dit quand il a lu avec JavaScript "vanilla" qu'il pensait que c'était une bibliothèque JavaScript qu'il devait télécharger. Il pourrait également faire référence à Vanilla JS .
Trisped
221

En utilisant l'extrait de code suivant, vous pouvez faire des choses similaires assez facilement, comme ceci:

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

Voici l'extrait:

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
la source
1
C'est un très bon début, mais je pense que vous manquez quelque chose qui figure dans la réponse de @ 3nigma. Autrement dit, je ne sais pas à quel point il est logique de faire certaines demandes (toutes obtenir et certains publier) sans retourner la réponse du serveur. J'ai ajouté une autre ligne à la fin de la méthode d'envoi - return x.responseText;- puis je renvoie chacun des ajax.sendappels.
Sam
3
@Sam vous [généralement] ne pouvez pas renvoyer comme une demande asynchrone. Vous devez gérer la réponse dans un rappel.
Petah
@Sam il y a un exemple là-dedans:ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
Petah
Un bel extrait. Cependant, ne devrait-il pas en être ainsi query.join('&').replace(/%20/g, '+')?
afsantos
3
Veuillez également inclure la demande CORS en incluant cette ligne en option. 'xhr.withCredentials = true;'
Akam
131

Je sais que c'est une question assez ancienne, mais il existe maintenant une meilleure API disponible en natif dans les nouveaux navigateurs . La fetch()méthode vous permet de faire des requêtes Web. Par exemple, pour demander du json à /get-data:

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

Voir ici pour plus de détails.

Will Munn
la source
9
En fait, il serait incorrect de prétendre que l'API Fetch fonctionne dans les "nouveaux navigateurs", car IE et Edge ne le prennent pas en charge. (Edge 14 nécessite que l'utilisateur active
saluce
7
Il devrait y avoir une mention du polyfill de GitHub ici. github.com/github/fetch
TylerY86
7
Ajoutez <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>et utilisez fetch comme un champion.
TylerY86
7
@saluce Maintenant, il est activé par défaut dans Edge 14 (et IE n'est plus un "nouveau" navigateur :-)
Supersharp
1
N'utilisez pas Fetch sur mobile. Il a un problème d'en-tête inférieur HTTP sur Android. Fonctionne bien sur iOS.
Kenny Lim
104

Vous pouvez utiliser la fonction suivante:

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();
}

Vous pouvez essayer des solutions similaires en ligne sur ces liens:

AbdelHady
la source
Serait également bien d'ajouter une variable d'entrée pour la demande (sera utilisé dans xmlhttp.send (demande);)
Pavel Perna
2
@PavelPerna, puisque l'exemple ici est un GET, vous pouvez donc simplement les ajouter à la demande, mais pour être plus général, je suis avec vous, j'ai vraiment pensé à mettre à jour la réponse pour accepter les paramètres de la demande comme paramètre de la fonction ici , & aussi pour passer la méthode ( GETou POST), mais ce qui m'a arrêté, c'est que je veux garder la réponse ici aussi simple que possible pour que les gens l'essaient aussi vite que possible. En fait, je détestais d'autres réponses parce qu'elles étaient trop longues parce qu'elles essayaient d'être parfaites :)
AbdelHady
40

Que diriez-vous de cette version en clair ES6 / ES2015 ?

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 fonction renvoie une promesse . Voici un exemple sur la façon d'utiliser la fonction et de gérer la promesse qu'elle renvoie:

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

Si vous devez charger un fichier json, vous pouvez utiliser JSON.parse() pour convertir les données chargées en un objet JS.

Vous pouvez également l'intégrer req.responseType='json'dans la fonction, mais malheureusement, il n'y a pas de support IE pour cela , donc je resterais avec JSON.parse().

Rotareti
la source
2
En utilisant XMLHttpRequestvous faites une tentative asynchrone de charger un fichier. Cela signifie que l'exécution de votre code se poursuivra pendant que votre fichier se charge en arrière-plan. Pour utiliser le contenu du fichier dans votre script, vous avez besoin d'un mécanisme qui indique à votre script lorsque le chargement du fichier a échoué ou échoué. C'est là que les promesses sont utiles. Il existe d'autres moyens de résoudre ce problème, mais je pense que les promesses sont les plus pratiques.
Rotareti
@Rotareti Les navigateurs mobiles prennent-ils en charge cette approche?
bodruk
Seules les versions de navigateur plus récentes le prennent en charge. Une pratique courante consiste à écrire votre code dans la dernière version ES6 / 7 / .. et à utiliser Babel ou similaire pour le retranscrire vers ES5 pour une meilleure prise en charge du navigateur.
Rotareti
2
@Rotareti Pouvez-vous également expliquer pourquoi cela serait plus pratique qu'un rappel "simple"? Cette commodité vaut-elle l'effort supplémentaire de la transpiler pour la prise en charge des anciens navigateurs?
lennyklb
@LennartKloppenburg Je pense que cette réponse l'explique bien: stackoverflow.com/a/14244950/1612318 "Cette commodité vaut-elle l'effort supplémentaire de la transpiler pour la prise en charge d'un ancien navigateur?" Les promesses ne sont qu'une des nombreuses fonctionnalités fournies avec ES6 / 7. Si vous utilisez un transpilateur, vous pouvez écrire un JS à jour. Ça en vaut la peine!
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
la source
58
Ne faites pas d'appels synchrones. Utilisez xhReq.onload et utilisez les rappels.
19h
3
@FellowStranger oReq.onload = function () {/*this.responseText*/};
19h
3
@kenansulayman Quel est le problème avec un appel synchrone? Parfois, cela convient le mieux.
Andrii Nemchenko
@Andrey: rien, dans la mesure où vous vous rendez compte que vous arrêtez l'exécution de tout jusqu'à ce que la réponse du serveur revienne. Rien d'exceptionnellement mauvais, mais peut-être pas tout à fait adéquat pour certaines utilisations.
mrówa
De plus, si le serveur ne répond jamais pour une raison quelconque, le reste de votre code ne s'exécutera jamais.
Random Elephant
35

Utiliser XMLHttpRequest .

Demande GET simple

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

Demande POST simple

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

Nous pouvons spécifier que la demande doit être asynchrone (true), par défaut ou synchrone (false) avec un troisième argument facultatif.

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

Nous pouvons définir des en-têtes avant d'appeler httpRequest.send()

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

Nous pouvons gérer la réponse en définissant httpRequest.onreadystatechangeune fonction avant d'appelerhttpRequest.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.');
    }
  }
}
HarlemSquirrel
la source
1
Notez qu'il existe d'autres statuts réussis que 200, par exemple 201
Nate Vaughan
30

Vous pouvez obtenir le bon objet selon le navigateur avec

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;
}

Avec l'objet correct, un GET peut être résumé pour:

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();
}

Et un POST pour:

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
la source
18

Je cherchais un moyen d'inclure des promesses avec ajax et d'exclure jQuery. Il y a un article sur HTML5 Rocks qui parle des promesses d'ES6. (Vous pouvez remplir une bibliothèque de promesses comme Q ). Vous pouvez utiliser l'extrait de code que j'ai copié à partir de l'article.

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();
  });
}

Remarque: j'ai également écrit un article à ce sujet .

Aligné
la source
15

Une petite combinaison de quelques exemples ci-dessous et a créé cette pièce 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');

OU si vos paramètres sont des objets - ajustement de code supplémentaire mineur:

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('&'));

Les deux doivent être entièrement compatibles navigateur + version.

tfont
la source
Vaut-il la peine d'utiliser hasOwnProperty dans la boucle for ici?
kibibu
15

Si vous ne voulez pas inclure JQuery, j'essaierais quelques bibliothèques AJAX légères.

Mon préféré est reqwest. C'est seulement 3,4 Ko et très bien construit: https://github.com/ded/Reqwest

Voici un exemple de demande GET avec reqwest:

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

Maintenant, si vous voulez quelque chose d'encore plus léger, j'essaierais microAjax à seulement 0,4 Ko: https://code.google.com/p/microajax/

C'est tout le code ici:

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)}};

Et voici un exemple d'appel:

microAjax(url, onSuccess);
Ryan
la source
1
Je pense qu'il y a un problème avec microAjax, quand vous l'appelez deux fois (à cause des nombreux «ceci», je pense, il doit y avoir une collision). Je ne sais pas si appeler deux «nouveaux microAjax» est une bonne solution, n'est-ce pas?
Jill-Jênn Vie
13

Vieux mais je vais essayer, peut-être que quelqu'un trouvera cette information utile.

Il s'agit de la quantité minimale de code dont vous avez besoin pour faire une GETdemande et récupérer JSONdes données formatées. Cela ne s'applique qu'aux navigateurs modernes comme les dernières versions de Chrome , FF , Safari , Opera et 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();

Découvrez également la nouvelle API Fetch qui est un remplacement basé sur des promesses pour l' API XMLHttpRequest .

Blago Eres
la source
9

XMLHttpRequest ()

Vous pouvez utiliser le XMLHttpRequest()constructeur pour créer un nouvel XMLHttpRequestobjet (XHR) qui vous permettra d'interagir avec un serveur en utilisant des méthodes de requête HTTP standard (telles que GETet 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);

fetch ()

Vous pouvez également utiliser la fetch()méthode pour obtenir un Promisequi résout l' Responseobjet représentant la réponse à votre demande:

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 ()

D'un autre côté, si vous essayez simplement de POSTdonnées et n'avez pas besoin d'une réponse du serveur, la solution la plus courte serait d'utiliser navigator.sendBeacon():

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

navigator.sendBeacon('example.php', data);
Grant Miller
la source
1
J'aime vraiment vos réponses, car vous couvrez la plupart des cas, même pour Internet Explorer avec XMLHttpRequest, mais je recommanderais de changer: "const data = ..." pour qu'il devienne: "var data = ..." sur cet exemple (XMLHttpRequest) donc il est entièrement compatible avec lui
Dazag
8

De vousMightNotNeedJquery.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
la source
7

Cela peut aider:

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
la source
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
la source
4

Eh bien, c'est juste une procédure facile en 4 étapes,

J'espère que ça aide

Step 1. Stockez la référence à l'objet XMLHttpRequest

var xmlHttp = createXmlHttpRequestObject();

Step 2. Récupérer l'objet 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. Faire une demande HTTP asynchrone à l'aide de l'objet 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. Exécuté automatiquement lorsqu'un message est reçu du serveur

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
la source
3

en clair JavaScript dans le navigateur:

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();

Ou si vous souhaitez utiliser Browserify pour regrouper vos modules à l'aide de node.js. Vous pouvez utiliser un superagent :

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
la source
3

Voici un JSFiffle sans 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
la source
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('&');
}

mon appel 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);
     }
      });

pour abandonner les demandes précédentes

      my_ajax_call.abort(function(result){
       console.log(result);
       });
karthikeyan ganesan
la source
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
la source
Si une seule ligne n'a pas besoin de crochets, Noone utilise IE6, cela a probablement été copié, utilisez onload au lieu de onreadystatechange, détectez les erreurs pour les appels récursifs possibles, xmlhttp est un nom de variable terrible, appelez-le simplement x.
super
1

Une très bonne solution avec du javascript pur est ici

/*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
la source
0

Essayez d'utiliser Fetch Api ( Fetch API )

fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));

C'est vraiment clair et 100% vanille.

Mike
la source