JavaScript | ajaxをJavaScriptとjQueryで書いてみた【振り返り】

どうもかわうそです！

今日は『JavaScript | ajaxをJavaScriptとjQueryで書いてみた【振り返り】』というテーマで書いていきます。

かわうそはひそかに、『JavaScriptを社内一、極めたい 』と思っています。

今回のajaxも、今までjQueryでなんとなくコピペして使っていました。

JavaScriptでどうやって書くんだろう？と気になったので、ちょっと調べて自分でも書いてみました。

この記事は、自分用の振り返り、備忘録的なものになっています。

Contents

ajaxとはそもそも
JavaScriptでajaxをしてみたよ
onreadystatechange メソッドで通信状態を監視
jQueryでのajax
jQueryのほうが直感的

ajaxとはそもそも

JavaScriptを使って非同期でhttp通信を行い、xml形式でデータをやり取りする

って感じ。

これを英語にして、省略するとAjax。

もはや XML形式ではなくJSONしか使わない気がするので、A-JSON(エージェイソン)とかどうだろう。

JavaScriptでajaxをしてみたよ

こちらの記事を参考にさせていただきました。

分かりやすかった！

今回書いてみたコード

let req = new XMLHttpRequest();
let data;

setInterval(function(){
  req.open('GET', 'shipment.php', true);
  req.send(null);
},1000);

req.onreadystatechange = function() {
  if(req.readyState == 4) {
    if(req.status == 200 ){
      data = req.responseText;
      document.getElementById('get_shipment').innerText = data;
    }else{}
  }else{}
}

let req = new XMLHttpRequest();

let data;

setInterval(function(){

req.open('GET', 'shipment.php', true);

req.send(null);

},1000);

req.onreadystatechange = function() {

if(req.readyState == 4) {

if(req.status == 200 ){

data = req.responseText;

document.getElementById('get_shipment').innerText = data;

}else{}

}

php

date_default_timezone_set('Asia/Tokyo');
$today = date('Y-m-d'); // 現在日付取得
$time = date('G-i-s');  // 現在時刻取得 
$postTime = $today. ":" .$time; 
echo $postTime;

date_default_timezone_set('Asia/Tokyo');

$today = date('Y-m-d'); // 現在日付取得

$time = date('G-i-s'); // 現在時刻取得

$postTime = $today. ":" .$time;

echo $postTime;

デモサイトはこちら

phpで現在時刻を取得し、それをajaxで持ってくるだけの簡単な内容です。

感想としては思っていたよりもコードが短く澄んだ！という印象です！

JavaScriptの学習を続けてきた成果か、理解はそんなに難しくなかったです。

XMLHttpRequestオブジェクトの作成

let req = new XMLHttpRequest();

1	let req = new XMLHttpRequest();

これで、『XMLHttpRequest()オブジェクト 』を作成しています。

これ以降はreqを使用し、用意されているプロパティやメソッドを使っていくんだなぁ、と流れを想像できました。

httpリクエストを作っていく

phpファイルのどうやってアクセスするかの仕組みを作っていきましょう。

とはいえ、書くのは二行だけ。

req.open('GET', 'shipment.php', true);

1	req.open('GET', 'shipment.php', true);

こちらでhttpリクエストの設定をしています。引数に指定の値を入力していきます。

通信形式はGET、リクエスト先のurl、非同期モードで通信をするかどうか = true をぶち込みました。

req.send(null);

1	req.send(null);

sendメソッドでリクエストを送ります。GETなのでnullでok。

POSTの場合は、何かしらぶち込んでください。

GETは取得、POSTは付与や更新で使用すると思います。(たぶん。。。)今回は取得ですね。

非同期通信の場合は、リクエストがサーバーに届くと取得結果がイベントとして返ってきます

この辺が参考になるかもです。

最終的に毎秒通信をするために、setIntervalで通信を1秒ごとに送るようにしました。

※ 処理が重なってしまう可能性があるので、ほんとはsetTimeoutがいいと思います。後述するjQueryではsetTimeoutを使用。

setInterval(function(){
  req.open('GET', 'shipment.php', true);
  req.send(null);
},1000);

setInterval(function(){

req.open('GET', 'shipment.php', true);

req.send(null);

},1000);

これでajaxの通信自体が可能になったはず。

次は返ってきたイベントの処理が必要です。

onreadystatechange メソッドで通信状態を監視

req.onreadystatechange = function() {
  if(req.readyState == 4) {
    if(req.status == 200 ){
      data = req.responseText;
　　　　document.getElementById('get_shipment').innerText = data;
    }else{}
  }else{}
}

req.onreadystatechange = function() {

if(req.readyState == 4) {

if(req.status == 200 ){

data = req.responseText;

　　　　document.getElementById('get_shipment').innerText = data;

}else{}

}

いきなりでてきたこいつonreadystatechange ですが、落ち着いて対応しましょう。

その文字のごとく、通信状態が変化したときに呼び出されるメソッドです。

readyState == 4 で通信が完了したかどうかを判定しています。

※つまり最初のelseは、通信が完了していない　＝　通信中ってことです。

ただ通信自体が終わった　=　成功したのか失敗したのかが判定されていません。

通信が成功していれば　req.status == 200　です。

その時、echoで返されるphpファイルの結果を、指定のHTMLのテキストに上書きしなさいって処理ですね。

これで思った通りの動きが始まりました！

デモサイトはこちら

jQueryでのajax

続いてはjQueyでのajaxです。

jQueryはたくさんコードがあると思うので、詳しい説明は省きますね！

$(function(){
  function callBackAjax(){
    $.ajax({
      url: 'shipment.php',
      type: 'GET',
      dataType: 'text',
      timeout: 5000
    })
    .done(function(data){
      data = data;
      document.getElementById('get_shipment').innerText = data;
      setTimeout(callBackAjax, 1000);
    })
    .fail(function(){
    });
  }
  callBackAjax();
});