ajaxでpostするときに必要なリクエストヘッダ

JavascriptでAjaxを使わないなんて、福神漬けの無いカレーの様なもの・・・ いや、ラッキョ・・・マヨネーズ・・・ まあ、人それぞれに好き嫌いもあるかもしれないが、何が言いたいかというと、昨今のWEBページでは、Ajaxを使ってjavascriptが直接サーバーとのデータ連携を行うのは当たり前という話。 一昔前は、入力フォームは、formタグにsubmitボタンというのがセオリーでしたが、もはやそうしたお決まりのHTMLなど必要なく、formタグに囲まれていない入力項目や、任意エレメントの内部テキスト文字など、javascriptでアクセスできるものはなんでもAjaxを使って送信する事ができるようになってしまいました。 もちろん、シンプルな構成でformタグでの送信が悪いわけではありません。EFOなどの恩恵を入力するときに受けられるというメリットもありますが、リアルタイム性やらポーリングなどの精度を求められるシステムにおいては Ajaxは必須というワケなのです。

Ajaxのおさらい

過去に自分ライブラリとして、ajaxを便利に行えるプログラムを作ってあったので、jQueryを使わずにajaxを行いたい人は、そちらを参考にしてみてください。 [Javascript] Ajaxライブラリ [Javascript] Ajaxライブラリ このプログラムは長ったらしく書いてますが、要するに、 var httpoj = new XMLHttpRequest(); httpoj.open(method , url , async); httpoj.send(); とすると、サーバーにリクエストが投げられるというのを、ライブラリちっくに書いているだけなのですが、 実は上記の状態では、post通信をしても、postリクエストとしてのデータが送信されません。

ajaxでpost送信するには

httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 上記に加えて、この記述が必要になります。 リクエストヘッダを追加してあげないといけないんですね。 jQueryを使ってajax操作を行なっている人は、こうした事を気にせずにサーバーにパケットを投げまくっているはずですが、手作りしている人は、こうしたリクエストヘッダの内容などを把握しなければいけません。 同時にそれは、ネットワークパケットに詳しくなれるというメリットもあるので、できることなら、ライブラリに頼らずに一度ぐらいは自作して見る事をお勧めします。

今回のハマリング・ポイント

実はこんな記事を書いたのは、この内容を理解していなかったため、ajaxのデータ送信がうまくできずに、数時間にらめっこをしてしまった事から、同じ状態の人への「悩んでいるのは君だけでは無い」というメッセージを込めて送りたいと思います。 実はリクエストヘッダをもっと深く極めていくと、クローリング操作をする時や、任意サイトからのバイナリデータのダウンロードや、色々なセキュリティ対策などの知識も同時に身につくため、より深い技術認識が行えます。 実際僕も、金融庁からのXBRLダウンロードにこうしたリクエストヘッダをちゃんと理解できた事から対応する事ができたので、興味のある人は是非ともお勧めです。 さて、この記事を書いたらとたんにカレーが食べたくなってきましたね。 ココイチか、ゴーゴーだな。