#node.jsとJQueryのajaxとを通信してみる
今回機会があり、フロント側のことしか学習してこなかった著者がバックとの通信を始め、色々とハマったことがあるのでメモ程度として使う
#node.jsとJQueryの導入
たくさんの紹介サイトがあるので、導入部分は割愛
jQuery入門講座
著者も学習当初はよく利用したサイト
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
導入から簡単な動きの確認もできます。
#npmを使って必要なモジュールをインストールする
今回はexpressというモジュールを使用
導入
Expressのインストール
#実際に通信をしてみる
今回はjson形式をnode.jsに送ってみる
以下ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<title>sample</title>
</head>
<body>
<input type="button" id="gonode" value="通信">
<script>
$(function(){
$('gonode').click(function(){
alert('');
$.ajax({
async: false,
url: 'http://localhost:8124',
type: 'post',
data:{"name": "musa"},
dataType: 'json'
}).done(function(res){
console.debug(res);
}).fail(function(xhr, status, error){
alert(status);
});
});
});
</script>
</body>
</html>
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.post('/',function(req, res){
var obj = {};
console.log('body: ' + JSON.stringify(req.body.name));
var rejson = JSON.stringify(req.body);
res.send(rejson);
});
app.listen(8124);
これで準備万端。通信開始
コンソール上にbody: musaと表示されて成功！！
#と思いきや
alertでerrorが出できた。
どうやらfail処理に行ってしまったようだ(doneは成功時の処理、failは失敗時の処理)
なぜなのか理解できなかったので、ネットで聞いたり、調べていくと
#CORSという聞いたことのない単語が
以下説明と解決策
expressにてCORSを許可する
なるほどと思い、早速やってみる
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(function(req, res, next){
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
})
app.post('/',function(req, res){
var obj = {};
console.log('body: ' + JSON.stringify(req.body.name));
var rejson = JSON.stringify(req.body);
res.send(rejson);
});
app.listen(8124);
すると、doneの処理にいき、ブラウザのconsole上に{name:"musa"}と表示されるようになった。
#まとめ
サーバー周りはやっぱり苦手。
JavaScriptとnode.jsの接続方法はたくさんあったが、難しかったから自分流にやってみたが、うまくできる人はもっと上手くできるのかもしれないと思った。
これを応用すれば、データベースの接続も可能だと思うので、今度はデータベースの接続をする(むしろそれが目的)
以下利用したOS,サーバー等
ubuntu(仮想マシン)
apache2