KumaTechLab
2020-12-12/2023-05-23

XMLHttpRequestよりfetchの方が簡単

XMLHttpRequestよりfetchの方が簡単

JSからPHPとの連携する際にXMLHttpRequestを使用する方法もありますが、fetchを使った方法が記述が簡単だったのでfetchとXMLHTTPRequestを比べて紹介してみたいと思います。

XMLHttpREquestを使用した書き方

let url = '';
		let request = new XMLHttpRequest();


		request.onreadystatechange = () => {
			if( request.readyState == 4 ) {
				if( request.status == 200 ) {
				    console.log( request.response );
				}
			}
		};


		request.open( 'POST', url, true);
		request.setRequestHeader( 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8' );
		request.send('id=2&name=太郎');

fetchの場合

    const data = {
			method: 'POST',
			headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
			body: 'id=2&name=太郎'
		}


		fetch( url, data )
			.then( ( response ) => response.text() )
      .then( (text) => console.log(text) )

通信を行うための情報の記載等かなり簡略化されています。

また、通信完了時の受けったデータについても処理が書きやすいです。

上の例ではPromiseを使用した書き方ですが、async awaitを使用した書き方も可能です。

2020 KumaTechLab.