web-dev-qa-db-fra.com

comment utiliser les appels ajax jQuery avec node.js

Ceci est similaire à Données de flux avec Node.js , mais je ne pense pas que cette question ait reçu une réponse suffisante.

J'essaie d'utiliser un appel ajax jQuery (get, load, getJSON) pour transférer des données entre une page et un serveur node.js. Je peux taper l'adresse depuis mon navigateur et voir 'Hello World! ", Mais lorsque j'essaie de ma page, cela échoue et montre que je ne reçois aucune réponse. J'ai créé une simple page de test et un exemple de monde pour le tester:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>get test</title> 
</head>
<body>
    <h1>Get Test</h1>
    <div id="test"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script>
        $(document).ready(function() {
            //alert($('h1').length);
            $('#test').load('http://192.168.1.103:8124/');
            //$.get('http://192.168.1.103:8124/', function(data) {                
            //  alert(data);
            //});
        });
    </script>
</body>
</html>

et

var http = require('http');

http.createServer(function (req, res) {
    console.log('request received');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8124);
javascriptjqueryhtmlajaxnode.js
70
briznad

Si votre simple page de test se trouve sur un protocole/domaine/port autre que votre exemple hello world node.js, vous effectuez des requêtes inter-domaines et enfreignez même stratégie d'origine donc vos appels jQuery ajax (get et load ) échouent silencieusement. Pour obtenir ce domaine qui fonctionne, vous devez utiliser le format basé sur JSONP . Par exemple, le code node.js:

var http = require('http');

http.createServer(function (req, res) {
    console.log('request received');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('_testcb(\'{"message": "Hello world!"}\')');
}).listen(8124);

et côté client JavaScript/jQuery:

$(document).ready(function() {
    $.ajax({
        url: 'http://192.168.1.103:8124/',
        dataType: "jsonp",
        jsonpCallback: "_testcb",
        cache: false,
        timeout: 5000,
        success: function(data) {
            $("#test").append(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('error ' + textStatus + " " + errorThrown);
        }
    });
});

Il existe également d’autres moyens de le faire fonctionner, par exemple en configurant proxy inverse ou en construisant votre application Web entièrement avec un cadre tel que express .

86
yojimbo87

Merci à yojimbo pour sa réponse. Pour ajouter à son exemple, je souhaitais utiliser la méthode jQuery $ .getJSON qui place un rappel aléatoire dans la chaîne de requête. Je souhaitais également analyser cela dans le fichier Node.js. Je voulais aussi renvoyer un objet et utiliser la fonction stringify.

Ceci est mon code côté client.

$.getJSON("http://localhost:8124/dummy?action=dostuff&callback=?",
function(data){
  alert(data);
},
function(jqXHR, textStatus, errorThrown) {
    alert('error ' + textStatus + " " + errorThrown);
});

Ceci est mon Node.js côté serveur

var http = require('http');
var querystring = require('querystring');
var url = require('url');

http.createServer(function (req, res) {
    //grab the callback from the query string   
    var pquery = querystring.parse(url.parse(req.url).query);   
    var callback = (pquery.callback ? pquery.callback : '');

    //we probably want to send an object back in response to the request
    var returnObject = {message: "Hello World!"};
    var returnObjectString = JSON.stringify(returnObject);

    //Push back the response including the callback shenanigans
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(callback + '(\'' + returnObjectString + '\')');
}).listen(8124);
8
Michael Dausmann

Je suppose que votre page html est hébergée sur un autre port. Stratégie de même origine obligatoire dans la plupart des navigateurs, le fichier chargé doit se trouver sur le même port que le fichier en cours de chargement.

3
Adrien

Utilisez quelque chose comme ce qui suit du côté du serveur:

http.createServer(function (request, response) {
    if (request.headers['x-requested-with'] == 'XMLHttpRequest') {
        // handle async request
        var u = url.parse(request.url, true); //not needed

        response.writeHead(200, {'content-type':'text/json'})
        response.end(JSON.stringify(some_array.slice(1, 10))) //send elements 1 to 10
    } else {
        // handle sync request (by server index.html)
        if (request.url == '/') {
            response.writeHead(200, {'content-type': 'text/html'})
            util.pump(fs.createReadStream('index.html'), response)
        } 
        else 
        {
            // 404 error
        }
    }
}).listen(31337)
1
user725984