node.js에서 jQuery ajax 호출을 사용하는 방법
이것은 Stream data with 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);
단순한 테스트 페이지가 hello world node.js 예제가 아닌 다른 protocol/domain/port에 있는 경우 교차 도메인 요청을 수행하고 동일한 원본 정책을 위반하므로 jQuery ajax 호출(get 및 load)이 자동으로 실패합니다.이 도메인 간 작업을 수행하려면 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와 같은 프레임워크를 사용하여 웹 응용 프로그램을 구축하는 등 이 기능을 수행하는 다른 방법도 있습니다.
요짐보의 답변에 감사드립니다.그의 샘플에 추가하기 위해 $.getJ라는 jquery 메서드를 사용하고 싶었다.SON은 랜덤콜백을 쿼리 문자열에 넣기 때문에 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);
당신의 html 페이지는 다른 포트로 호스트 되어 있다고 생각합니다.대부분의 브라우저에서 동일한 원본 정책을 사용하려면 로드된 파일이 로드된 파일과 동일한 포트에 있어야 합니다.
서버측에서 다음과 같은 것을 사용합니다.
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)
언급URL : https://stackoverflow.com/questions/5373987/how-to-use-jquery-ajax-calls-with-node-js
'IT' 카테고리의 다른 글
| eslint의 이 'react/no-un-escape-Entitie' 위반을 어떻게 해결할 것인가? (0) | 2023.02.27 |
|---|---|
| Spring @PostConstruct vs. init-method 속성 (0) | 2023.02.27 |
| 헤더에서 Wordpress 주석 피드 링크 제거 (0) | 2023.02.22 |
| RestTemplate와 비교하여 가장을 사용할 경우의 장점과 단점은 무엇입니까? (0) | 2023.02.22 |
| 반응: 정적 propType이 필요한 이유 (0) | 2023.02.22 |