Базовый Ajax отправляет/получает с помощью node.js

Ответ 1

• Ваш запрос должен быть на сервере, а не на файле server.js, который его создает. Таким образом, запрос должен выглядеть примерно так: xmlhttp.open("GET","http://localhost:8001/", true); Кроме того, вы пытаетесь обслуживать front-end (index.html) и обслуживать запросы AJAX в том же URI. Для этого вам нужно будет ввести логику на ваш server.js, который будет различать ваши запросы AJAX и обычный запрос доступа к http. Для этого вам нужно либо ввести данные GET/POST (т.е. Позвонить http://localhost:8001/?getstring=true), либо использовать другой путь для ваших запросов AJAX (т.е. Вызов http://localhost:8001/getstring). На конце сервера вам нужно будет изучить объект запроса, чтобы определить, что писать в ответ. Для последнего варианта вам нужно использовать модуль 'url' для анализа запроса.

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

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

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

server.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 (часть index.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 в кросс-браузер (например, в IE вам нужно использовать ActiveXObject вместо XHR). AJAX в jQuery превосходна, но если вам не нужны все остальные jQuery, найдите хороший Библиотека AJAX здесь: http://microjs.com/. Вам также нужно будет подойти с документами node.js, найти здесь. Найдите http://google.com для некоторых хороших node.js серверов и статических файловых серверов. http://nodetuts.com - это хорошее место для начала.

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

Ответ 2

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

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

Ответ 3

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

происхождение не разрешено с помощью access-control-allow-origin

Проблема решена с изменением

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

to

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

Ответ 4

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

Просмотр кода: https://hyperdev.com/#!/project/destiny-authorization

Просмотреть рабочее приложение: https://destiny-authorization.hyperdev.space/

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

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 Ferguson, поэтому, если вы считаете это полезным, обязательно его повысите. Я просто подумал, что этот пример поможет вам увидеть, как все сочетается.