Ajaxの基本のき

jQuery を使うわず Vanila javascriptでAjaxをするときの基本のコード

とにかく、phpとか使わずどこかのファイルを読み込む場合

/******************************
 * 
 *
 *  Ajax 
 *  
 *
 ******************************/
function loadDoc(callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("ajax").innerHTML = this.responseText;
        } else {
            document.getElementById("ajax").innerHTML = "<p style='margin:20px;'>取得中です・・・</p>";
        }
    };
    xhttp.open("GET", "./regulation.html", true);
    xhttp.send();
    var open_answer = setTimeout(function () {
        callback();
    }, 500)
    return false;
}

var load_doc = loadDoc(callback);

ID に “ajax” とつけたタグ内のデータが置き換わるスクリプトです。
this.responseTextというのが、ajaxで返ってきたテキストです。

phpに変数を渡す場合

/******************************
 * 
 *
 *  Ajax. Sending parameters to the php file
 *  
 *
 ******************************/
var token;

function loadDoc(callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            token = this.responseText;
        } else {
            token = "error";
        }
    };
    xhttp.open("POST", "../ajax/token.php", true);
    xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhttp.send(encodeURI('key=1'));
 //ここで変数を送っている。
    var call_back = setTimeout(function () {
        callback();
    }, 500)
    return false;
}

function success() {
    console.log('ok');
}

var load_doc = loadDoc(success);

<?php
if ($_POST['key']) {
    $ret = "1234";
    echo $ret;
} else {
    return false;
}

ここでは　xhttp.send(encodeURI(‘key=1’)); で php側に変数を送っています。
php側ではその変数のあたい $_POST[‘key’]を見て処理を実行しています。