jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

手癖で書いていたjQuery非同期通信の処理に関してもう一度確認する

2015年3月10日
この記事は掲載から812日経過しています。
情報が古い可能性が有りますのでご了承下さい

需要が広がっている非同期通信ですが、どうしても手癖で書いてしまう事が多く、いけないなぁと思い、少し纏めてみました。

jQuery非同期通信で外部javascriptを読み込み実行する

サンプル

それほど利用シーンは多くないと思いますが、javascriptをロードする事が出来ます。

jQuery非同期通信でHTMLファイルを読み込む

サンプル

これは割と需要が多そうですね。例えばHTMLで作成したギャラリーをロードしたりなど。htmlである必要は無く、PHPでも構わないので、動的にPHPで生成したHTMLを表示なんて手は割と使えます。

jQuery非同期通信でxmlファイルを読み込む

サンプル

XML形式で書きだされたデータをループして表示するなど、便利です。

外部RSSなどからデータを得る

サンプル

サンプルはSTUDIO KEYのWordPressブログを取得しています。自ドメイン内だとそのままいけますが、外部ドメインは取得出来ませんので、PHPで以下のようなコードを書いてRSSを取り込みます。

proxy.php

jQuery非同期通信でPHPに値を送信して受け取る

サンプル

 html,textを指定して取得する

dataTypeにhtmを指定していますが、テキストで取り出すならtextでも構いません。また、htmlで取り出しても、取得する際にtext()指定するとHTMLコードがそのまま表示されます。

xmlを指定して取得する

PHP側

通信する側のPHPはヘッダーをXMLにしてデータを書き出します。この場合、html()で取り出すとエラーになり処理が止まります。text()では取り出せますが意味有りませんので例のように。

通信する側のPHPの処理に関して – XML

単に 1 を返したいとか0を返したいという事であれば、上で書いたようにPHPに1とechoするだけで良いですが、複数のデータを別々に得たいとか、ブログ記事のように同形式のデータを指定件数分得たいとか、そういう場合はXML形式にするのがベスト

itemで囲まれた3つのデータを吐き出すPHPを書いて、これを取得するケース

xml.phpから受け取ったXMLデータをitemで分割してループし、それぞれの値を得るものです。このデータをHTMLに書き出したい場合は、例えば以下のような感じで。

 まとめ

例えばアカウントが重複していないか確認するといったケースで非同期通信は威力を発揮します。ユーザーが入力した値をPHPに渡し、重複確認を行い結果をコールバックすれば、ユーザーはページリロード無しで重複しているかどうかを確認する事が出来ます。しかし、非同期通信処理である以上は、ソースコードで通信先のPHPが丸見えですので、安易に実装するとPHPを直で叩かれて大変な事に、なんて事も有りますのでご注意を。特にログインして利用するようなケースでは、非同期通信先のPHPにもユーザー認証を行う処理が必要です。こういうリスクを考えると、格好つけて非同期通信にせずともPOSTで処理した方が安心だと思われます。

逆に、例えばフォトギャラリーを表示するようなケースはHTMLを取得して表示すれば良いので、HTMLは書けるけど1jQueryは・・なんてケースでも割と簡単に実装可能だと思います。押したボタンによって違うHTMLをロードするといった事も慣れてくると簡単だと思います。jQueryに理解を深める事はもちろん重要ですが、無理にXMLで書きだしたものを取得してjQueryでHTMLを成形して・・・とか面倒な事を考えない事だと思います。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP