HOME > インドネシアのIT業界｜市場動向・セキュリティ課題・日系企業の戦略 > HTTPプロトコルのGETとPOST｜文字化け防止とjQuery Ajax活用法

HTTPプロトコルのGETとPOST｜文字化け防止とjQuery Ajax活用法

2015/11/14

Javascript

ブラウザとWEBサーバー間のデータ通信であるHTTPプロトコルはOSI参照モデルのセッション層に属しており、ブラウザ上のHTMLフォームに入力したデータをサーバーに引き継ぐGETメソッドとPOSTメソッドもHTTPプロトコルに定義されています。

WEBサーバーはUTF-8N形式でエンコードしてブラウザに返すため、Windowsで作成したShift-JIS形式の文章をサーバーにアップロードして、ブラウザからサーバーにページ要求した場合、サーバーがUTF-8Nでエンコードしたときに文字化けが発生します。

フォーム部品のinputタグのtype属性の値にはtext(テキストボックス)やsubmit(送信ボタン)があり、これらの最初と最後を囲って入力値を送信するのがformタグで、action属性に処理ファイル名、type属性に送信方法（POSTかGET）を指定すると「HTTPプロトコルのPOSTメソッドを用いてmail等のフィールド名のコントロールに格納された値をtarget.phpに渡してね」と意味づけできます。

ジャカルタ

インドネシアのIT業界｜市場動向・セキュリティ課題・日系企業の戦略

インドネシアのIT業界はインターネット技術の発展により急速に成長している。インドネシアでは違法コピーが多く、KMS認証クラックがマルウェアの標的になりやすい。インドネシアのサイバー攻撃は元社員による怨恨が原因であることが多い。

続きを見る

この記事でわかること

  • HTTPプロトコルのGETとPOSTメソッドはデータ送受信に使われる。
  • 文字化けはサーバーとクライアント間の文字コードの不一致で発生する。
  • jQueryの$.ajax()関数を使うと非同期通信が可能になる。
  • jQueryのshorthandメソッドでAjaxの実装が簡素化できる。
  • JSON形式はデータの受け渡しに広く利用されている。

クライアントとサーバー間の通信

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

クライアントPCで作成するPHPやHTMLファイルは、Windows上で文字コードに1対1で変換されて保存されます。このときUTF-8Nでエンコード（符号化）することにより、サーバーがクライアントに表示する際のエンコードが正しくUTF-8Nで行われ、クライアントPCでのデコード（復号化）も同じくUTF-8Nで行われます。

以下はアップロードしたファイルの文字コードとサーバーのエンコードが異なることによる文字化けの例。

ネットワーク通信構造を7階層のプロトコルに分けたのがOSI参照モデルなんですが、クライアント(Webブラウザ)とWebサーバとがデータを送受信するのに使われるのがHTTPプロトコル。OSI参照モデルではセッション層に属しています。

  • 7. アプリケーション層（HTTP,FTP,DNS)
  • 6. プレゼンテーション層（HTTP,FTP,DNS)
  • 5. セッション層（HTTP,FTP,DNS)
  • 4. トランスポート層（TCP）
  • 3. ネットワーク層（IPルーティング）
  • 2. データリンク層（Ethernet）
  • 1. 物理層（UTPケーブル, ネットワークアダプタ）
  1. PCで文章を書いて自動的にShift-JISでエンコード化され保存
  2. クライアントからサーバーにページアップロード
  3. クライアントからサーバーにページ要求
  4. サーバーはクライアントに文章をUTF-8Nでエンコードして表示
  5. 文字化け

jQueryの導入

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

Javascript

PHP・JavaScript・VBの書き方の比較整理

プログラムのコードは変数、値（リテラル）、式、制御文の4つから構成される。PHPとJavaScriptでは、オブジェクト指向型のコードを書くことができるが、通常の関数としても実行可能である。JavaScriptはクライアントサイドで動…

続きを見る

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

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

JavaScriptとjQueryの実行タイミング

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

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

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

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で関数指定する場合

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

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

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

一方で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>

HTTPプロトコルのGETとPOST

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

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

PHPのデータ受け渡しのでは、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>";

    }
}

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

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

ページのリフレッシュなしで、サーバープログラムにデータを渡して処理結果を受けとることができる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>

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);

よくある質問｜HTTPプロトコルとAjax活用

本稿の内容に沿って、繰り返し出る問いを短く整理します。

HTTPプロトコルのGETとPOSTの違いは何ですか？

GETメソッドはURLの後ろにクエリ文字列を付けてデータを送信し、主にデータの取得に使われます。一方、POSTメソッドはデータをHTTPリクエストのボディに含めて送信し、データの投稿に適しています。

jQueryの$.ajax()関数の役割は何ですか？

jQueryの$.ajax()関数は、非同期通信を行うための関数で、ページのリフレッシュなしでサーバープログラムにデータを渡し、処理結果を受け取ることができます。コールバック関数を引数として渡すことで、通信が成功した際の処理を指定できます。

jQueryでのDOM操作の基本形は何ですか？

jQueryでのDOM操作は、セレクタで対象のDOM要素を指定し、メソッドをドットで繋げて処理を行います。基本形は「ドル記号（"セレクタ"）.メソッド（パラメータ）」で、DOMが構築された直後に実行されるため、処理が速いです。