ロゴ
menu
HOME > ｊQuery・Javascript > 手癖で書いていたjQuery非同期通信の処理に関してもう一度確認する

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

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

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

サンプル

$(function() {
  $.ajax({
    type: "GET",
    url: "sample1.js",
    dataType: "script"
  });
});

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

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

サンプル

$(function() {
  $.ajax({
    url: "html.html",
    dataType: "html",
    }).done(function(html){
      $("#ajax2").html(html);
    }).fail(function(html){
      $("#ajax2").html('読み込みエラーです');
    });
});

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

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

サンプル

$(function() {
  $.ajax({
    url: "xml.xml",
    dataType: "xml",
    }).done(function(xml){
      var text = $(xml).find("data").text();
      $("#ajax3").text( text ).css({'color':'red'});
    }).fail(function(xml){
      $("#ajax3").html('読み込みエラーです');
    });
});

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

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

サンプル

$(function() {
  $.ajax({
    url: "proxy.php",
    dataType: "xml"
    }).done(function(xml){
      $("#blog").html(''); //ローダーを消す
      $(xml).find("item").each(function(){
        var title = $(this).find("title").text();
        $('#blog').append(title+'<br>');
      });
    }).fail(function(xml){
      $("#blog").html('取得に失敗しました');
    });
});

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

proxy.php

echo file_get_contents('https://studio-key.com/feed');

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

サンプル

 html,textを指定して取得する
$(function() {
  $(document).on('click','#button1',function(){
    $("#form1 p").remove(); //削除
      $.ajax({
            type: "POST",
            url: "ajax1.php",
            data: 'name1='+$("#name1").val(),
            dataType :'html' //html指定
      }).done(function(str){
        $("<p></p>").html(str).appendTo("#form1"); //HTMLで表示される
        $("<p></p>").text(str).appendTo("#form1"); //テキストで表示される
      }).fail(function(str){
        $('#form1').append('取得に失敗しました');
      });
  });
});

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

xmlを指定して取得する
$(function() {
  $(document).on('click','#button2',function(){
    $("#form2 p").remove(); //削除
      $.ajax({
            type: "POST",
            url: "ajax2.php",
            data: 'name2='+$("#name2").val(),
            dataType :'xml' //xml指定
      }).done(function(str){
       // $("<p></p>").html(str).appendTo("#form2"); //これはエラーになる
        $("<p></p>").text(str).appendTo("#form2"); //[object XMLDocument]
        $("<p></p>").text( $(str).find("name").text() ).appendTo("#form2");
        $("<p></p>").text( $(str).find("time").text() ).appendTo("#form2");
         
      }).fail(function(str){
        $('#form2').append('取得に失敗しました');
      });
  });
});

PHP側

header("Content-type: application/xml");
 echo '<!--?xml version="1.0" encoding="UTF-8" ?--> ' . "\n";
 ?>
<xml>
  <name><!--?php echo $_POST['name2']; ?--></name>
  <time><!--?php echo date('H:i:s'); ?--></time>
</xml>

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

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

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

<xml>
  <item>
    <title>TITLE</title>
    <link>http://</link>
  </item>
  <item>
    <title>TITLE</title>
    <link>http://</link>
  </item>
  <item>
    <title>TITLE</title>
    <link>http://</link>
  </item>
</xml>

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

$.ajax({
  url: "xml.php",
  dataType :'xml' 
}).done(function(xml){
   $(xml).find("item").each(function(){
     var title = $(this).find("title").text();
     var link = $(this).find("link").text();
   });
});

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

$.ajax({
  url: "xml.php",
  dataType :'xml' 
}).done(function(xml){
   $(xml).find("item").each(function(){
     var title = $(this).find("title").text();
     $("<li></li>").html(title).appendTo("ul");
   });
});

 まとめ

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

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