質問編集履歴

2 連絡 namnium1125 score 1849 2017/09/09 00:37 投稿

python3 cgiとAjaxの連携でプログレスバーを表示したい

お世話になります。

python3 http.serverを使ってwebアプリケーションを作っていました。

レスポンスに時間が掛かる処理だったので、途中でプログレスバーを表示して残り時間がわかるようにしようと思い、非同期通信を利用しようと考えました。

しかしpythonスクリプトの方で、どうやってレスポンスを複数回返すかわからず、詰まっています。どうすればいいのでしょうか?

print関数で返そうと思うと、スクリプト内のprintすべてが実行されるまで結果が返りません。

なにかいい方法はあるのでしょうか?

進捗は、当然ですがpythonスクリプト側が把握しているものとします。

以下適当ですが私が書いてみたスクリプト群です。やりたいことが伝わるといいのですが。。(^ ^;

├── cgi-bin

│ └── count.py

├── index.html

└── server.py

index.html

```lang-html

<!doctype html>

<html>

<head>

<title>Progress By Ajax</title>

var request = new XMLHttpRequest();

var progress;

var percent;

var start;

if(request){

window.addEventListener("load",function(e){

progress = document.getElementById("prog");

//↓最終的にはこっちで出力したい

percent = document.getElementById("percent");

start = document.getElementById("start");

//↓とりあえずこっちに出力

disp1 = document.getElementById("disp1");

disp2 = document.getElementById("disp2");

start.addEventListener("click",function(e){

var url = "/cgi-bin/count.py"

request.open("GET",url,true);

request.onreadystatechange = function(){

disp1.innerHTML = "readyState : " + request.readyState + "<br />status : " + request.status;

// ↓今後isNaNで場合分けして、falseならprogressを進め、trueならhtmlを出力

disp2.innerHTML = request.responseText;

}

request.send(null);

},false);

}

</script>

</head>

<body>

<span id="percent">0</span>%

<br />

<button id="start">start</button>

<br />

<br />

</body>

</html>

```

server.py

```lang-python

import http.server

import traceback

try:

server_address = ("", 8000)

handler_class = http.server.CGIHTTPRequestHandler

handler_class.cgi_directories = ["/cgi-bin"]

server = http.server.HTTPServer(server_address, handler_class)

server.serve_forever()

except:

traceback.print_exc()

```

/cgi-bin/count.py

```lang-python

#!/usr/bin/env python3

# -*- coding: utf-8 -*-

from time import sleep

# ↓途中で出力はしてくれない?

for i in range(100):

print(i+1)

sleep(1)

print("Content-type: text/html;charset=utf-8\n")

print("<!doctype html><html><body>done.</body></html>")

```

わかりにくい質問ですみません。。

回答よろしくお願いします。m(_ _)m

##追記

自分で解法を模索しているうちに、同内容で別な疑問が出てきましたので、

改めてそちらのほうで質問したいと思います。

よろしくお願いします。m(_ _)m

Ajax

1420 questions

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Python 3.x

11274 questions

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

1 タグを追加しました。 namnium1125 score 1849 2017/09/02 19:54 投稿

python3 cgiとAjaxの連携でプログレスバーを表示したい

お世話になります。

python3 http.serverを使ってwebアプリケーションを作っていました。

しかしpythonスクリプトの方で、どうやってレスポンスを複数回返すかわからず、詰まっています。どうすればいいのでしょうか?

print関数で返そうと思うと、スクリプト内のprintすべてが実行されるまで結果が返りません。

なにかいい方法はあるのでしょうか?

進捗は、当然ですがpythonスクリプト側が把握しているものとします。

以下適当ですが私が書いてみたスクリプト群です。やりたいことが伝わるといいのですが。。(^ ^;

├── cgi-bin

│ └── count.py

├── index.html

└── server.py

index.html

```lang-html

<!doctype html>

<html>

<head>

<title>Progress By Ajax</title>

var request = new XMLHttpRequest();

var progress;

var percent;

var start;

if(request){

window.addEventListener("load",function(e){

progress = document.getElementById("prog");

//↓最終的にはこっちで出力したい

percent = document.getElementById("percent");

start = document.getElementById("start");

//↓とりあえずこっちに出力

disp1 = document.getElementById("disp1");

disp2 = document.getElementById("disp2");

start.addEventListener("click",function(e){

var url = "/cgi-bin/count.py"

request.open("GET",url,true);

request.onreadystatechange = function(){

disp1.innerHTML = "readyState : " + request.readyState + "<br />status : " + request.status;

// ↓今後isNaNで場合分けして、falseならprogressを進め、trueならhtmlを出力

disp2.innerHTML = request.responseText;

}

request.send(null);

},false);

}

</script>

</head>

<body>

<span id="percent">0</span>%

<br />

<button id="start">start</button>

<br />

<br />

</body>

</html>

```

server.py

```lang-python

import http.server

import traceback

try:

server_address = ("", 8000)

handler_class = http.server.CGIHTTPRequestHandler

handler_class.cgi_directories = ["/cgi-bin"]

server = http.server.HTTPServer(server_address, handler_class)

server.serve_forever()

except:

traceback.print_exc()

```

/cgi-bin/count.py

```lang-python

#!/usr/bin/env python3

# -*- coding: utf-8 -*-

from time import sleep

# ↓途中で出力はしてくれない?

for i in range(100):

print(i+1)

sleep(1)

print("Content-type: text/html;charset=utf-8\n")

print("<!doctype html><html><body>done.</body></html>")

```

わかりにくい質問ですみません。。

回答よろしくお願いします。m(_ _)m

Python 3.x

11274 questions

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

Ajax

1420 questions

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン