web-dev-qa-db-ja.com

node.jsを使用した基本的なAjaxの送受信

したがって、文字列のリクエストを受け取り、配列からランダムに選択して選択した文字列を返す非常に基本的なnode.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;
}
_

これにより、リクエストがserver.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つのファイルを「接続」する方法が正しくないと感じています。

  2. Localhostでこのページを呼び出す方法に少し混乱しています。フロントエンドの名前はindex.htmlで、サーバーは8001にポストします。server.jsを初期化した後、最初のhtmlページにアクセスするには、localhostでどのアドレスにアクセスする必要がありますか？ .listen(index.html)またはそのようなものに変更する必要がありますか？

  3. 私がこれを実装する方法に他の明らかな問題がありますか（_.responsetext_などを使用して）

（長い複数質問の投稿は申し訳ありませんが、さまざまなチュートリアルとnode.jsソースはすべて、ユーザーがこれらのことを既に理解していることを前提としています。）

javascriptajaxnode.js
54
Daniel Nill

  1. リクエストは、それをインスタンス化するserver.jsファイルではなく、サーバーに送信する必要があります。したがって、リクエストは次のようになります。xmlhttp.open("GET","http://localhost:8001/", true);また、フロントエンド（index.html）にサービスを提供し、同じURIでAJAXリクエストにサービスを提供しようとしています。これを実現するには、AJAXリクエストと通常のhttpアクセスリクエストを区別するロジックをserver.jsに導入する必要があります。これを行うには、次のいずれかを実行します。 GET/POSTデータを導入する（つまり、http://localhost:8001/?getstring=trueを呼び出す）か、AJAXリクエストに別のパスを使用する（つまり、http://localhost:8001/getstringを呼び出す）。サーバー側で、リクエストオブジェクトを調べて、レスポンスに何を書き込むかを決定する必要があります後者のオプションでは、リクエストを解析するために「url」モジュールを使用する必要があります。

  2. listen()を正しく呼び出していますが、応答を誤って記述しています。まず、 http：// localhost：8001 / に移動するときにindex.htmlを提供する場合は、response.write()を使用してファイルの内容を応答に書き込む必要があります。またはresponse.end()。最初に、ファイルシステムにアクセスするためにfs=require('fs')を含める必要があります。次に、実際にファイルを提供する必要があります。

  3. XMLHttpRequestは、非同期で使用し（3番目のパラメーター= true、既に行っているように）、応答で何かを実行する場合に指定するコールバック関数を必要とします。現在の方法では、stringはundefined（またはnull）になります。これは、その行がAJAX要求の前に実行されるためです。 （つまり、responseTextはまだ空です。）同期的に使用する場合（3番目のパラメーター= false）、これまでどおりインラインコードを記述できます。これは、リクエスト中にブラウザーをロックするため、推奨されません。 onreadystatechange関数で使用され、完了後に応答を処理できますXMLHttpRequestの基本を学習する必要がありますStarthere。

上記のすべてを組み込んだ簡単な実装を次に示します。

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

フロントエンド（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ライブラリを使用することをお勧めします。 、in IE XHRの代わりにActiveXObjectを使用する必要があります。）AJAXは優れていますが、他のすべてが必要ない場合jQuery申し出、良いAJAXライブラリをここで見つけてください： http： //microjs.com/ 。また、node.jsドキュメントを快適に取得する必要がありますhere。検索 http://google.com 優れたnode.jsサーバーおよび静的ファイルサーバーのチュートリアル http://nodetuts.com は開始するのに適した場所です。

更新：上記のコードでresponse.sendHeader()を新しいresponse.writeHead()に変更しました!!!

62
ampersand

Expressは、この種のものを本当に直感的にします。構文は次のようになります。

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)
})
29
Jamund Ferguson

アンパサンドによって提供されるコード（nodejs 0.10.13）で次のエラーに直面していました。

オリジンはaccess-control-allow-Originで許可されていません

変更は解決されました

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

に

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

以下は、あなたが達成しようとしていることの完全に機能的な例です。サーバー側とクライアント側のコードを確認できるように、jsFiddleではなくhyperdev内にサンプルを作成しました。

コードを表示： https://hyperdev.com/#!/project/destiny-authorization

動作中のアプリケーションの表示： https://destiny-authorization.hyperdev.space/

このコードは、ランダムな文字列を返す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 Fergusonの回答からのコードに基づいているため、これが有用であると思う場合は、必ず彼にも賛成してください。この例は、すべてがどのように組み合わされるかを確認するのに役立つと思いました。

0
Nick Painter