Ajaxについて
2022/08/12
今週のコラムを担当する金苗です。
皆さんはGoogleで何かを調べる際に、何文字かを入力したら検索候補がずらりと表示されているのはご存じでしょうか。
実は入力されている文字を都度、コンピューターが裏側で処理してその結果を表示しているのです。
その技術の一つとしてAjaxというものがありますので、こちらについて書いていこうかと思います。
Ajaxとは
Ajaxとは、「Asynchronous JavaScript + XML」の略で、名前のある通りJavaScriptを使用して行われる非同期処理のことを言います。
通常はWebページで表示されている内容を変更するために別の画面へ移動したり、
一度画面を更新する必要がありますが、Ajaxを使用すれば今いる画面の内容をリアルタイムで変更することができます。
これによって、画面読み込み時間が軽減されユーザー側への負担が軽くなります。
僕はAjaxを書く場合、Jqueryで書くことが多いので実際に書いてみましょう。
---------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$('#button').on('click',function() {
$.ajax({
type:'POST',
url: test.com,
dataType: 'json',
}).done(function(response){
$('#text').text('成功');
}).fail(function(){
$('#text').text('失敗');
});
);
});
</script>
</head>
<body>
<input type="button" id="button" value="button"/>
<br/>
<div id="text"></div>
</body>
</html>
---------------------------------------------------------------
こちらはボタンをクリックすると、test.comで処理が成功すれば「成功」、失敗すれば「失敗」とテキストを表示するようになっています。
$.ajax内で書かれているurl、datetype、success、errorについてもう少し詳しく解説していきます。
・urlは読み込むURLを表しています。
・typeはgetかpostどちらで送信するかを記入します。
・dataTypeは読み込むデータの種類を記入します。
・doneですが、無事ファイルが読み込めた時の処理を記入します。
・failはファイルが読み込めなかった時の処理を記入します。
まとめ
今回はAjaxについて解説していきました。簡単なサンプルでしたが、
Ajaxはプログラマーだけでなくユーザーにも便利なものなので、ぜひ実際に調べて触れてみてください。
----------------------------------------------------------------------
株式会社AQUARIZE
〒531-0072
大阪市北区豊崎3-6-8 TOビル404
電話番号 : 06-7777-2927
税理士の業務に合ったシステム
----------------------------------------------------------------------
