IT web開発

【Javascript】非同期処理について

2020年11月23日

通常webではページ遷移をすると画面の表示が代わり、そして表示されるhtmlファイルも変更される。そしてwebサーバとやりとりをして次のページに遷移する
しかしwebサーバと通信してもページ遷移を行わず、現在見ているページ内のコンテンツを変更するというもの。
例えば、最初にページに遷移した際はデータベースからとってきたデータを表示することはせず、ユーザーがサイトで検索を押したときに検索結果を表示するために、webサーバにリクエストを投げてそしてDBからとってきた検索結果を表示するというようなことができたりする。
ただ非同期処理はwebと通信を行うため、実行順に注意が必要。
よく非同期処理の実行例として有名な、setTimeOut()ではこれはwebと通信をしていないように思われるが、TimerAPIというwebAPIを使用しており、webAPIなのでwebサーバと通信を行う。

非同期処理で構築されるwebサイトをシングルページアプリケーションといったりする。
1つのページのみで、その中でwebのコンテンツを変えていくので、ページ遷移ではなくコンテンツを毎回サーバとやりとりして更新して、ページ遷移しているように見える。
1つのページのみであるため、コンテンツが変わってもheadタグやmetaタグ、linkタグなど再読み込みされない。変わるコンテンツの箇所のみ更新される。

非同期処理の書き方は大まかに4種類ある。

  • １. Promise Class
  • ２. setTimeOut関数
  • ３. ajaxによる実現
  • ４. XMLHttpRequest

それぞれについて開設していきたいと思います。

 

function aaa(){
return new Promise()
}
aaa().
then(){
// 次の処理
}.catch(){
// エラー時の処理
}

 

setTimeOut関数は指定した時間実行を待つというもので、実はこれはTimer APIというものを使用している。そしてそのTimer APIはwebAPIでもあり、サーバとの通信で実現している。
これにより、実は非同期処理とはサーバとの通信によって処理をjavascriptが任せるために起きるものでもある。
webAPIが実行されるとjavascriptはこれは私が処理するのではなく、サーバが処理すべきことだよねー。なのでサーバさんお願いします。ということでjavascriptは実行したものの次の処理を勝手に始めてしまう。そのため、サーバと通信をしてサーバからデータが返ってこない内に次の処理を行ってしまうので、エラーになったりデータがありませんよというエラーになったりしてしまう。
setTimeOut(){

}

 

ajaxとはjavascriptの非同期処理であり、通常webサイトではクリックしたりしてページ遷移をするとwebページが更新され通信を始める。
でもページ遷移をしなくてもページ内のコンテンツを変更することができる。これを非同期処理という。
よく試験などで例えば次へのボタンをクリックするとページ自体は遷移していないのに、問題と選択肢だけ変わっている状況を見たことがあるかもしれない。これは非同期処理によるもので、ajaxをはじめとした非同期処理によって実現される。
$.getJson関数でもいい。
$.ajax( {key1: value1,  key2: value2},  送信先サーバサイドプログラムのパス, function(data){
// 処理する。これはコールバック関数で、サーバからの処理が完了すると、このコールバック関数のdataに値が返ってくる。echo json_decode()で。
json_encodeによってjson形式にしてクライアントサイドに戻す。
}).then(){
// 実行する。thenは複数個つけることができるので、前のコードがしっかり終わったことを確認してコードを実行したい場合に使用できる。
}.catch(){
// エラー処理
}
index.phpを記載してそれを入力してここに記載しておくのはありだな。
そして、ajaxで通信する先のサーバサイドは最後はechoでサーバからクライアントへデータを送信する。
echoは標準出力で、画面に値を表示するということはブラウザにデータを送信しているということに過ぎないので、クライアントサイドにデータを送信する場合はecho $dataで送信する。

$("#ajax_calc").click(function(){
    var send_data = {'input1': 100, 'input2': 200};
    // response_dataには実行した結果のデータがここに入る。⇒コールバック関数
    $.ajax('ajax/ajax.php',send_data, function(data){
        //alert(data);
    }).then(// 1つめは通信成功時のコールバック
        function (data) {
            $("#ajax_result").append('
'+data+'
')
        },
        // 2つめは通信失敗時のコールバック
        function () {
            alert("読み込み失敗");
        })

});

ajax.php

$input1 = filter_input(INPUT_POST, 'input1');
$input2 = filter_input(INPUT_POST, 'input2');

//$get_data = json_decode($data);

$return_data = ['input1' => $input1 + 123, 'input2' => $input2 + 456];
// jsonで返す必要があるので、json_encodeして戻す
echo json_encode($return_data);

 

JSONPにJason (同一生成元ポリシー) → 通常サーバとは別の異なるドメインのサーバからiframeでデータを取ってくることはしてはいけない。例えば、今aaa.comというドメインのindex.htmlが表示されているとする。この時このindex.htmlから別のドメインのサーバにアクセスしてデータを引っ張ってくることはできない。これが同一生成元ポリシー(cross origin)という。これにより、非同期処理についてはそのような取り決めがあるので注意。
ただ1つやり方があり、aaa.com/index.html内にiframeでその別ドメインのhtmlファイルをiframeで読み込むことはできる。なのでその別ドメインのhtmlファイルでそのドメインのサーバからデータを引っ張ってきて、それをiframeで自分のドメイン内で開くことができる。こうすることでデータの取得は可能となる。

-IT, web開発
-,

© 2024 Yosshi Labo. Powered by AFFINGER5