常連

```JavaScript
var connection = new XMLHttpRequest();

var url = 'http://<server>:<port>/logon/long';
var body ='{userName:"Sarah", password: "abc"}';

connection.open('POST', url, false);
connection.setRequestHeader('Content-Type', 'application/json');
connection.send(body);
```

XHRでREST APIを使っています。

問題は、これでは**ユーザー名**と**パスワード**が、
ソースで丸見えになっていることです。

対応策として、
分かりにくくするために正規表現を使い
変数を埋め込むことにしました。

※実際はもう少し複雑ですが、
分かりやすくするために、簡潔な例にしています。

```JavaScript
Var FakePass = "1a2b3c"
FakePass = FakePass.replace(/[0-9]/g, "")

var body ='{userName:"Sarah", password: FakePass}';

```

しかしこれだと、上手くログインできません。

JSONの文字列の中に、変数を埋め込むには、どうすればよいのでしょうか？

ありがとうございます・・・

【JavaScript】JSONの中に変数を埋め込むにはどうすればいいですか？

### 前提・実現したいこと

現在、お知らせ通知ができるwebアプリを作成しています。
RSSやAtomフィードから最新情報をもらってきて、新規の記事がある場合に、通知アイコンに未読件数が表示されるようにしたいと考えています。

ページが表示されるときに一緒に未読件数用のアイコンを表示したいのですが、フィードから最新情報を取得する部分でAjaxを用いているので、
非同期処理のため、うまくいきません。

外部ライブラリである、JQueryなどは仕様上使用できません。

当たり前ですが、ページが表示されてから、ボタンなどで再描画した際には未読通知アイコンは表示されています。
理想はページ表示と同時に未読通知アイコンを表示です。

Ajaxなどの非同期処理が完了した、というイベントなどを発行できれば楽なのですが、そういったものはありますでしょうか？



### 最終的な目標

Typescriptで書いている、Ajaxの処理が全て終わってからhtml内のjavascriptで未読アイコン表示の処理を行いたいです。
UI(html)とコア部分(Typescript)はUIだけコアに依存させる形にしたいです。

### 該当のソースコード
該当箇所のみ抜き出しています。
定義されてない変数などありますが、実際には定義してある体で記入してます。

```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="../dist/index.umd.js"></script>        
<script type="text/javascript" src="mdi.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/index.css">

<script  type="text/javascript">
	function initialize() {        
		var notice = new Notice();

		notice.addFeed("https://www.j-cast.com/tv/atom.xml");
		
		notice.loadInformations();

		var noticeIcon = new NoticeIconButton(notice);
		var body = document.getElementsByTagName("BODY")[0];
        //ベルアイコン描画
		body.appendChild(noticeIcon.render(mdiBellOutline));

　　　　 //未読アイコン描画
		body.appendChild(noticeIcon.renderNotice());
		
	}
</script>

</head>
<body onload="initialize()">

</body>
</html>
```

```Typescript
Notice.ts

loadInformations() {
        var count=0
        //最新情報を取得する
        this.getLatestInformation(this._feeds[count], count, this._userId, this);

        return true;
    }

private  getLatestInformation(feedURL:string, count:number, userId:string, notice:Notice){
        var domParser = new DOMParser();

        new noticeDB = new NoticeDB();
        //データベースを作成する
        noticeDB.dbCreate(this._dbName, this._storeName);

        var xhr = new XMLHttpRequest();
        xhr.open('GET',feedURL);
        xhr.send();

        xhr.onreadystatechange = function() {

            if(xhr.readyState === 4 && xhr.status === 200){
                var feed_items:HTMLCollectionOf<Element>;

                if(typeof(xhr.response) === 'string'){

                    try{

                        var feed_data:Document = domParser.parseFromString(xhr.response, "text/html");
                        feed_items = feed_data.getElementsByTagName(notice._itemTag);                 
 
                            
                        }
                    }catch{
                        console.log('error');
                    }
                }
            }
        }

    }
```

html 画面描画とJSの処理が終わってから処理を開始したい

初めまして。
JavaScriptでどうにも分からない事が出来たため、ご質問させていただきます。
皆様の知恵をお借りいただければと思っております。
どうぞ、宜しく願いいたします。

##XHRのresponseTextがうまく取得できない
趣味でJavaScriptとPHPの非同期通信を使ったアプリを作ろうとしています。
現在分からない事は、この非同期通信の部分でresponseTextが取得できません。

この"取得できない"と言うのは少し語弊がありまして
"取得はできているが、そのデータを扱おうとした時に扱うことができない"の方が正しいかもしれません。

##実際みてみる
xhrオブジェクトの中身をみてみますと、やはり取得自体は出来ているようです。

![イメージ説明](64f071314c10b0a6fd518dcf4b1187be.png)

しかしこれを
```js
console.log(xhr.responseText);
```

などで利用しようとすると

![イメージ説明](217917e10843ee9c2b9565d8647ae3cd.png)

中身が空扱いになり、扱うことができません。

##理由が全然分からない
xhrオブジェクトのresponsTextプロパティには、間違いなく値は入っているにもかかわらず、
何故、その値を使用しようとするとできないのでしょうか？

皆様の知識でお教えいただければと思います。

宜しくお願いいたします。

##追記
ご指摘をいただきましたので、該当のJavaScriptファイルのソースコードを記載します。
宜しくお願いいたします。

```js
'use strict';

const w = window,
      d = document
      ;

const $ = id => {
  return d.getElementById(id);
}

const $t = tag => {
  return d.getElementsByTagName(tag);
}

const $c = cls => {
  return d.getElementsByClassName(cls);
}

class User{

  constructor(){
    const form = $t('form');
    this.xhr = new XMLHttpRequest();

    for(let i=0; i < form.length; i++){
      form[i].addEventListener('submit', (e) => {
        return e.preventDefault();
      });
    }

    $('tweet_btn').addEventListener('click', () => {
      this.postTweet();
      this.getNewTweets();
    });

    this.xhr.onreadystatechange = () => {
      if (this.xhr.readyState === 4 && this.xhr.status === 200){
      }
    }
  }

  postTweet() {
    const url = './tweet.php',
          tweet_msg = $('tweet_msg').value,
          data = {
            tweet : tweet_msg,
            mode : 'ALL'
          }
          ;
    
    this.xhr.open('POST', url);
    this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    this.xhr.send(JSON.stringify(data));
  }

  getNewTweets() {
    const url = './tweet.php',
          latest = $c('tweet_date').item(0).innerText,
          data = {
            latest : latest,
            mode : 'LATEST'
          }
          ;

    this.xhr.open('POST', url);
    this.xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    this.xhr.send(JSON.stringify(data));
    console.log(this.xhr.responseText);
  }

}

const user = new User();
```

XHRでresponseTextがうまく取得できない。

javascriptの勉強をしています。以下のコードで、xhrWrapperを、apiを取得後パースするといった再利用できるfunctionにしたいと思っています。
そこで、returnを使えばいいのかなと思い、14行目にreturn dataを入れたのですが、うまく戻ってくれません。
xhr.onload内のfunctionなので、returnが戻らないのはなんとなく理解できたのですが、実際どのようにして戻せばいいのかわからない状態です。

```javascript
<!doctype html>
<html>
<head>
    <title>WebAPI</title>
    <script>
        var TOKEN = 'xxx';
        var pathRepos = 'https://api.github.com/user/repos?visibility=private';
        function xhrWrapper(path) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', path);
            xhr.setRequestHeader('Authorization', 'token ' + TOKEN);
            xhr.onload = function(){
                var data = JSON.parse(xhr.response);
                return data;
            };
            xhr.onerror = function () {
                console.log("error");
            };
            xhr.send(null);
        };

        showBranch( xhrWrapper(pathRepos) );

        function showBranch(d) {
            console.log(d);
            var l = d.length;
            for(var i = 0; i < l; i++){
                var repoName = d[i].name;
                dataBranch = "https://api.github.com/user/repos/" + repoName + "/branches";
                console.log(repoName);
                console.log(dataBranch);
            }
        }
    </script>
</head>
<body>
</body>
</html>
```

xhr.onload内のreturnが返らない

### 質問事項

JavaScript初学者です。
addEventListenerにて定義した処理（イベントリスナー）の実行タイミングを理解しようと以下のコードを実行したのですが、実行結果が想定と異なりました。原因はなんでしょうか。。。

### 該当のソースコード

```JavaScript
document.getElementById("btn").addEventListener("click",function () {
        var xhr = new XMLHttpRequest();

        xhr.addEventListener("readystatechange",function () {
          console.log("readyState：" + xhr.readyState);
        },false)

        console.log("1.Open前");
        xhr.open("GET", "scripts/book.xml");
        console.log("2.Open後,Send前");
        xhr.send(null);
        console.log("3.Send後");

      },
      false
    );
```
・ボタン押下時にXMLHttpRequestを実行
・XHLHttpRequestのreadystateが変化したタイミングでイベント実行

### 想定した結果
イベント発火によるイベントリスナーはsetTimeoutのように、WebAPIによってタスクキューに入ってからコールスタックに入ると理解しているので、イベントリスナーは最後に行われると思ってました。

```console
1.Open前
2.Open後,Send前
3.Send後
readyState：1　　　　　　＜＝Openの時のイベント処理
readyState：2
readyState：3
readyState：4
```


### 実際の結果

実際には、同期処理である「console.log("2.Open後,Send前");」の処理よりも先に、Openによるイベントリスナーが動作しています。
```console
1.Open前
redyState：1　　　　　　＜＝Openの時のイベント処理
2.Open後,Send前
3.Send後
redyState：2
redyState：3
redyState：4
```

JavaScript イベントリスナーの実行タイミングを理解したい

### 前提・実現したいこと
PHP(laravel)で非同期通信の検索機能を作りたいです。
jqueryの導入ができなかったため、JavaScriptのXMLHttpRequestを使っています。

controllerの処理で、jsonデータを返すというところまでは分かったので、
JavaScript側でそのjsonを受け取ってcontrollerの処理結果をviewに返すという処理をやりたいです。

JavaScript側でjsonを受け取るためには、「xhr.responseType = 'json';」と記述する必要がある、というところまでは理解しているつもりです。

しかし、受け取りに成功しているかも分からず、どういう風にcontrollerの処理結果をviewに返せばよいかも分かりません。

上記について、知見がある方ご教授してくださると幸いです。
拙い文章で申し訳ないですがよろしくお願いいたします。


### <list.blade.php>

```ここに言語名を入力
 <div class="form-group">
   <form id="search">
    <input type="text" name="keyword" value="@if (isset( $keyword )) @endif" 
     id="keyword" placeholder="キーワード入力" >
    <input type="button" id="search-icon" value="検索" onclick="buttonClick()">
   </form>
 </div>  
```
### <Controller.php>
```ここに言語名を入力
 public function getSearch(Request $request)
    {
        // キーワードを取得
        $keyword = $request->input('keyword');

        //クエリ作成
        $query = Blog::query();

        //キーワードが入力されている場合
        if(!empty($keyword)){
        $query->where('title', 'like', '%'.$keyword.'%')
              ->orWhere('body','like','%'.$keyword.'%');
        }
        
        // 検索結果を5件ごとに表示
        $blogs = $query->paginate(5);
        

        // 検索結果をブログ一覧に表示
        return response()->json(['blogs' => $blogs]);
        //($blogs);
        
        }
```
### <search.js>

```ここに言語名を入力
 function buttonClick() {
    const table = document.querySelector('#table').innerHTML = '';
    const textbox = document.forms.search.keyword.value;
    if (!textbox) {
        return false;
     }
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/search', true);
    xhr.responseType = 'json';
    xhr.send(null);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert("通信に成功しました");
        // 通信が成功したらControllerの処理結果をview返したい
        } else {
            alert("通信に失敗しました");
        };

    };

};
```
### <web.php>

```ここに言語名を入力
 //検索機能
Route::get('/search', [BlogController::class, 'getSearch'])->name
('search');
```

### 試したこと

・console.logやchromeのデバッグツールを使用して、jsonが受け取れているか確認したが
　成功しているか不明。
・<search.js>の記述を以下のようにしてみましたが、elseの処理結果のみ反映されます。
```
function buttonClick() {
    const table = document.querySelector('#table').innerHTML = '';
    const textbox = document.forms.search.keyword.value;
    if (!textbox) {
        return false;
     }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/search', true);
    xhr.responseType = 'json';
    xhr.send(null);
    xhr.onreadystatechange = function () {
    
    if (xhr.readyState === 4 && xhr.status === 200) {
            (function (data) {
                data.forEach(function (value) {
                    let id = value.id;
                    let title = value.title;
                    let updated_at = value.updated_at;
                    table.innerhtml = `
                        <tr>
                        <td>${id}</td>
                        <td><a href="/blog/${id}">${title}</a></td>
                        <td>${updated_at}</td>
                        </tr>
                        `;
                });
            }); elseif(data === 0)
                table.innerhtml = `<p>検索結果がありません</p>`;
             } else {
                alert("通信に失敗しました");
            }
```

### 補足情報（FW/ツールのバージョンなど）
MAMPのバージョンは6.0.1(986)
VScodeバージョン: 1.52.1
laravelのバージョンは８です。

Laravelで非同期通信を使って検索機能を実装したい

ダウンロードの進捗状況を表示する、よく見かけるプログレスバーをブラウザで実現したいと思います。

1. JavaScriptでサーバーにあるデータ(動画、写真等指定なし)をダウンロード
2. ダウンロード状況をパーセント表示し、ダウンロード完了(100%)
3. alert("ダウンロード完了");

下記URLでは、まだJSのコードが不十分で、うまく動作しません。
緑のバーがテテーン♪と進んで欲しいです。
https://jsfiddle.net/7u586411/2/

具体的な質問内容が書けず申し訳ありませんが、
ご指摘いただければ、解決に近づけるかもしれません。

頑張ります。よろしくお願いいたします。

```HTML
<div id="meter">
<p id="bar"><span></span></p>
<p id="now">now loading...</p><p id="percent"></p>
</div>
```

```CSS

#meter {

	position: absolute;
	margin: auto;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	width: 200px;
	height: 30px;

	z-index: 20;


}


#now {

	position: absolute;
	margin: auto;

	top: 25px;
	right: 0;
	bottom: 0;
	left: -40;

	text-align: center;
	font-size: 15px;

        font-family: arial;
        font-weight: bold;

	color: #ffffff;

	z-index: 20;

}

#percent {

	position: absolute;
	margin: auto;

	top: 25px;
	right: 0;
	bottom: 0;
	left: 95;

	text-align: center;
	font-size: 15px;

        font-family: arial;
        font-weight: bold;

	color: #ffffff;

	z-index: 20;

}


#bar {

	position: absolute;
	margin: 0 0 0 0;

	width: 200px;
	height: 15px;

	text-align: center;

	border:2px solid #ffffff;
	background: #00FF00;

        -webkit-border-radius: 20px;
        -ms-border-radius: 20px;

	z-index: 20;

}

#bar span{

	position: absolute;
	margin: auto;
	float: left;

	top: 0;

	bottom: 0;
	left: 0;

	background: #00FF00;
	display: block;
	height: 15px;


        -webkit-border-radius: 20px;
        -ms-border-radius: 20px;
	z-index: 20;
	
}

```

```JavaScript
$(document).ready(function() {

	var xhr = new XMLHttpRequest
	xhr.open('GET', 'index.html');
	xhr.onprogress = function (evt) {

	var load = (100*evt.loaded/evt.total|0);
	$('#percent').html(load + '%');
	$('#bar span').css({'width': load*2});
	};

	xhr.send();

});
```

【JavaScript】プログレスバーでダウンロード状況を表示 → 完了後実行する方法

データベースからsqlで抜いてきたデータがあり、それをphpでforeachさせhtmlを作成したのが以下です。
```php
<?php foreach ($days as $day) : ?>
      <div class="list">
        <?php print(htmlspecialchars($day['day_data'], ENT_QUOTES)); ?>
        /<?php print(htmlspecialchars($day['memo'], ENT_QUOTES)); ?>
        <span class="price"><?php print(htmlspecialchars($day['day_price'], ENT_QUOTES)); ?></span>
      </div>
```
完成系は以下です(日付、メモ、価格の三つがデータベースから取ってきた物)
```html
<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div>
<div class="list">"2021-12-10 / eva "<span class="price">8000</span></div>
<div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>
```

課題：
jsのXHRでAjaxです。
```javascript
function period() {
  if (start != '' && end != '' && id != '') {
    
    let data = {
      "aid": id,
      "ast": start,
      "aend": end
    }
    let json = JSON.stringify(data);
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "loop_ajax.php");
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send(json);
    xhr.onreadystatechange = function () {
      try {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            let result = JSON.parse(xhr.response);
            console.log(result);

            //処理

          } else {
          }
        } else {
        }
      } catch (e) {
      }
    };
  }

}

```
これから書く「処理」手前の
```javascript
console.log(result);
```
の実行結果は以下です（chrome：検証consoleでの表示）
```JSON
(2) [{…}, {…}]
0: {id_link: '3', day_data: '2021-12-18', day_price: '2000', memo: ''}
1: {id_link: '3', day_data: '2021-12-23', day_price: '13000', memo: ''}
*複数在り
```

このJSON形式からのHTML化に苦戦中です。
もう一度最終形
```HTML
<div class="list">"2021-12-10 / ガンダム" <span class="price">5000</span></div>
<div class="list">"2021-12-10 / eva "<span class="price">8000</span></div>
<div class="list">"2021-12-10 / はなはな" <span class="price">12000</span></div>
```

JSに不慣れでPHPみたいに書けない事は知っていたのですが、
foreachで4種の値を持つJSONデータを思い通りに動かせません。
どなたか解決いただけませんか？


また、ちょっと考え方を変えてみたアイデアがあります。
JSONをサーバーサイドに送った際、PHPのforeachでHTMLを作り上げてresultに返すのはどうか。。
しかし、件数が多ければ苦戦しそうな感じもします。
調べてもそれらしい記事は探せませんでした。
サーバー側で作り上げるのは有りでしょうか？

宜しくお願い致します。