読者です 読者をやめる 読者になる 読者になる

22歳フリーランスエンジニアの話

22歳でほとんどスキルもないのにフリーランスという荒波を生きる男のブログです。

ajaxを世界一簡単なサンプルとともに入門する

f:id:babashun1024:20170328145000j:plain
どうも。フリーランスです。


最近まで僕はAjaxを使ったことありませんでした。

「Ajaxって何か難しいイメージあるしちょっと.....」
と思っていました。


しかし案件の都合でどうしても書かなければいけなくなり、書いてみると


「これ超簡単で超便利やん!!」
「Ajax最高!!」


と、一瞬で手のひらを返ししました。


今回はそんな素晴らしい技術であるAjaxについて、今更ではありますが世界一簡単な例で解説を行っていきたいと思います。


Ajax童貞のみなさん。今がチャンスです。
この簡単なサンプルで卒業しちゃいましょう。

Ajaxとは

まずはAjaxとは何か理解していきましょう。

Ajax発祥の人によると

standards-based presentation using XHTML and CSS (XHTMLとCSSを使った標準規格のプレゼンテーション)

dynamic display and interaction using the Document Object Model (ドキュメント・オブジェクト・モデル(DOM)を使ったダイナミックな表示と相互のやりとり)

data interchange and manipulation using XML and XSLT (XMLとXSLTを使用してデータ変換と操作)

asynchronous data retrieval using XMLHttpRequest (XMLHttpRequestを利用した非同期なデータの検索)

and JavaScript binding everything together (そして、JavaScriptがそれらを一緒にしてしまう)



ちょっと何言ってるかわからないので簡単に解説していきます。


通常サーバーと通信を行うときは、サーバーからレスポンスが帰ってくるまでユーザーの操作を受け付けません。
ブラウザでウインドウの横の部分がクルクル回っている状態ですね。


しかしAjaxを使用するとこのクルクル回っている状態を作ることなく、サーバーと通信を行うことができます!
要するに「サーバーと通信していない風にサーバーと通信することができる技術」です。


なので、ユーザーを待たせることなく、ユーザビリティを下げることなくサーバー通信を行うことができます。

Ajaxを超絶簡単に使ってみる

それではAjaxを実際に使ってみましょう。


作るファイルはたった二つ、ajaxのリクエストを送るための「ajax.html」と、レスポンスを返す「res.html」です。


まずはajax.html

#ajax.html
<meta charset="utf-8">
<button class="ajax_button">ajax</button>
<p class="hoge"></p>
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script>
  $(function(){
  $('.ajax_button').click(function(){
    console.log('aa'); 
    $.ajax({
      type: 'GET',
      url: 'res.html',
      dataType: 'html',
      success: function(data) {
        $('.hoge').append(data);
      },
      error:function() {
        console.log("何らかの理由で失敗しました");
      }
    });
  });
});
</script>

ajax内のコードを上から解説していきましょう。


まずtypeの部分はリクエストのタイプを指定します。
今回はデータを取得するだけなので、GETですが、データを送信したい時などはPOSTも使用することができます。


次にurl。
これはリクエストを送るurlを指定します。


次にdataType。
dataTypeは取得するデータの形式を書きます。
今回はhtmlを取得するのでhtml。
他に代表的なものとしてはJson形式が挙げられます。


最後にerrorとsucess。
この中にはそれぞれ失敗した時と成功した時の処理を記入します。
これでajaxを使用する準備は整いました。


次にres.htmlです。

#res.html
<p>hogeeeeeeee</p>

ajax.htmlを開くと
f:id:babashun1024:20170413161205p:plain
こんな感じで、ボタンが一つの簡素な画面が広がります。


次にボタンを押すと
f:id:babashun1024:20170413161216p:plain
このようにres.html内のデータが読み込まれ、出力されていることがわかります。

まとめ

今回はajaxの基礎について解説していきました。
ajaxは敬遠されがちですが、簡単にユーザビリティをあげることができる素晴らしい技術です。
ぜひ習得するようにしましょう!