「JavaScript」タグアーカイブ

JavaScriptの無名関数の実行

JavaScriptの実行を無名関数にして、意図しない変数の上書きを防止します。

基本的に、普通に宣言したJavaScriptの変数はグローバルなので、注意しないと意図しない変数の上書きや、エラーが発生することがあります。そのような時には、無名関数化して実行させることでエラーを回避できます。

 書き方

 この書き方をするだけで、varで宣言した変数がローカル変数となり、ほかのJavaScriptが定義した変数を上書きすることが無くなります。

使いどころ

例えば、私が経験した実例としては、Webページのコンテンツのデザイン・制作をA社に依頼して、もらったHTMLにB社のアクセス解析タグを埋め込みました。すると、コンテンツ側もアクセス解析ツールのタグ側もユーザエージェント(OSやブラウザ)の判定結果を同じ変数名の変数に格納しており、競合してエラーになりました。

このような場合、ページ上の他の処理に影響を与えないような書き方をすることが望ましく(特にこの場合はアクセス解析ツール側が)、上記のような無名関数による実行が有効です。

実行例

 上記を実行すると、「num=2」が2回表示されます。決して無名関数内で宣言したnumで上書きされることはありません。もし、5~7行目が無名関数になっていない場合、2回目のalertに影響が出てしまいます。そして、もし、5~7行目がアクセス解析タグの処理の場合、それ以外の部分の本来のページ描画の処理に悪影響を与えることになってしまいます。(サンプルコードが雑ですいません。。。)

このやり方は、いろいろな人が一つのコンテンツに手を加える場合、特にアクセス解析タグのように後から入れることが多いもので有効ですので、私は無名関数化して、画面上の既存の処理に影響を与えないようにしています。(^∀^)


XMLHttpRequestでクロスドメインにCookieを送信する

仕事で少し調べたので、その時のメモです。

XMLHttpRequestでクロスドメインにリクエストを送信する時にCookieもリクエストに含めたい場合は以下のように書きます。

3行目の「withCredentials」プロパティをtrueに設定する必要があります。

【ソースコード詳細】

1行目: var xhr = new XMLHttpRequest();
 → XMLHttpRequestオブジェクトを作成します。

2行目: xhr.open(‘GET’, ‘http://test.com/rest.php’, true);
 → openメソッドでリクエストを初期化する。左から順にメソッド(GET、POSTなど)、URL、非同期フラグを指定します。

3行目: xhr.withCredentials = true;
 → withCredentialsプロパティをtrueにセットする(デフォルトはfalse)。これで、Cookieが送れるようになります。

4行目以降: xhr.onreadystatechange = function() {・・・・・・・
 → 非同期通信にしている場合は、readyState プロパティが変わる毎に呼び出されるonreadystatechangeに匿名関数を代入して、readyStateが4(通信完了)になった時に、APIから取得した文字列(responseText)をalertで表示しています。

※注意※
XMLHttpRequest Level2に対応したブラウザでしか使用できません。IE8、IE9とかでは対応できません。

ブラウザごとの対応状況を調べるにこちらの記事↓
HTML5やCSS3のブラウザごとの対応状況の調べ方