>> JavaScript入門トップに戻る
前回は、単純にGETでデータを受信して表示するだけでしたが、
今回はデータをこちらからも送信して受信する方法を紹介します。
その前に、前回少し説明しましたが、
setRequestHeader関数を使う必要があります。
これは、サーバにデータを送信するときに、送信するデータがどういう形式にものなのかを設定するためのものです。
第一引数にデータタイプ、第二引数に値を指定します。
通常はユーザにフォームデータを入力してもらって、それを送信すると思いますので、
第一引数は【Content-Type】、
第二引数は【application/x-www-form-urlencoded; charset=utf-8】
が一般的かと思います。
もちろん文字コードが違えば、charsetの部分を変えてください。
通常は、
ajaxオブジェクト.setRequestHeader('Content-Type',
"application/x-www-form-urlencoded; charset=utf-8");
こんな感じになると思います。
さて、次にパラメータを付加して送信する方法を説明します。
たとえば、変数で
test=10;
figure=100;
という値があるとします。
これをGETでサーバ側のCGIへ送信する場合は、
openメソッドでこのように書きます。
open("GET",CGIのURL/?test=10&figure=100,true);
と書きます。
CGIのURL後ろにスラッシュを置き、?マークをつけた後に、
変数名=値&変数名=値、
と変数名と値をセットで書きます。
複数変数がある場合は、アンパサンドでくっつけます。
この状態でsendメソッドはnullで実行します。
これでCGI側では、test変数とfigure変数の値が受け取れます。
また、今回は数字でしたが、日本語などの文字列を送信する場合は、
専用の関数で変換してやる必要があります。
その関数が、encodeURIComponent関数です。
引数に対象の文字列を指定してやると、フォームで送信したときと同じように変換された文字列を返してくれます。
その値を上記のように変数名と一緒に指定してやればよいです。
openメッソドに書いてある、testやfigureという名前は、
CGI側でデータを受け取るときの名前です。
別の名前で受け取りたければ好きな名前に変えて構いません。
次にPOSTを使って送信する場合ですが、
openメソッドに関しては、
open("POST",CGIのURL,true);
このようにCGIのURLだけを指定し、sendメソッドで、
"test=10&figure=100"
というようなパラメータの文字列だけを指定して送信します。
もちろん日本語文字列がある場合は、先程のencodeURIComponent関数を使います。
以上が、パラメータを付加してAjaxで通信する方法です。
覚えるだけだと思うのでそんなに難しくはないと思います。
次回は正規表現について説明します。
>> 【正規表現】に進む
>> JavaScript入門トップに戻る
パラメータを使ったajax通信
今回はデータをこちらからも送信して受信する方法を紹介します。
その前に、前回少し説明しましたが、
setRequestHeader関数を使う必要があります。
これは、サーバにデータを送信するときに、送信するデータがどういう形式にものなのかを設定するためのものです。
第一引数にデータタイプ、第二引数に値を指定します。
通常はユーザにフォームデータを入力してもらって、それを送信すると思いますので、
第一引数は【Content-Type】、
第二引数は【application/x-www-form-urlencoded; charset=utf-8】
が一般的かと思います。
もちろん文字コードが違えば、charsetの部分を変えてください。
通常は、
ajaxオブジェクト.setRequestHeader('Content-Type',
"application/x-www-form-urlencoded; charset=utf-8");
こんな感じになると思います。
さて、次にパラメータを付加して送信する方法を説明します。
たとえば、変数で
test=10;
figure=100;
という値があるとします。
これをGETでサーバ側のCGIへ送信する場合は、
openメソッドでこのように書きます。
open("GET",CGIのURL/?test=10&figure=100,true);
と書きます。
CGIのURL後ろにスラッシュを置き、?マークをつけた後に、
変数名=値&変数名=値、
と変数名と値をセットで書きます。
複数変数がある場合は、アンパサンドでくっつけます。
この状態でsendメソッドはnullで実行します。
これでCGI側では、test変数とfigure変数の値が受け取れます。
また、今回は数字でしたが、日本語などの文字列を送信する場合は、
専用の関数で変換してやる必要があります。
その関数が、encodeURIComponent関数です。
引数に対象の文字列を指定してやると、フォームで送信したときと同じように変換された文字列を返してくれます。
その値を上記のように変数名と一緒に指定してやればよいです。
openメッソドに書いてある、testやfigureという名前は、
CGI側でデータを受け取るときの名前です。
別の名前で受け取りたければ好きな名前に変えて構いません。
次にPOSTを使って送信する場合ですが、
openメソッドに関しては、
open("POST",CGIのURL,true);
このようにCGIのURLだけを指定し、sendメソッドで、
"test=10&figure=100"
というようなパラメータの文字列だけを指定して送信します。
もちろん日本語文字列がある場合は、先程のencodeURIComponent関数を使います。
以上が、パラメータを付加してAjaxで通信する方法です。
覚えるだけだと思うのでそんなに難しくはないと思います。
次回は正規表現について説明します。
>> 【正規表現】に進む
>> JavaScript入門トップに戻る
