2011-11-09

[Java][Javascript] Javaでwebサービス - Javascript と Java servletで ajax通信

フロントエンドとバックエンドを切り分けるために，
JavascriptとJava間をajaxでやりとりする．

Servlet部分

JavaからのデータをJavascriptで読む為にjson形式に変換する．

jsonを扱う為にライブラリが必要．
簡単に使えそうだったので，net.arnx.jsonic.JSONを使う．

外部jarを使うときは，WEB-INF/lib以下に入れる．

@WebServlet("/HttpServlet")
public class HttpServlet extends javax.servlet.http.HttpServlet {

    public HttpServlet() {
        super();
        }
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String val = request.getParameter("hoge");
 
       response.setContentType("application/json;charset=UTF-8");
        Map<String, Object> json = new HashMap<String, Object>();
        json.put("title", val+"hoge");
        response.getOutputStream().write(JSON.encode(json).getBytes("UTF-8"));
    }
}

request.getParameter でリクエストのパラメータを受け取れる．
response.setContentType でjson形式を指定．
response.getOutputStream().write で返すデータをレスポンスに書き込む．

JSON.encode(object)でオブジェクトをjson形式のStringに変換してくれる．
Streamに書き込むためにgetBytes("UTF-8")でStringをByte列に変換．

Javascript部分

function hoge(){
    var $button = $("#button");
    $button.bind("click",function(){
        var hoge1 = "hoge1";
        var param = {
                "hoge":hoge1
        };
        $.post("/プロジェクト名/HttpServlet", param, function(res){
            alert(res.title);
        },"json");
    });

}

json形式で受け取る場合，
keyを関数みたいにして値を取得出来る．

2011-11-08

[Java][Javacript] Javaでwebサービス - はじめに

Javaでwebサービスを立ち上げ中なのでそのメモ．
開発をmacで，運用をcentOSでを前提に．

フレームワークの指針として，フロントエンドの部分はjavascriptとhtmlで完結させる．
バックエンドとのやりとりはajaxで．

eclipse を使って開発します．

環境構築

・tomcat
・eclipse
・eclipseのtomcatプラグイン
・MySQL

eclipseでプロジェクト作成．

ファイル->新規->動的webプロジェクト
webモジュールの設定のところで「web.xmlデプロイメント記述子の生成」にチェックを．

出来たプロジェクトの中は，

「Javaリソース:srcの中」にJavaのソースを．
「WebContent」の中にhtmlやらjsやらのソースをおく．
WebContent/web.xmlにはwelcomeページやらエラーページのファイルの設定が書いてあります．

とりあえず，WebContent/html/index.htmlを作って，
web.xmlの4行目を
html/index.html
に変更．
「Javascriptリソース」の中にJavascriptのソースをいれるっぽいですがよくわからないので放置．
WebContent/javascriptのディレクトリを作ってそこにjsのソースを保存すれば良いと思います．

とりあえず動かす．

eclipseの
ウインドウ->ビューの表示->その他->サーバー->サーバーをクリック．
下の方にサーバーのタブが出るので
そこで右クリック->新規->サーバー
設定はデフォルトで大丈夫です．

プロジェクトを右クリック->実行->サーバーで実行