2022-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の場合まだ通信が終わっていないかエラーかということなので、そこを判定して処理を分ける。


※本記事内容の無断転載を禁じます。

複雑な条件なし!契約期間しばり無し光回線【おてがる光】

SNSでも話題!次世代の「イける」膣トレが人気のさくらの恋猫【LCラブコスメ公式】

完全オンライン。顔出し不要で全員男性スタッフ。【AGAオンラインクリニック】

Omio【公式】ヨーロッパ格安乗車券検索

希少な国産グルテンフリー【安心犬活】

rocioは簡単2ステップで『揺るがない保湿』を提案します。rocio【公式】オンラインショップ

人気急上昇中ギフト専門セレクトショップ「TANP」

女性特有の悩みをサポートする温感ローション。 デリケートな女性の肌にも優しく、心地の良い温感作用が特徴の商品です。今すぐ試してみる>>

乾燥肌の救世主「ヘパリン類似物質」配合【NALC薬用ヘパリンハンドクリーム】

bitcoinjs-lib、bip32、bip39を使ってビットコインアドレスを生成する
Cannot read property makeRandom of undefinedと言われた場合
web3.jsとwindow.ethereumでコントラクト関数を引数つきでコールしプロパティを取得する
JavaScriptで外部URLのファイルをダウンロードしてデータを取得する
【MetaMask】window.ethereumのeth_callで任意のコントラクト関数を呼ぶ
window.ethereum.requestに渡すdataフィールドをABIエンコードで作成する
【Solidity】Remix IDEを使用してサーバー不要のコントラクト開発&デバッグ【Ethereum】
【Windows】Googleフォトからダウンロードした動画が音声のみで映像が再生されない場合
PostgreSQLをソースコードからインストールしてsystemdのサービスとして動かす
5chブラウザJane Styleの板一覧にゲーム板等が表示されない場合
Windows版Google Driveが使用中と言われアンインストールできない場合
【Windows10】リモートデスクトップ間のコピー&ペーストができなくなった場合の対処法
Googleスプレッドシートを編集したら自動で更新日時を入れる
【Javascript】JSON配列内にある特定要素の取得法【Node.js】
Ubuntuで固定IPアドレスを使う設定をする
Googleファミリーリンクで子供の端末の現在地がエラーで取得できない場合
【Hackintosh】組立PCにWindowsとmacOSを同居させる場合の注意点
Google ColaboratoryのTensorFlowバージョンを変更する(1.X←→2.X)