カルボナーラ街道

計測と観察

AJAXを試す

CORS(コルス)を調べているとAJAXという単語が出てきたので試す。

AJAX とは

AJAX は Asynchronous JavaScript And XML の頭文字を取ったものです。これは一言で言えば、 XMLHttpRequest オブジェクトを使ってサーバーと通信することです。 AJAXJSON, XML, HTML, テキストファイルなど、様々な形式の情報で送受信することができます。 AJAX の最も魅力的な特徴は「非同期」であること、つまり、サーバーとの通信、データの交換、ページの更新を、ページの再読み込みなしに行うことができる点です。
https://developer.mozilla.org/ja/docs/Web/Guide/AJAX/Getting_Started

XMLでなくてもOKみたい。

作ったもの

f:id:tokizuoh:20220319114326p:plain
初期状態

f:id:tokizuoh:20220319114341p:plain
正常系(ボタン押下でサーバーから現在時刻が返された時)

f:id:tokizuoh:20220319114405p:plain
異常系(ボタン押下でサーバーから404が返された時)

コード

<script>
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function(){
        if(httpRequest.readyState === XMLHttpRequest.DONE){
            if (httpRequest.status === 200) {
                document.getElementById("time").innerHTML = httpRequest.responseText
            } else {
                alert("コラー!")
            }
        }
    }
    document.querySelector('button').onclick=function(){
        httpRequest.open('GET','http://localhost:8080/time');
        httpRequest.send();
    }
</script>

package main

import (
    "fmt"
    "net/http"
    "time"
)

func main() {
    http.HandleFunc("/time", func(w http.ResponseWriter, r *http.Request) {
        defer r.Body.Close()

        // CORSの設定
        w.Header().Set("Access-Control-Allow-Headers", "*")
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")

        t := time.Now().String()
        fmt.Fprintln(w, t)
        // エラー返したい時: http.Error(w, "ERROR", 404)
    })
    http.ListenAndServe(":8080", nil)
}

感想

  • 何か一部を更新したいけどページまるごと更新する必要がないときに使えそう
  • 認証・認可やらないと予期せぬ所からデータが取得されてしまいそう

参考