XMLHttpRequestとリクエストヘッダ

JavaScript

バックエンドシステム側で、XMLHttpRequestによるリクエストなのか、通常のリクエストなのかを判別したい時がある。処理内容は全く同じだが、XMLHttpRequestによるリクエストなら画面再描画が不要で、必要なデータだけちょろっと返すだけで良く、それをスマートに切り替えたい。

JavaScriptでリクエストにちょっと細工（クエリパラメータを足しておくとか）すればいいのだけれど、本当はもっときれいにやりたい。Railsだとxhr?とかいうのがあって…みたいな事もあり、それをかなえるカラクリも存在している筈。

と思って探してみたのだけれど、なかなかそういう記述を見つけられないでいた。で、探すのが面倒になってリクエストヘッダのダンプを調べた。

#!/usr/bin/perl
use strict;
use warnings;
use CGI::Carp qw(fatalsToBrowser);

print "Content-Type: text/plain;charset=utf-8?n?n";
print '<h1>ENVIRONMENT</h1>';
print '<table>';
while ( my ( $key, $value ) = each %ENV ) {
    printf '<tr><th>%s</th><td>%s</td></tr>', $key, $value;
}
print '</table>';

exit;
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Type-Script" content="text/javascript" />
    <script type="text/javascript" src="/js/prototype.js"></script>
    <title>TEST</title>
  </head>
  <body>
    <h1>TEST</h1>
    <form action="/misc/header.cgi" method="post" id="test-form">
      <div><input type="text" name="key1" value="key1" /></div>
      <div><input type="text" name="key2" value="key2" /></div>
      <div><input type="submit" value="submit" /></div>
    </form>
    <div id="response">response</div>
    <script type="text/javascript">
Event.observe( window, 'load', function(){
        Event.observe( 'test-form', 'submit', function(){
                new Ajax.Request(
                             '/misc/header.cgi',
                             {
                                 method: 'post',
                                 parameters: Form.serialize('test-form'),
                                 onSuccess: function( transport ){
                                     $('response').innerHTML = transport.responseText;
                                 },
                                 onFailure: function(){
                                     $('response').innerHTML = 'failure';
                                 }
                             }
                             );
            });
        $('test-form').onsubmit = function(){ return false; };
    });
    </script>
  </body>
</html>

テスト用にしては（いらんところが）豪華だけれど、まぁ適当に。

で。それっぽいのは以下。

HTTP_X_REQUESTED_WITH | XMLHttpRequest

これで判別しているんだね。確かにHTTP_X_REQUESTED_WITHで検索をかけると、多少は結果が返ってくる。（セカンドライフのとかね…。）このヘッダのことをもっと宣伝してくれ！と思った。