как использовать jQuery AJAX-вызовы с node.js - PullRequest
Новая
       1

как использовать jQuery AJAX-вызовы с node.js

70 голосов
/ 21 марта 2011

Это похоже на Потоковые данные с Node.js , но я не чувствую, что на этот вопрос ответили достаточно.

Я пытаюсь использовать вызов jQuery ajax (get, load, getJSON) для передачи данных между страницей и сервером node.js. Я могу нажать на адрес в своем браузере и увидеть «Hello World!», Но когда я пытаюсь это сделать со своей страницы, он не работает и показывает, что я не получаю ответ. Я установил простую тестовую страницу и пример Hello World, чтобы проверить это: 

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

Ответы [ 4 ]

86 голосов
/ 21 марта 2011

Если ваша простая тестовая страница находится на другом протоколе / домене / порту, чем ваш пример hello world node.js, вы выполняете междоменные запросы и нарушаете ту же политику происхождения , следовательно, ваши jQuery ajax вызывают (получитьи загрузить) терпят неудачу молча.Чтобы получить этот рабочий междоменный домен, вы должны использовать формат JSONP .Например, код 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);

и клиентский 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);
        }
    });
});

Есть и другие способы, как заставить это работать, например, установив обратный прокси или создайте свое веб-приложение полностью с помощью фреймворка, подобного express .

7 голосов
/ 30 марта 2011

Спасибо Ёджимбо за его ответ.Чтобы добавить к его примеру, я хотел использовать метод jquery $ .getJSON, который помещает случайный обратный вызов в строку запроса, поэтому я также хотел разобрать это в Node.js.Я также хотел передать объект обратно и использовать функцию stringify.

Это мой код на стороне клиента. 

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

Это мой 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);
3 голосов
/ 21 марта 2011

Полагаю, ваша html-страница размещена на другом порту.Та же самая политика происхождения требует в большинстве браузеров, чтобы загруженный файл был на том же порту, что и загружаемый файл.

1 голос
/ 26 апреля 2011

Используйте что-то вроде следующего на стороне сервера: 

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)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...