いろいろ作っている間にページ更新を伴うやり取りは作りなれてきたので、
AJaxを実装してみたくなりました。
というわけで、いろいろ調べて作ってみました。
それではコードです。
まずは呼び出し側です。
Ajaxrq.html
<HTML>
<HEAD>
<script type="text/javascript">
var xmlHttp;
function getAjax(){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = update;
xmlHttp.open("POST", "http://xxx.xxx.xxx.xxx/cgi-bin/Ajaxrq-py.cgi", true);
xmlHttp.send(null);
}
function update(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var obj = JSON.parse(xmlHttp.responseText);
document.getElementById("area0").textContent= obj.first;
document.getElementById("area1").textContent= obj.second;
document.getElementById("area2").textContent= obj.third;
}
}
</script>
</HEAD>
<BODY>
<form name="form1">
<textarea id="area0" name="area0" row="10" cols=30 ></textarea>
<textarea id="area1" name="area1" row="10" cols=30 ></textarea>
<textarea id="area2" name="area2" row="10" cols=30 ></textarea>
</form>
<button type="button" onClick="getAjax()">button</button>
<BODY>
</HTML>
|
MEMO
- Ajaxを使うにはXMLHttpRequestを使う。
xmlHttp.onreadystatechangeにコールバック関数を設定する。
xmlHttp.open("POST",[送信先], true)で通信先とメソッドを定義する。
xmlHttp.send(null)でリクエストを送る。
- コールバック関数が呼び出されたら、
.readyStateプロパティとxmlHttp.statusプロパティを確認する。
4と200でとりあえずいいらしい。
これについてはここが詳しい。
続いて呼び出される側です。
Ajaxrq-py.cgi
#!/usr/bin/python
# -*- coding: utf-8 -*-
from os import environ
from datetime import datetime
import cgi
json1 = '''Content-Type: application/json; charset=utf-8
{
"first": 1,
"second": 2,
'''
json2 = '"third": ' + "\""+ datetime.now().strftime("%Y/%m/%d %H:%M:%S") + "\"\n"
json2 += "}"
print json1+json2
|
MEMO
- JSON形式のデータを返してやるには
Content-Type: application/json; charset=utf-8を指定する。
- CGIでhtmlを構築するようにJSON形式のデータを作成する。
実験
それでは動かしてみましょう。
Ajaxrq.htmlにアクセスします。
buttonを押します。
受信したデータがテキストエリアに書き込みされました。
もう一度buttonを押してみます。
時刻が書き換わりましたね。
ページ自体のを更新していないのに内容の更新ができました。
ご参考まで。
0 件のコメント:
コメントを投稿