Ajaxとは

main.js

var xhr = new XMLHttpRequest();
xhr.open('GET','sample.php');
xhr.onload = function (){
 console.log(xhr.response);
};
xhr.send();

が基本形となる。
これでmsample.phpに対してGETリクエストが発行される。
XMLHttpRequestオブジェクトのインスタンス作成
openメソッドでHTTPメソッドとのURIを指定。
イベントの設定
sendメソッドでリクエスト

がJavaScriptで非同期通信を行うのに必要な要素

Ajaxイベントについて

addEventListenerでclickを指定することと同じくらいにhttpリクエストの進捗状況をトリガーにしてイベントを設定できる。
上記のonloadは「結果取得が完了」した時に発火するイベント。

値	状態	説明
0	UNSET	クライアントは作成済み。open()はまだ呼ばれていない。
1	OPENED	open()が呼び出し済み。
2	HEADERS_RECEIVED	send()が呼び出し済みで、ヘッダーとステータスが利用可能。
3	LOADING	ダウロード中。responeseTextには部分データが入っている。
4	DONE	操作が完了した。