Ajaxを簡単に説明してみる！利用方法なども！
どうもです！！
もう完全に冬ですね〜〜
クリスマスですね〜〜
今年のクリスマスは1人で過ごす事になりそうです。。。
さて、今回はAjaxについて簡単に説明していこうと思います！！
Ajaxとは
Ajaxとは、AsynchronousとJavaScriptに、XMLを組み合わせて作られた造語です。非同期通信を、「JavaScriptの技術で実行すること」を指します。単純に「非同期通信」のことを指してAjaxと呼ぶケースもあります。
AjaxはWebページに搭載されている技術ですが、このAjaxを使うことで、Webページ全体を更新することなく「一部分だけ情報を更新する」ことが可能です。
ここでいうXMLとは、「文章の見た目や構造を記述するためのマークアップ言語」のことですが、Ajaxを支える技術として、主にデータ管理の効率を高める用途に使用されます。
上記で簡単にAjaxについてまとめると、JavaScriptを使う！サーバと非同期通信をしてデータを受け取る！って認識して頂ければ嬉しいです！
次はAjaxの使用方法について簡単に説明していこうと思います！
Ajaxの利用方法
最初にAjaxについての説明が出来たので次は実装方法を紹介していこうと思います！
今回はコチラ のサンプルのAPIを使ってAjax通信を行ってこうと思います！
それでは下記のソースをご覧下さい！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>testAjax</title>
//jQueryのCDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function() {
jQuery.ajax({
get: 'get',
//API通信を行うURL
url: 'https://jsonplaceholder.typicode.com/todos/1',
//通信が成功した際の処理
success: function(content) {
console.log(content);
}
})
})
</script>
</head>
<body>
</body>
</html>上記のソースで大事なところは2ヶ所になります！
まず一つ目がコチラになります！
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>上記のスクリプトタグではjQueryを使用できる様にjQueryのCDNを<head>タグ内で読み込ませます！
上記のCDNがないと、jqueryを使用することが出来ませんので忘れずに書きましょう！
そして二つ目がコチラなります！！
jQuery.ajax({
get: 'get',
url: 'https://jsonplaceholder.typicode.com/todos/1',
success: function(content) {
console.log(content);
}
})上記の記述がAPIとのAjax通信を行う処理になります！
urlの指定でAPIとの通信を行うURLを指定します！
success: function(content) {
console.log(content);
}そして上記の記述がAPIの通信が成功した際に実行される処理になります！
上記処理のコンソールログの中身をディベロッパーツールで確認してみましょう！！
ディベロッパーツールで確認すると、APIからデータが返ってきてるところ確認出来ました！！
それでは次はAjaxで取得したデータを画面に表示するところまでしてみましょう！！
Ajaxで取得したデータを画面に表示する
先ほどの実装でAjaxを使用してデータが取得できるところまでは確認出来ましたか？
それでは次はAjaxを使用した実装の応用編と言うことで、取得したデータを画面に表示してみましょう！
それでは下記ソースをご覧下さい！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>testAjax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function() {
jQuery.ajax({
get: 'get',
url: 'https://jsonplaceholder.typicode.com/todos/1',
success: function(content) {
//<h1>要素にAPIから取得したデータを入れる
$('#container').append($('<h1>').text(content.id))
$('#container').append($('<h1>').text(content.userId))
$('#container').append($('<h1>').text(content.title))
}
})
})
</script>
</head>
<body>
//DOM要素の追加
<div id="container"></div>
</body>
</html>今回の実装で注目するところは1箇所になります！
$('#container').append($('<h1>').text(content.id))<body>タグ内で作成したDOM要素にAjax通信で取得したデータを入れ込む様にしています！
上記の実装で下記の様な画面が出来上がります！
取得したデータを画面上に表示することが出来ました！！
最後に
皆さんは今回の記事でAjaxについて理解してもらえたでしょうか？？
Ajaxを使って皆さんの開発がより豊かになればと思います！！
それでは皆さん良い1日を！！