jQueryのget()メソッドの使い方やパラメーターについて

＜目次＞

(１) jQueryのget()メソッドの使い方やパラメーターについて
　 (１-１) get()メソッドの概要
　 (１-２) get()メソッドのサンプルプログラム

(１) jQueryのget()メソッドの使い方やパラメーターについて

(１-１) get()メソッドの概要

jQueryのget()メソッドはHTTPのGETリクエストを用いて、サーバ（の指定したURL）からのデータを取得するために使われます。

■構文

jQuery.get(①url[,②data][,③success][,④dataType])

また「jQuery」の部分は省略して「$」と記述できるので、以下も同じ意味になります（以降は「$.get」の形式で書いていきます）。

$.get(①url[,②data][,③success][,④dataType])

加えて、「$.get」は「$.ajax」の省略形でもあり、つまり「非同期」（サーバの応答を待たずにクライアント操作可能＝非同期）の処理であるという事になります。

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

それぞれの引数①～④の意味は次の通りです。

■引数の説明

①url：String型

リクエスト先のURLをString形式で保持します。Servlet等を指定する事も可能です。

（例）Servlet名を指定

'GetUserServlet'

②data：String型／PlainObject型（複数のKey-Valueペアを保持）

リクエストと一緒にサーバに渡されるデータです。

（例）

{[要素のid属性] : [何かの値（JavaScriptの変数とか）]}

③success：Function()

リクエストが成功した際に実行されるコールバック関数です。このコールバック関数は戻り値となるデータに渡され、MIMEタイプの値に応じてxml、text、.jsなど様々になります。

（例①）

“sample.asp”に対してリクエストを送るのみ（成功しても何もしない）

$.get("sample.asp");

（例②）

“sample.asp”に対してリクエストを送り、第二引数のデータを併せて送る（成功しても何もしない）。

$.get("sample.asp", { name:"MyName", address:"Tokyo" });
$.get("sample.asp", { 'fruits', ["Apple","Banana","Cherry"] });

④dataType：String
サーバから返却されるデータの型を指定します。指定ない場合は(xml, json, script, text, html)の中から推定します。

＞目次にもどる

(１-２) get()メソッドのサンプルプログラム

jQueryのget()メソッドのURLは「サーブレット」を指定する事が出来るため、画面から入力されたデータをサーブレットに渡して処理し、その結果を即時に画面に反映する、といった処理も可能になります。今回はそのサンプルプログラムをご紹介します。

（処理概要）

画面（JSP）から「名前」を入力してボタンを押下すると、下に挨拶メッセージが表示されます。内部的にはボタン押下時に下記の処理が実行されます。

・JavaScript処理で今回ご紹介した「get()」メソッドを使用し、更にServletを呼び出し

・Servletにて挨拶メッセージを生成
・get()メソッドのコールバック関数を利用して、Servletの処理結果（挨拶）を画面（JSP）に表示

（図１２１）

■JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Get method example</title>

<%--１つ目のscript：jQueryのライブラリを読み込み--%>
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<%--２つ目のscript：getメソッドを使って挨拶を表示するjsの読み込み--%>
<script src="js/IT0293_jQuery_Get.js" type="text/javascript"></script>
</head>
<body>

        <form>
                お名前を入力してください：<input type="text" id="u_name" />
                <input type="button" value="入力完了" onClick="IT0293_greeting()">
        </form>
        <br>
        <br>
        <strong>Servlet Response</strong>:
        <%-- ボタンを押すと、ここに挨拶が表示されます --%>
        <div id="GetServletResponse"></div>
</body>
</html>

（図１２２）

■JavaScript

本記事のメインテーマであるjQueryのgetメソッドを含むJavaScriptです。

function IT0293_greeting() {
    /* 画面に入力された名前を取得 */
    var name = $('#u_name').val();
    /* getでサーブレット「IT0293_get」を呼び出し、名前を渡して挨拶を画面に表示 */
    $.get('IT0293_get'
                ,{u_name : name}
                , function(responseText) {
                        $('#GetServletResponse').text(responseText);
                }
    );
}

（図１２３）

■Servlet

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/IT0293_get")
public class IT0293_jQuery_Get extends HttpServlet {
        private static final long serialVersionUID = 1L;
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                //名前の入力が無い場合は「Guest User」にする
                String name = request.getParameter("u_name").trim();
                if(name == null || name.equals("")){
                        name = "Guest User";
                }
                //挨拶文の作成
                String sayhello = "Have a nice day " + name;
                //レスポンスに挨拶文を書き込み
                response.setContentType("text/html");
                response.getWriter().write(sayhello);
        }
}

（図１２４）実行結果

（動画）実行結果イメージ

＞目次にもどる