2023-07-08
XMLHttpRequest, jQuery.ajax, fetchいずれかの方法があるが、同期・非同期が簡単に使い分けられるjQuery.ajaxがおすすめ。
https://api.jquery.com/jquery.ajax/
以下のような、Solidity ERC-721 abi.jsonファイルをダウンロードするものとする。
JSON | abi.json | GitHub Source |
[ { "inputs": [ { "internalType": "address", "name": "owner", "type": "address" } ], "name": "balanceOf", "outputs": [ { "internalType": "uint256", "name": "", "type": "uint256" } ], "stateMutability": "view", "type": "function" }, { "inputs": [ { "internalType": "uint256", "name": "tokenId", "type": "uint256" } ], "name": "ownerOf", "outputs": [ { "internalType": "address", "name": "", "type": "address" } ], "stateMutability": "view", "type": "function" }, ]
同期(その場で終わるまで待ってから次を実行)で使う場合
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script>//<![CDATA[ var abi_json = null; console.log("before ajax call"); $.ajax({ type: 'GET', url: 'abi.json', data: 'a=b&c=d', async : false, dataType: 'text', success: function(data) { console.log("success ajax call"); if(data != null) { console.log(data); abi_json = JSON.parse(data); console.log(abi_json); } } }); console.log("after ajax call"); //]]></script>
typeにはメソッドを指定、urlにはこのhtmlからの相対パスか、httpsから始まる絶対パスを指定。
dataにはURLに渡すパラメータを指定。URLがCGIプログラムである場合などに指定。
asyncをfalseに設定することで、同期通信となり、ダウンロードが終わるまで次へ行かない。
dataTypeには文字列でダウンロード対象のファイルタイプを指定する。
textを指定すると、テキストデータとして持ってくるので、consoleで確認したあと、あらためてJSON.parseして文字列→JSON変換するのがおすすめ。
いきなりデータタイプにjsonを指定することもできる。その場合JSON.parseは不要で、dataにはダイレクトにJSON型のデータが入る。
実行結果console.log
before ajax call success ajax call after ajax call
before→success→afterと、通信が終わるのを待ってから順番に実行されているのが確認できる。
非同期(バックグラウンドで実行しながら)で使う場合
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script>//<![CDATA[ var abi_json = null; console.log("before ajax call"); $.ajax({ type: 'GET', url: 'abi.json', data: 'a=b&c=d', async : true, dataType: 'text', success: function(data) { console.log("success ajax call"); if(data != null) { console.log(data); abi_json = JSON.parse(data); console.log(abi_json); } } }); console.log("after ajax call"); //]]></script>
asyncをtrueに設定することで、非同期通信となり、バックグラウンドへ移行しすぐ次の処理へ行く。
終わったらsuccessがあとから呼ばれることになる。
実行結果console.log
before ajax call after ajax call success ajax call
before→after→successと、通信が終わるのを待たずにすぐ次へ行って後からsuccessが呼ばれているのが確認できる。
よって、グローバル変数abi_jsonがnullの場合まだ通信が終わっていないかエラーかということなので、そこを判定して処理を分ける。
※本記事内容の無断転載を禁じます。
ご連絡は以下アドレスまでお願いします★
☆ServerNote.NETショッピング↓
ShoppingNote / Amazon.co.jp
☆お仲間ブログ↓
一人社長の不動産業務日誌
nvidia-smiを1秒ごとに実行してGPU使用率をモニタリング
TSUKUMOのマルチGPUパソコンWA9J-X211/XTのUbuntu Server 22.04でMYCOEIROINK作成コードを実行し音声合成モデルをトレーニングする
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とCOEIROINK Engineを導入する
Python venv(仮想環境作成)でError: Command returned non-zero exit status 1のエラー対処法
【Ubuntu】プロジェクトごとに複数のPythonバージョンを使い分ける
【PHP】フォーム入力を受け取り出力する
【Ubuntu】aptでインストールしたapache2にソースコンパイルしたphpをマルチスレッドモードで組み込む
【PHP】HTMLファイルを読み込んで文字列変換して出力する
TSUKUMOのマルチGPUパソコンWA9J-X211/XTにUbuntu Server 22.04とVOICEVOX Engineを導入する
進研ゼミチャレンジタッチをAndroid端末化する
【Windows10】リモートデスクトップ間のコピー&ペーストができなくなった場合の対処法
Windows版Google Driveが使用中と言われアンインストールできない場合
【C/C++】小数点以下の切り捨て・切り上げ・四捨五入
【Apache】サーバーに同時接続可能なクライアント数を調整する
Androidホームで左にスワイプすると出てくるニュース共を一切表示させない方法
Windows11+WSL2でUbuntuを使う【2】ブリッジ接続+固定IPの設定
Googleスプレッドシートを編集したら自動で更新日時を入れる
size_tとssize_tを使い分けてSegmentation Faultを予防する