Comment utiliser jquery ajax calls avec node.js

Ceci est similaire aux données de flux avec Node.js , mais je ne pense pas que cette question ait été suffisamment répondu.

J'essaie d'utiliser un appel jjuery ajax (get, load, getJSON) pour transférer des données entre une page et un serveur node.js. Je peux heurter l'adresse de mon navigateur et voir 'Hello World! ", Mais quand j'essaye de le faire partir de ma page, il échoue et montre que je n'ai pas répondu. J'ai configuré une page de test simple et bonjour, exemple mondial pour tester ceci:

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

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

Si votre page de test simple se trouve sur un autre protocole / domaine / port que votre exemple de noeud de Hello World.js, vous faites des requêtes entre domaines et violez la même politique d'origine. Par conséquent, votre jQuery ajax appelle (get and load) échoue silencieusement. Pour que ce travail fonctionne dans le domaine, vous devriez utiliser le format 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 façons d'obtenir ce fonctionnement, par exemple en configurant un proxy inverse ou à créer votre application Web entièrement avec un framework comme express .

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

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

C'est mon serveur Node.js

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

Je suppose que votre page html est hébergée sur un autre port. La même politique d'origine requiert dans la plupart des navigateurs que le fichier chargé soit sur le même port que le chargement du fichier.

Utiliser quelque chose comme le suivant sur le côté 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)