知らなかった！Ajaxの検証ブラウザ firefox【動画】

カテゴリー︎： 【Ajax】・【なるほど！】

Ajaxのお勉強する際に

ローカルサーバーでテストするのが当たり前！

だと思っていた。。。

FireFoxなら、Ajaxのテストが簡単にできるのね！

知らなかった。。。初めて知った

ちなみに、　chrome, safari　では無理〜

（１） 準備　読み込むhtmlを作る
↓load.htmlを作る

ローカルサーバー起動しなくても、FireFoxで表示確認できた！

(2) Ajax実行するhtmlを作る
↓ajax.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Ajaxで読み込む</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href="#" id="btn">Ajaxで読み込む</a>
<p>クリックするとload.htmlの内容を表示する</p>
<span id="show"></span>
<script>
$(function() {
  $('#btn').click(function() {
    $.ajax({
      type: 'GET',//送信するリクエストの種類（GET,POST）
      url: 'load.html',//読み込むファイル名
      dataType: 'html',//受け取るデータの種類(XML,JSON)
      
      //データの受け取りが成功した時の処理
      success: function(data) {
        $('p').append('<br>↓load.htmlのデータ読み込み成功');
        $('#show').append(data);//span #showに load.htmlの内容を表示する
      },
      //データの受け取りが失敗した時の処理
      error:function() {
        alert('読み込みエラー（Chrome,Safariはダメ）');
      }
    });
  });
});
</script>
</body>
</html>

【動画】　検証ブラウザ
左側　chrome
中央　safari
右側　firefox
PAGE TOP