Symfoware

Symfowareについての考察blog

jQuery ajax サーバー側が処理終了を通知するまでずっと問い合わせる

まずはこんなプログラム


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sample</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     
  11.     $('#get').on('click', function() {
  12.         $('#result').html('結果表示');
  13.     });
  14. });
  15. </script>
  16. </head>
  17. <body>
  18. <div>
  19.     <button id="get">データ取得</button>
  20. </body>
  21. <div id="result">-</div>
  22. </html>




初期状態

754_01.png


ボタンを押したら、文字を表示します。

754_02.png


ここから肉付けしていきます。




ajax通信



ボタンを押したらサーバーと通信して結果を受け取り表示します。

※参考
Python 組み込みのCGIHTTPServerやhttp.serverでcgiを動かす

・html


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sample</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     
  11.     $('#get').on('click', function() {
  12.         $.ajax({
  13.             url:'cgi-bin/sample.py'
  14.         }).done(function(result){
  15.             $('#result').html(result.data);
  16.         });
  17.     });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <div>
  23.     <button id="get">データ取得</button>
  24. </body>
  25. <div id="result">-</div>
  26. </html>




・cgi


  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import cgi
  4. import cgitb
  5. import json
  6. cgitb.enable()
  7. print('Content-type: application/json; charset=UTF-8\r\n')
  8. print(json.dumps({'status':'ok', 'data':'応答データ'}))




754_03.png





リクエストパラメーター付与



リクエストパラメーター付きでajax通信。
応答にリクエストパラメーターを付加してみます。

・html


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sample</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     
  11.     $('#get').on('click', function() {
  12.         var count = 1;
  13.         $.ajax({
  14.             url:'cgi-bin/sample.py?count=' + count
  15.         }).done(function(result){
  16.             $('#result').html(result.data);
  17.         });
  18.     });
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div>
  24.     <button id="get">データ取得</button>
  25. </body>
  26. <div id="result">-</div>
  27. </html>




・cgi


  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import cgi
  4. import cgitb
  5. import json
  6. cgitb.enable()
  7. print('Content-type: application/json; charset=UTF-8\r\n')
  8. form = cgi.FieldStorage()
  9. count = form['count'].value
  10. print(json.dumps({'status':'ok', 'data':'応答データ' + count}))




754_04.png




リクエストパラメーターによる応答の分岐



リクエストパラメーターに「100」を渡すと正常な応答。
それ以外は、まだサーバー側で処理を行っていると仮定します。

result.statusに「ok」が設定されるまでcountに1を加えながら再帰呼出ししてみます。


・html


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sample</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     
  11.     $('#get').on('click', function() {
  12.         var count = 1;
  13.         watch(count);
  14.     });
  15.     var watch = function(count) {
  16.         $.ajax({
  17.             url:'cgi-bin/sample.py?count=' + count
  18.         }).done(function(result){
  19.             $('#result').html(result.data);
  20.             if (result.status == 'ok') {
  21.                 return;
  22.             }
  23.             watch(count + 1);
  24.         });
  25.     };
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <div>
  31.     <button id="get">データ取得</button>
  32. </body>
  33. <div id="result">-</div>
  34. </html>




・cgi


  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import cgi
  4. import cgitb
  5. import json
  6. cgitb.enable()
  7. print('Content-type: application/json; charset=UTF-8\r\n')
  8. form = cgi.FieldStorage()
  9. count = form['count'].value
  10. result = {}
  11. if count == '100':
  12.     result['status'] = 'ok'
  13.     result['data'] = '正常終了'
  14. else:
  15.     result['status'] = 'ng'
  16.     result['data'] = 'データ取得中(%s)' % count
  17. print(json.dumps(result))




754_05.png

これでも狙い通りの処理になったのですが、結構な勢いでサーバー側に問い合わせを行うため、
ちょっと加減したい。



setTimeout



setTimeoutを使用して、1000msまってから処理を行うようにしてみます。

・html


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>sample</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8. <script>
  9. $(function() {
  10.     
  11.     $('#get').on('click', function() {
  12.         var count = 1;
  13.         setTimeout(function() { watch(count); }, 1000);
  14.     });
  15.     var watch = function(count) {
  16.         $.ajax({
  17.             url:'cgi-bin/sample.py?count=' + count
  18.         }).done(function(result){
  19.             $('#result').html(result.data);
  20.             if (result.status == 'ok') {
  21.                 return;
  22.             }
  23.             setTimeout(function() { watch(count + 1); }, 1000);
  24.         });
  25.     };
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <div>
  31.     <button id="get">データ取得</button>
  32. </body>
  33. <div id="result">-</div>
  34. </html>



754_06.png


1000msごとにサーバー通信を行うようになりました。
これでwebサーバー側も一息つけそうです。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/07/13(木) 23:37:09|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Ubuntu 16.04にCordova(コルドバ)のインストール | ホーム | Debian 9(Stretch)にPostgreSQL 9.6をapt-getでインストールし、外部アクセスを許可する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/2000-8f1f459c
この記事にトラックバックする(FC2ブログユーザー)