Javascript

WEBサイト作成

Ajax関数によるGET通信とPOST通信


jQueryの導入

jQueryはDOM(Document Object Model)を操作するためにJavaScriptを元に設計されたJavaScriptの拡張ライブラリですが、導入するには以下の方法があります。

  1. CDN(Content Delivery Network)をオンラインで使う(テーマ)
    jQuery本体非圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js
    jQuery本体圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    jQuery UI非圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js
    jQuery UI圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  2. 自サーバーに配置(WordPress本体)
    wp-includes/js/jquery/jquery.js

ブラウザの役割は、ユーザーが要求したURLのリソースをサーバーに要求して、ブラウザウィンドウに表示(レンダリング)することですが、内部では以下の2つを行なっています。

  1. HTMLを読み込むことでDOMを生成
  2. JavaScriptやjQueryがプログラムからDOMにアクセスできるようにNodeインターフェイスを提供

nodeインターフェイスを通してアクセスできるDOMの最上位オブジェクト(エレメント)は、html開始タグ<html>とhtml終了タグ</html>から生成されるdocumentオブジェクトです。

JavaScriptとjQueryの実行タイミング

ブラウザがHTMLページの読み込み時に処理を実行させる方法は主に3つあります。

  1. bodyタグのonload属性に関数指定
  2. JavaScriptのwindowオブジェクトに対してonloadでイベントを発生
  3. jQueryでDOM構築直後に処理を実行させる。

bodyタグを読み込んだ瞬間に、onload属性に指定したJavaScript関数を実行させるタイミングは、JavaScriptのwindowオブジェクトに対して関数onloadを呼び出すwindow.onloadと余り変わらないようです。

HTMLタグ内のonload属性に関数指定する場合

<html>
<head>
<script type="text/javascript" src=".js/hello.js">
</script>
</head>
    //loadHello関数呼び出し(関数にカッコが必要)
    <body onLoad="loadHello()">
    </body>
</html>

[hello.js]
function loadHello(){
  alert("Hello!");
}

JavaScriptのwindowオブジェクトに対してonloadでイベントを発生させる場合

<html>
<head>
<script type="text/javascript" src=".js/hello.js">
</script>
</head>
    <body>
    </body>
</html>

[hello.js]
function loadHello(){
  alert("Hello!");
}
//loadHello関数オブジェクトを代入(関数にカッコ必要なし)
window.onload=loadHello;

jQueryで関数指定する場合

一方でjQueryは、セレクタ(処理対象となるDOM要素を指定するための記法)に対してメソッド(処理)をドットで繋げていく言語であり、基本形は

  • ドル記号(”セレクタ”).メソッド(パラメータ);

であり、DOMが構築された直後に実行されるので速いです。

<script>
//DOM構築後に実行する範囲の指定方法
1. $(document).ready(function($){
2. $(document).ready(function(){
3. jQuery(function($){
4. jQuery(function(){
5. $(function(){
6. $(function($){
    //body閉じタグの直前なら、DOM読み込み済みなので範囲の指定は不要
     $("yama").css('color', 'red');

});
</script>

DOM構築後に実行する部分を中カッコ{~}内に記述しますが、その中括弧を囲む部分の書き方はいろいろあります。

例えば$(document).ready(function($){~});は「document構築準備が整ってからfunction内部を実行しろ」という意味になります。

また$(ドルマーク)はjQuery関数そのもののエイリアスなので、$(function(){~});とjQuery(function(){~});は同じ意味になります。

HTTPプロトコルのGETとPOST

以前PHPのデータ受け渡しについて以下のように書いたことがあります(「PHPによるHTMLフォームからのデータの受け取り方」から)。

  • HTMLフォームにデータを入力させて、ブラウザからデータをサーバーのファイルに引き継ぐ場合に使うのがGETメソッドかPOSTメソッドで、これらは全部HTTPプロトコルの中に定義されています。

ただ言葉の意味から考えてみるとGETはフォームに入力したデータを元ににサーバーから情報を取得することに重きを置いており、Google検索やWordPressの下書きとして保存などはGETです。

GETメソッドは、URLの後ろに「?」で始まり、「=」で結ばれた名前と値を「&」で連結したクエリ文字列によってデータを引き継ぎます。

一方POSTはフォームのデータを投稿することに重きを置いており、WordPressの新規投稿はPOSTになります。

<form action="target.php" method="post">
    //チェックボックスのキーに配列を使用
    <input type="checkbox" name="hp[]" value="iphone">iPhone</input>
    <input type="checkbox" name="hp[]" value="android">Android</input>
    <input type="checkbox" name="hp[]" value="blackberry">Blackberry</input>

    <input type="submit" name="klik" value="SEND"></input>
</form>
if(isset($_POST['klik'])){
    //hpも配列型変数
    $hp=$_POST['hp'];

    //配列のキーと値を取得
    foreach($hp as $key=>$value){
        print $key."=".$value."<br>";

    }
}

ちなみにURL(Uniform Resource Locator)は、現在ではより広義のURI(Uniform Resource Identifier)と呼ぶほうが適切らしいです。

しかしこの言葉がイマイチ一般に普及しきれていないのは、インターネットユーザーにとって呼び方は何であれ「インターネット上のアドレスを表すもの」という意味が重要なのであって、いまさら変えることに意味がないからかもしれません。

jQueryの$.ajax()関数とコールバック関数

ページのリフレッシュなしで、サーバープログラムにデータを渡して処理結果を受けとることができるAsynchronous(アシンクロナス)な非同期通信ですが、$.ajax()関数の引数としてfunction()というコールバック関数が渡されています。

<form> 
<input type ="button" id ="klik" value ="SEND">
<form>

<script>
$("#klik").on("click", function(){          //id属性klikの要素がclickされると
	$.ajax({
		url : testdata.json,        //testdata.jsonというサーバーにあるファイルを
		type : "GET",               //GETメソッドでサーバーから取得し
		dataType : "json",          //処理結果はjson形式で受信
		success : function(data){   //取得が成功したらtestdata.jsonをコールバック関数のfunctionの引数dataにセット 
			console.log(data.nama+data.zou);  //コンソール表示(コールバック関数functionの処理の中身)
		}
	});
});
</script>

サーバーから取得する元情報も、$.ajax()関数内で引数として渡す書き方も、キーと値で定義していくJSON形式に準拠しています。

JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている(Wikiより)。

サーバーから取得するJSONフォーマットのデータ

{
	"nama":"やま",
	"zou":"ぞう"
}

$.ajax()のshorthandメソッドである$.get()と$.post()

非同期通信でユーザービリティを高めるためには、AjaxをJavaScriptでガチで実装するよりjQueryのAjax関数、特にshorthandメソッドを使うと実装が楽です。

$.ajax()関数のshorthandメソッド(ショートカットみたいなもの)が$.load()や$.get()であり、引数の書き方が$.ajax()関数よりも簡素化されています。

<input type="text" name="sei" id="nm">
<input type="button" id="klik" value="send">
<div id="result"></div>

<script>
$('#klik').click(function(){    //id属性klikの要素がclickされたら
    $.get('show.php', {         //GETメソッドでshow.phpに対して
        name:$('#nm').val()     //id属性nmの要素の値を
        }, function(data){      //コールバック関数functionの引数として渡す。
        $('#result').html(data.message + "("+ data.length + ")");   //処理結果はid属性resultにhtml表示
    });
});
</script>

show.php

<?php
$rs=array(
	"message" => $_GET['name'],
	"length" => strlen($_GET['name'])
);

header('Content-Type: application/json; charset=utf-8');
echo json_encode($rs);





おすすめ記事一覧

大統領選挙で考えたギャップにハマるということ 1

ギャップにキュンとするというのは人間の本能みたいなもので、ジョコウィの私利私欲のない素朴なおじさん像と、その実強力なリーダーシップを発揮する実務派という内面が、一見普通の人だが実はスゴイというギャップ好きのインドネシア人に大ウケして、大衆は一種の集団催眠状態にあるようです。

情報の質のレベル 2

見える化された結果を共有化することで問題点が共通認識されますが、共有化が進むことで情報の持つ希少価値が薄れて困る人間がいる場合、有益な情報を独占することでポジションを高めようという政治力が働きます。

インドネシアのスタバの店員にありがたい人生の教訓を教わった件 3

いつものスタバでいつものアイスコーヒーを注文していると、だいたいなじみの店員が「今日は珍しい時間に来たねー」とか「今日もいつものアイスでいいのかなー」とか馴れ馴れしくフレンドリーに話しかけてきます。

宗教によって異なる「死んだらどうなる」の考え方 4

キリスト教もイスラム教もともにユダヤ教から派生した宗教であり、それぞれイエス・キリスト(本人が神)またはアッラーという唯一無二の神を信じます。

株価操作なんてインドネシア株では当たり前 5

株価は売り注文と買い注文により変動し、大量の売り注文を買う注文がたくさん入れば、他の投資家達は「俺も俺も」と続くことで株価が上がります。

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 6

インドネシア人は秘密の話は誰かに暴露しないと精神の安定を保てない人が多いため、内緒の話に情報の希少性は少なく信憑性も低いことが多いので、「ここだけの話」という枕詞付きで聞かされる話は話半分に聞いておいたほうがいいかもしれません。

日系企業のインドネシアでの存在意義 7

今のまま日本の人口減が続けば、内需は縮小の一途をたどるわけで、そうなると日本国内市場だけで生き残るのは難しいと判断する国内企業が、海外市場に活路を見出そうとするのは必然です。

チャンスはあるが勝てる分野を見つけるのが難しい 8

実際にインドネシアに住んでみて、自分で動いて人と話しをして、現地の事情を少しずつ理解していくにつれて、インドネシアで起業することが意外と手強いことに気づき、その難しさの原因は、高い送料と関税であったりローカル企業との競争であったり、就労ビザ(IMTA)や外国人技能開発基金(DPKK)などのランニングコストの高さであったりします。

インドネシアのシステムインテグレーション業界 9

先日JETRO(日本貿易振興機構)さんと、インドネシアの中小企業のIT投資について意見交換させていただく機会をいただいたのですが、そこで「システム投資のコストメリットはどのように説明できるのか」という、システムインテグレーターの存在価値にも関わる重要な問題提起がありました。

肉体と精神と心と魂 10

「Body and Soul」といえば、昨日の内閣改造に伴う人事で内閣府政務官に内定した自民党の今井絵理子参議院員がメンバーだったSPEEDのデビュー曲であり、インドネシアの老舗女性ファッションブランド名でもあります。

ジャカルタのラーメン市場 11

僕がインドネシアに初めて来たのが1997年10月、インドネシア語は分からないし、仕事は辛いし、周囲の人間は理不尽だし、一時期日本に帰りたくて仕方がない時期がありましたが、当時自分をかろうじてインドネシアに繋ぎ止める心の支えとなっていたのが、協栄プリンスビル(今のWisma Keiai)の日本食レストラン「五右衛門」であり、ここでキムチラーメンを食べることが唯一の楽しみと言っても過言ではありませんでした。

ブランド力、技術力、資金力の3要素 12

1998年のジャカルタ暴動後、ルピアが暴落し海外からのドル建て債務を抱えた国内企業が利子の支払いに苦しんでいた頃、僕は外貨が獲得できるインドネシアでの新しいビジネスを探していました。

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 13

先進国と後進国との間にある流行のタイムラグを利用して、先進国での成功例を後進国で実践するビジネスモデルをタイムマシン経営といいますが、インターネットの普及に伴い情報がフラット化してしまい、モノと情報のタイムラグが限りなく小さくなった今、先駆者である中小零細同業他社が乱立し市場が出来上がったところに、後発の大手が参入し先発零細を駆逐していく、という典型的な負けパターンにはまります。

サリナデパートとマクドナルド 14

本日5月10日を最後にインドネシアのマクドナルド第1号店であるサリナデパート店(Sarinah)が閉店になりますが、ジャカルタのショッピングモールが新しいコンセプトでモダンにリニューアルされ続ける中で、僕がインドネシアに来たばかりの20数年前には、若者の待ち合わせ場所の定番でもあったサリナデパートやブロックMのパサラヤ(Pasaraya)などは完全に時代に取り残されてしまいました。

不景気の歴史 15

僕がインドネシアに来てからこれまで何度か経済不況を見てきましたが、今回の新型コロナウィルスの感染拡大により、間違いなく景気後退しますので、数年後にはこれがコロナショックとかコロナ不況とか呼ばれるようになるのかもしれません。

日本のバブル経済崩壊後とインドネシアの通貨危機後 16

自分が大学に入学したのがバブル経済末期の1991年、土地も株価もMAX爆上げして、三菱地所がアメリカの象徴であるロックフェラーセンタービルを買収し、ジュリアナ東京でワンレンボディコン(登美丘高校ダンス部のバブリーダンスみたいなやつ)のお姉さん達が扇子振って踊っている時期でした。

内需と外需の自国経済に及ぼす影響 17

公共事業投資を行っても、お金が企業内や個人の貯蓄に滞留してしまい国内消費が増えないのが日本の状況であり、国内消費は増えても消費材の輸入品比率が高く、国内資産が海外に流出しているのがインドネシアの状況です。

2019年の総選挙を前にインドネシア政治史のおさらい 18

来年の大統領選挙(Pemilu Pilpres Pileg Indonesia 2019)に向けての選挙運動(Kampanye)を解禁するにあたり、投票用紙に印字される順番はジョコウィ現職大統領・マフル副大統領候補組が1番、プラボウォ大統領候補・サンディアガウノ副大統領候補組が2番と決まりました。

コーヒーをもっと楽しくもっと美味しく 19

インドネシアは北回帰線と南回帰線をはさむコーヒーベルトに位置するコーヒー栽培に適した国で、1602年の東インド会社の進出を契機にオランダの植民地支配が300年以上続き、その間アラビカ種のコーヒーが持ち込まれ、気候のいい高原地帯で栽培が開始されました。

インドネシア人の悪魔祓い 20

人間誰しも自分の中に悪魔が潜んでおり、それが何らかのきっかけで表面に出て来るという考え方自体には、背景に宗教が有るか無いかの違いだけで、基本的に理解できる話であり、それを信じるか信じないかは別として、そういう考えがあることを認めることは大切なことだと思います。

-WEBサイト作成

© 2020 バテラハイシステム Powered by STINGER