Базовый Ajax send / receive с узлом.js


так я пытаюсь сделать очень простой узел.JS-сервер, который принимает запрос на строку, случайным образом выбирает один из массива и возвращает выбранную строку. К сожалению, я столкнулся с несколькими проблемами.

вот передний конец:

function newGame()
{
   guessCnt=0;
   guess="";
   server();
   displayHash();
   displayGuessStr();
   displayGuessCnt();
}

function server()
{
   xmlhttp = new XMLHttpRequest();

   xmlhttp.open("GET","server.js", true);
   xmlhttp.send();

   string=xmlhttp.responseText;
}

это должно отправить запрос на сервер.js:

var http = require('http');

var choices=["hello world", "goodbye world"];

console.log("server initialized");

http.createServer(function(request, response)
{
    console.log("request recieved");
    var string = choices[Math.floor(Math.random()*choices.length)];
    console.log("string '" + string + "' chosen");
    response.on(string);
    console.log("string sent");
}).listen(8001);

так ясно, что здесь происходит несколько вещей:

  1. Я чувствую, как я "соединяю" эти два файлы не верны как в xmlhttp.open метод и используя response.on чтобы отправить строку обратно на передний конец.

  2. Я немного смущен тем, как я называю эту страницу на localhost. Передний конец называется index.html и северные сообщения до 8001. Какой адрес мне нужно перейти на localhost, чтобы получить доступ к начальной html-странице после инициализации сервера.Джей? Я должен изменить его на .listen(index.html) или что-то подобное?

  3. есть другие очевидные проблемы с тем, как я это реализую (используя .responsetext etc.)

(извините за длинный пост с несколькими вопросами, но различные учебники и узел.источник js все предполагают, что пользователь уже имеет представление об этих вещах.)

4   51   2011-05-16 03:31:45

4 ответа:

  1. ваш запрос должен быть на сервер, а не на сервер.js-файл, который создает его экземпляр. Итак, запрос должен выглядеть примерно так:xmlhttp.open("GET","http://localhost:8001/", true); кроме того, вы пытаетесь обслуживать передний конец (индекс.html) и обслуживать запросы AJAX в том же URI. Для этого вам придется ввести логику на свой сервер.js, который будет различать ваши запросы AJAX и обычный запрос доступа http. Для этого вам нужно либо ввести данные GET / POST (т. е. звоните http://localhost:8001/?getstring=true) или использовать другой путь для ваших запросов AJAX (т. е. call http://localhost:8001/getstring). Затем на стороне сервера вам нужно будет изучить объект запроса, чтобы определить, что писать в ответе. Для последнего варианта вам нужно использовать модуль " url " для анализа запроса.

  2. вы правильно звоните listen() но неправильно писать ответ. Прежде всего, если вы хотите служить индексом.HTML при переходе к http://localhost:8001/, вам необходимо чтобы записать содержимое файла в ответ с помощью response.write() или response.end(). Во-первых, вы должны включить fs=require('fs') чтобы получить доступ к файловой системе. Затем вам нужно фактически обслуживать файл.

  3. XMLHttpRequest необходимо указать функцию обратного вызова, если вы используете ее асинхронно (третий параметр = true, как вы это сделали) и хотите что-то сделать с ответом. Так, как у тебя сейчас,string будет undefined (или, возможно,null), потому что эта линия будет выполнить до завершения запроса AJAX (т. е. responseText по-прежнему пуст). Если вы используете его синхронно (третий параметр = false), то вы можете написать код, как вы сделали. Это не рекомендуется, так как он блокирует браузер во время запроса. Асинхронная операция обычно используется с функцией onreadystatechange, которая может обрабатывать ответ после его завершения. Вам нужно изучить основы XMLHttpRequest. Старт здесь.

вот простая реализация, которая включает в себя все вышеперечисленное:

сервер.js:

var http = require('http'),
      fs = require('fs'),
     url = require('url'),
 choices = ["hello world", "goodbye world"];

http.createServer(function(request, response){
    var path = url.parse(request.url).pathname;
    if(path=="/getstring"){
        console.log("request recieved");
        var string = choices[Math.floor(Math.random()*choices.length)];
        console.log("string '" + string + "' chosen");
        response.writeHead(200, {"Content-Type": "text/plain"});
        response.end(string);
        console.log("string sent");
    }else{
        fs.readFile('./index.html', function(err, file) {  
            if(err) {  
                // write an error response or nothing here  
                return;  
            }  
            response.writeHead(200, { 'Content-Type': 'text/html' });  
            response.end(file, "utf-8");  
        });
    }
}).listen(8001);
console.log("server initialized");

frontend (часть индекса.html):

function newGame()
{
   guessCnt=0;
   guess="";
   server();
   displayHash();
   displayGuessStr();
   displayGuessCnt();
}

function server()
{
   xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET","http://localhost:8001/getstring", true);
   xmlhttp.onreadystatechange=function(){
         if (xmlhttp.readyState==4 && xmlhttp.status==200){
           string=xmlhttp.responseText;
         }
   }
   xmlhttp.send();
}

вам нужно будет быть комфортно с AJAX. Используйте учебный центр mozilla, чтобы узнать о XMLHttpRequest. После того, как вы сможете использовать базовый объект XHR, вы, скорее всего, захотите использовать хорошую библиотеку AJAX вместо того, чтобы вручную писать кросс-браузерные запросы AJAX (например, в Т. е. вам нужно будет использовать ActiveXObject вместо XHR). AJAX в jQuery отлично, но если вам не нужно все остальное jQuery предложения, найти хорошую библиотеку AJAX здесь:http://microjs.com/. Вам также нужно будет освоиться с узлом.Яш документы, нашли здесь. Поиск http://google.com для некоторых хороших узлов.учебники по JS-серверу и статическому файловому серверу. http://nodetuts.com это хорошее место для начала.

обновление: я изменил response.sendHeader() новый response.writeHead() в коде выше !!!

экспресс делает этот вид вещей действительно интуитивно понятным. Синтаксис выглядит следующим образом:

var app = require('express').createServer();
app.get("/string", function(req, res) {
    var strings = ["rad", "bla", "ska"]
    var n = Math.floor(Math.random() * strings.length)
    res.send(strings[n])
})
app.listen(8001)

http://expressjs.com/guide.html

Если вы используете jQuery на стороне клиента, вы можете сделать что-то вроде этого:

$.get("/string", function(string) {
    alert(string)
})

я столкнулся со следующей ошибкой с кодом (nodejs 0.10.13), предоставленным амперсандом:

происхождения не допускается по контроля доступа-разрешить-происхождения

проблема была решена изменение

response.writeHead(200, {"Content-Type": "text/plain"});

до

response.writeHead(200, {
                 'Content-Type': 'text/html',
                 'Access-Control-Allow-Origin' : '*'});

здесь полностью функциональный пример того, что вы пытаетесь достичь. Я создал пример внутри hyperdev, а не jsFiddle, чтобы вы могли видеть серверный и клиентский код.

Просмотр Кода : https://hyperdev.com/#! / проект / Судьба-авторизация

Просмотр Рабочего Приложения:https://destiny-authorization.гипердев.космос/

этот код создает обработчик для запроса GET, который возвращает случайное строка:

app.get("/string", function(req, res) {
    var strings = ["string1", "string2", "string3"]
    var n = Math.floor(Math.random() * strings.length)
    res.send(strings[n])
});

этот код jQuery затем делает запрос ajax и получает случайную строку с сервера.

$.get("/string", function(string) {
  $('#txtString').val(string);
});

обратите внимание, что этот пример основан на коде от ответа Jamund Фергюсона, так что если вы найдете это полезным обязательно проголосовать за него. Я просто подумал, что этот пример поможет вам увидеть, как все сходится.