node.js와 함께 기본 Ajax 송수신

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. localhost에서 이 를 어떻게 해야 하는지 잘 지수 8001이 되다serverserver.js를 한 후 첫에서 어떤 ?★★★★★★★★★★로 바꿀까요?.listen(index.html)뭐런거?

3. ).responsetext의 개요)

(멀티 질문 투고가 길어서 죄송합니다.다양한 튜토리얼과 node.discs 소스에서는 사용자가 이미 이러한 내용을 이해하고 있다고 가정하고 있습니다.)

1. 요청은 서버를 인스턴스화하는 server.js 파일이 아니라 서버에 해야 합니다.이 해요.xmlhttp.open("GET","http://localhost:8001/", true);index.html(인덱스.html) AJAX URI입니다.이를 위해서는 AJAX 요청과 일반 http 액세스 요청을 구별하는 논리를 server.js에 도입해야 합니다.를 들면, GET/POST 데이터(전화: 「GET/POST 데이터」, 「GET/POST 데이터」, 「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를 비동기적으로 사용하고(세 번째 파라미터 = true), 응답에 대해 작업을 수행할 경우 지정된 콜백 함수가 필요합니다. 그대로라면string 되다undefined (아마도)nullAJAX 요구가 완료되기 전에 행이 실행되기 때문입니다(즉, responseText는 아직 비어 있습니다).동기적으로 사용하는 경우(세 번째 매개 변수 = false)와 같이 인라인 코드를 작성할 수 있습니다.이는 요청 중에 브라우저를 잠그기 때문에 권장되지 않습니다.비동기 조작은 보통 onready state change 함수와 함께 사용되며, 이 함수는 응답이 완료되면 이를 처리할 수 있습니다.XMLHttpRequest의 기본을 익혀야 합니다.여기서부터 시작하세요.

다음은 위의 모든 것을 포함하는 간단한 구현입니다.

server.displays:

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.frontend의 일부):

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에 익숙해져야 합니다.XMLHttpRequest에 대해 알아보려면 Mozilla 학습 센터를 사용하십시오.기본적인 XHR 객체를 사용할 수 있게 되면 크로스 브라우저의 AJAX 요구를 수동으로 작성하는 대신 적절한 AJAX 라이브러리를 사용하는 것이 좋습니다(예를 들어 IE에서는 XHR 대신 ActiveXObject를 사용해야 합니다).jQuery의 AJAX는 훌륭하지만, jQuery가 제공하는 다른 모든 것이 필요한 것은 아닙니다.여기서 좋은 AJAX 라이브러리를 찾아주세요.http://microjs.com/여기에 있는 node.js 문서에도 익숙해져야 합니다.http://google.com 에서 node.display 서버와 정적 파일서버 튜토리얼을 검색해 주세요.http://nodetuts.com 를 시작하는 것이 좋습니다.

:했습니다.response.sendHeader()(新)으로response.writeHead()★★★★★★★★!!!

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)

https://expressjs.com

클라이언트 측에서 jQuery를 사용하는 경우 다음과 같은 작업을 수행할 수 있습니다.

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

앰퍼샌드에 의해 제공된 코드(nodejs 0.10.13)에서 다음 오류가 발생했습니다.

access-control-allow-mails에서 출발지가 허용되지 않습니다.

변경으로 인해 문제가 해결되었습니다.

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

로.

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

여기에서는, 고객이 달성하려고 하는 것을 완전하게 기능하는 예를 나타냅니다.서버측 코드와 클라이언트측의 코드를 확인할 수 있도록 jsFiddle이 아닌 hyperdev의 내부에 예를 작성했습니다.

코드 표시: https://hyperdev.com/#!/project/http-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의 답변에 근거한 것이므로, 이것이 도움이 된다고 생각되는 경우는, 반드시 그에게도 투표해 주세요.이 예제가 모든 것이 어떻게 맞물려 있는지 보는 데 도움이 될 것 같아서요.

언급URL : https://stackoverflow.com/questions/6011984/basic-ajax-send-receive-with-node-js