JS memo

お洒落にJavaScript。

2019年2月11日9:27

ajaxを同期的に処理した時のエラー

メインビジュアル

ajaxを同期的に処理した時のエラー

ajaxを同期的に処理する設定をするとGoogleから警告をいただいたので、その時の原因を探って見ました。

  1. ajaxとは
  2. エラー内容
  3. 注意点
  4. まとめ

ajaxとは

ブラウザ上でサーバーにリクエストを送ったり、データをもらったりすることができるAPI。

また非同期通信のためページ全体をリロードせずに外部ファイルのデータを取得することができます。

ちなみにW3Cによると、ajaxは開発者の夢らしいです笑。

主にネイティブで使用されるオブジェクトはXMLHttpRequestがあり、jQueryでは$.ajaxという手法が存在します。

XMLHttpRequestを知りたい方はコチラ→

エラー内容

ajaxは非同期通信なのですが、実は下記のように設定をすることで同期的に読み込むことが可能になります。

ネイティブのXMLHttpRequestの場合

xhr.open("GET", "url" false); // falseを追加

jQueryを使用した場合

$.ajax({
  url : urlLists[i],
  dataType : 'html',
  async: false, // この行を追加
  success : function(data){},
  error: function(data){}
});

それぞれ初期設定では非同期(async)になっているので、falseを追記して同期的に読み込むようにします。

しかし上記のコードをブラウザで実装するとGoogleディベロッパーツールから以下のような警告があります。

ディベロッパーツールの警告

翻訳すると、
<ページ上で同期的にXMLHttpRequestを実行すると、ユーザーエクスペリエンスに悪影響なので、おすすめしませんよ〜。>
と言うこと。

要するに、ajaxを同期的処理すると、ページの読み込みが遅くなって、ユーザーがイライラしちゃうと言うことですね。

そのため、ajax内で同期的処理する場合はajax自体を後で読み込むような設定にしなければいけないということですね。

注意点

警告内でもっと知りたかったらhttps://xhr.spec.whatwg.org/を読んで!とおすすめされたので読んでみました。

割と致命的なことが書かれていたので、注意しなければならないことをまとめました。

  • Window オブジェクトは使用不可
  • responseType属性においてdocumentやtextは使用不可

documentが使えないのは、読み込んだhtmlファイルをDOM操作できないと言うことなので、DOM操作が好きな私にとってはものすごく困りますね笑。

まとめ

そもそもajaxは非同期通信ですが、どうしてもajaxを同期通信にしたい場合は上記のことに注意して実行してください。