(JavaScript) URLを指定して、データを取得する

作ったもの

　Web ページからデータを取得してページを書き換えたり、よその URL にデータを投稿するときには、 XMLHttpRequest を使いますが、毎回タイプするのは大変なので、関数にまとめました。

コード

<script>
// httpサーバーに対してPOSTする。
function httpPost(url, param){
	let xhr = new XMLHttpRequest();
	xhr.open("POST", url);
	xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
	if(callback != void 0){
		xhr.onload = function(){ callback(xhr.responseText) }
	}
	xhr.send(param);
}
// httpサーバーに対してGETする。
function httpGet(url, callback){
	let xhr = new XMLHttpRequest();
	xhr.open("GET", url);
	xhr.onload = function(){ callback(xhr.responseText); };
	xhr.send(null);
}
</script>

使用例

<script>
function onButtonClick(){
	// テキストエリアの内容を取得する
	let textarea001 = document.getElementById("textarea001").value;
	// google transliterate のサービスにアクセスする URL
	let url = "https://www.google.com/transliterate?langpair=ja-Hira|ja&text=" + textarea001;
	// 取得が完了したら callbackGet が呼ばれる
	httpGet(url, callbackGet);
}
function callbackGet(text){ // text に取得したデータが入っている
	// span001 の要素を text に書き換える
	document.getElementById("span001").innerHTML = text;
}
</script>
<textarea id="textarea001">はてなぶろぐ</textarea>
<button type="button" onclick="onButtonClick();">外部サービスを使って変換！</button>
<span id="span001"></span>

実行例

はてなぶろぐ
外部サービスを使って変換！

補足

　外部サイトからデータを GET できれば、住所→郵便番号 API にアクセスするなど、応用ができます。外部サイトにデータを POST できれば、掲示板に投稿したり、 Google Apps Script にデータを蓄積して、データベースとして使用することができます。