2017/06/21

Ajaxでページの内容を書き換えてみよう

いろいろ作っている間にページ更新を伴うやり取りは作りなれてきたので、 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 件のコメント:

コメントを投稿

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...