Interaction With Serverの概念を整理する

API & UI

APIとUIはコミュニケーションの媒体です
API:プログラミングアプリケーションとの通信媒体
ユーザーインタフェース:ユーザーとコミュニケーション可能なメディア

WEB Architecture

Client:ユーザーと対話
≪サーバー｜Server｜ldap≫:リソース要求と応答の処理
DB:リソースの保存

Browser

ブラウザの機能は,HTML,CSS,JSで記述されたコードをバイナリ数のコンピュータのみで聞き取ることができる.HTML、CSS、JSで書かれたコードを使用し、ブラウザでは復号エンジン(内部エンジン、V 8?)を使用します.バイナリデータをコンピュータに渡し、ブラウザにコンピュータがデータを処理した結果を表示します.

Server

リソース、リソースの提供主体.一種の店.お客様が何か欲しいものがあれば、お店は原料を加工して商品を伝えます.サーバは、クライアントリクエストを受信すると、リソースに基づいて応答します.(サーバが応答しない場合はありません.)

API

クライアントがデータベース内のリソースを十分に利用し、サーバがクライアントで使用できるようにするインタフェース.お店のメニュー.あるいはマニュアルに相当します.例えば、GET/messagesはメッセージングメニューであり、POST/messagesはメッセージングストレージメニューである.

HTTP

クライアントとサーバの通信のルールと約束.
Webアプリケーションアーキテクチャでは,クライアントとサーバがHTTPプロトコルを用いて対話を行う.
HTTPメッセージMDN
(例えば、郵便局のHTTPインボイスはヘッダ、インボイス内の内容はBody)

1起動方式

常にリクエストと応答から構成されます.要求事項がなければ、なければ、誤った要求であれば、誤った要求に答えます.リクエストを無視中にエラーが発生しました.

2構成

1)ヘッダー:要求、コンテンツの種類、およびどのクライアント(OS/ブラウザ)からの要求が含まれます.
2)マスター:サーバにデータを送信するスペース(メソッドではなくマスターメソッドを持つ).
応答にはヘッダとボディもあります.

3プロパティ

1)Stateless:http上の各要求は独立している
あなた:サムギョプサルを食べに行きましょう
サーバー:うん!
(10分後)
あなた:食べに行きましょう.
サーバー:何ですか.
特別なマークがない限り,2回のリクエストを出しても脈絡は形成されない.
(HTTPは、接続を保持せずに応答と要求を処理します.要求に対する応答を処理すると、接続が切断されます.)
これを改善するために出てきたのはクージ、サイソン?などなど.
2)接続なし:1要求1応答
これは会話ではなく、リクエストに応答すると接続が切断されます.
(クライアント要求により、サーバが要求を完了すると接続が切断されます)
(HTTPは、接続を保持せずに応答と要求を処理します.要求に対する応答を処理すると、接続が切断されます.)
HTTPの2つの特性

4つの方法

1)GETサーバへのリソース要求
2)POSTサーバ上でのリソースの作成
3)PUTサーバー上のリソースの修正
4)DELETEサーバ上のリソースの削除
その他の方法
HTTP状態コード

Ajax

Dynamic Webが登場するまでは、サーバと自由に通信することは難しく、リクエストがあるたびに新しいページをダウンロードしてレンダリングします.これらの問題を改善する主役はAjaxです!
XMLHttpRequest(XHR):サーバとの自由な通信
JSとDOM:ページが点滅することなく一部更新されていることを確認する
(Ajaxでは、クライアントはサーバを介して必要なデータを非同期で受信するだけで、一部のページを動的に更新するしかありません.)
(ダイナミックレンダリング技術のパターン自体がノード.jsなどのプログラムではなくAjaxです.)
XMLHttpRequest(jQueryを使用)はサーバリソースをもたらし,サーバとの通信を担当するXMLttpRequestは問題を改善し,標準API fetchとしてその構文が発展した.

XMLHttpRequest

JavaScriptを非同期で駆動し、サーバからリソースを取得し、必要な部分だけを更新するという概念が現れた場合、最初のAPIはXMLHttpRequestと呼ばれます.
サンプルコード

function reqListener() {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

JQuery ajax

:Ajaxという名前のモジュールからサーバにリソースを要求します.以前のコールバック方式とは異なり、フィルタ方式で実現されています.
サンプルコード

$.ajax({
  url: 'http://example.com',
  method: 'GET',
  dataType: 'json'
})
  .done(function(json) {
        console.log(json)
  })
  .fail(function(xhr, status, errorThrown) {

  })
  .always(function(xhr, status) {
         console.log('요청완료')
  });

fetch

:JQueryの可読性をさらに強化します.XMLHttpRequestと似ていますが、より強力で柔軟です.Fetch APIは、ネットワーク通信を含むリソースを取得するためのインタフェースを定義する.promisオブジェクトを返します.同期ではなく非同期でサーバから返されます.
サンプルコード

fetch('http://example.com')
  .then(res => res.json())
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
});

FetchとXMLHttpRequestの違い

XMLHttpRequest API

ベースのイベント=>は、現在Promiseベースの

とは大きく異なります.

初期API実施時、ブラウザ間で不一致が発生する

は、ブラウザ間の差異を補うためにjQueryの使用を開始する=>jQueryは、ブラウザ間の問題に大きな解決策を提供する

である.

Fetch API

Promise=>に基づく現在の非同期処理プログラミング方式

に非常に適している.

は、ブラウザ間で不一致がない詳細なAPIを提供している.

XHRには、仕様では議論されていないいくつかの有用な機能=>(settimeout、abort、progress)

はありません.

以降の追加サポート

ソース
(MDN Using fetch参照)
.json()でボディのみをグループ化
JSON.parse()このオプションを使用すると、オブジェクト全体が失われます.
JSON
通常、サーバからクライアントにデータを送信するためのフォームです.