[ AJAX, Axios ]

AJAX (Asynchronous JavaScript And XML)

非同期Webアプリケーションを作成するために,以下の組合せのWeb開発手法を用いる.
AJAXとは、主にWebサーバ(バックエンドソース)と通信する際に用いられる技術であり、ブラウザ内蔵XMLHttpRequestオブジェクトを介してWebサーバと非同期通信を行う.非同期処理の内容については、前の文章で書いたものですが、見てみてください.>>同期/非同期処理、callback/Promise/async&await
Ajacks、Ajacksなどと呼ばれていますが、何の間違いもないので、口に巻いてあるものを使いましょう.

ひどうきつうしん

前の文章を嫌なあなたが走り続けることにたとえると、前のランナーが入ってきて私が出発できるように、前のコードが完成してから次のコードが実行される構造が表示されます.これが同期構造です.雨の動機は何ですか?前走者が来ようが来まいが、先に来た順に洗ってから入る仕組みだ.通常、プログラミング言語の多くは同期特性を有し、これは少し簡単な構造であり、前のタスクに時間がかかると、行遅延や処理応答遅延などの性能が低下する.そのため,非同期概念が出現し,要約すると「いつからでも,先に終わる人が先に出る」という形式が非同期処理である.非同期通信は、このような非同期特性を有するWebサーバの要求および応答と容易に考えられる.

AJAX非同期機について説明すると、たまに「Webページをアップロードせずにデータをロードする方法」という記事がありますが、これは非同期機についての説明ではなく、AJAXについての説明です.通常のWebサーバとの通信は、WebブラウザのアドレスウィンドウにURIを入力することでWebサーバコンテンツにアクセスする構成である.しかし、このように呼び出すと、ページ全体が再ロードされ、ページが点滅します.ただし、AJAXは、XMLHttpRequestオブジェクトを介してサーバからJSONおよびXML形式のデータを受信することしかできないため、更新を行うことができます.AJAXは非同期通信をサポートしていますが、「非同期のためページを再ロードしない」のではなく、AJAXの説明です.

なぜAJAXを使うのか

AJAXをファンクラブ掲示板にした理由美少女のぬいぐるみを集めているオタクのネイバーに美少女コレクションカフェがあるとしたら?ミカザンという会員が一人いても.Mikaちゃんが投稿した投稿には、常に20枚以上の高画質の写真が掲載されており、200件のコメントが寄せられている人気投稿があります.あなたはミカザンの投稿をクリックしました.該当する投稿ページに移動します.高画質の写真なので、ロード時間は長いですが、すぐに彼が書いた美少女の子のコメントに満足します.そして突然人の意見が気になり、確認のために確認コメントボタンをクリックした.もしその時、ページ全体が再ロードされたら?高画質写真は再レンダリングが必要で、コメントデータも200以上あるため、サーバ上での処理に時間がかかります.コメントデータを受信するためにページ全体を再レンダリングすることは、サーバとクライアントにとってリソースを浪費する低効率なプロセスです.これがAJAXが必要な理由と言えるAJAXを使用すると、投稿をロードせずにコメントデータのみをロードできます.AJAXは,簡易なWebサーバ通信によりデータと要求を分離し,処理速度を速める.つまり、必要に応じてページを再ロードする必要はありません.

AJAXの使用

AJAX通信をサポートするライブラリには、代表的なjqueryとAxiosがあります.まずはVanilla JS(純JavaScript)をもとに説明します.その前に、WebブラウザとWebサーバ間の約束されたリクエストと応答について簡単に説明します.

Request/Response

requestとresponseは、その名の通り要求と応答であり、requestはクライアント(Webブラウザ)が送信する要求データであり、responseはWebサーバが送信する応答データである.2人の構造は頭と体くらいで、深く入るともっと説明がありますが、後の文章で説明します.AJAXを理解するために知ってるでしょ

実行順序

通信用XMLHttpRequestオブジェクト

を作成

要求リストおよびオプション設定(要求方式、アドレス、同期性、要求ヘッダなどのその他)

要求(設定情報によりWebサーバを呼び出す)

を送信する.

コールバック関数呼び出し(Webサーバからの応答処理)

コードを見るだけで、すぐにできます.

// Vanilla JS
var xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성 
xhr.open('GET', '/getOduckList.do', true); // 데이터 전송 방식, 주소, 비동기여부 설정 
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // HTTP 요청 헤더 설정 
xhr.onreadystatechange = function () { // 웹 서버 응답이후 callback 함수
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200 
            || xhr.status === 201) { // HTTP STATUS CODE가 200번대면 정상 처리란 얘기다.
            console.log(xhr.responseText);
        } else {
            console.error(xhr.responseText);
        }
    }
};
xhr.send();

XMLHttpRequestオブジェクトを作成し、そのオブジェクトにWebサーバリソース情報を記入してsendを実行すると、通信が開始されます.

AJAX章節/欠点

長所

ページの高速化:すべてのデータを一度に含める必要がないため、高速化されます.

非同期通信サポート:Webサーバの処理が完了するのを待つことなく処理できます.

リソースアクセスとデータ分離:アクセスアドレスとデータをモジュールとコンテンツから分離できます.

ページを再ロードする必要がなく、データクエリーを行うことができます.データをクエリーするためにページを完全に再ロードする不合理さを解消します.

短所

履歴管理X:Webブラウザの後退ボタンは使用できません.

要求頻度の上昇によるサーバ負荷の増加:データをモジュール単位で隔離するのは良い方法ですが、データを十分に利用するとWebサーバへのアクセス頻度が増加します.

通信の進捗を確認できません:送信後、Webブラウザを離れました.その後どのくらい行われたか確認できません.

AJAXをサポートしていないブラウザがあります.

オペラ7以下

マイクロソフトInternet Explorer 4.0以下

テキストベースのブラウザリンク、w 3 m

視覚障害者用ブラウザ

71997年以前のブラウザ

でサポートされているCharset限定:正直、通信なら同じだと思います.

ドメイン間サポートX:セキュリティポリシーの改善に伴い、ドメインが異なる場合、非常に傲慢である必要があります.

AJAXはここまで整理できます

Jquery AJAX

jQueryは、HTMLのクライアント操作を簡素化するためのプラットフォーム間JavaScriptライブラリです.XMLhttpRequestオブジェクトを使用するよりも、jqueryを使用してAJAX通信を行うことができます.
jqueryは最近ますます使われなくなっている傾向です

AJAX構文の照会

先に使う方法は以下の通りです.

// Jquery
$.ajax({ 
    url: 'getOduckList.do',       // 요청 url
    type: 'GET',                  // 데이터 전송방식 (GET, POST)
    cache: false,                 // 요청 페이지 캐시 여부 (false, true)
    dataType: 'json',             // 웹 서버에서 받아올 데이터의 형태 (xml, json, html, script)
    data: { userName : '미카짱' },  // 웹 서버에 전송할 파라미터 ({ key : value } 형태)
    success : function (data) {   // 통신 성공시 실행되는 callback 함수
        console.log(data.userInfo);
    }, 
    error : function (request, status, error) { // 통신 실패시 실행되는 callback 함수
        console.error(error);
    } 
});

確かに、XMLHttpRequestオブジェクトを生成するよりも直感的で簡単です.jqueryを使用して、通信に関する情報を属性で入力および実行します.もっと直感的に作れるメリット以外はよくわかりません.

Axios

AxiosはNodejsとブラウザのために設計されたPromiseベースのHTTPクライアント.
簡単に言えばノードjs専用のAJAXになるのは簡単ですPromiseベースで実現されているので、ES 6以上の仕様で使用できます.主な特徴は以下の通りです.

オペレーティング環境に従って、XMLHttpRequestオブジェクトまたはNode.js上のhttp API

を使用

ES 6ベース

HTTP要求は

を取り消すことができる.

HTTP要求に応答してJSON形式で自動パケット

JSONデータは自動変換可能です.

Axios構文

まず、プロジェクトにaxiosパッケージを追加します.

$ npm install axios

次に、ソースの上部にaxiosリファレンスを追加します.

import axios from 'axios'

// GET 방식
axios.get('getOduckList.do').then((res) => {
    console.log('list : ' + res);
})
.catch((err) => {
    console.log(err);
});

// POST 방식
axios.post('setOduckPerson.do', { userName : '미카짱', age : 40 }).then((res) => {
   console.log('add person : ' + res);
})
.catch((err) => {
    console.log(err);
});

// DELETE 방식 
axios.delete('deleteOduckPerson.do', { userName : 'carrtos' }).then((res) => {
   console.log('delete person : ' + res);
})
.catch((err) => {
    console.log(err);
});

// PUT 방식
axios.put('updateOduckPerson.do', { userName : '미카짱', age : 45 }).then((res) => {
   console.log('update person : ' + res);
})
.catch((err) => {
    console.log(err);
});;

Axiosは異なるデータ伝送方式の方法をサポートする.そこに住所を書いて、追加の設定を入力するだけで、AJAX通信ができます.そして、コードから見ると、ES 6 Promiseとして、then、catchを介して通信の成功と失敗を制御する.伝送方式については、後述するRESTFUL APIの記事で説明する.データ通信においては、伝送方式を選択することができ、各要求方法にはそれぞれ特徴がある.なんだよ~

import axios from 'axios'

await axios({
    method : 'POST',
    url : 'updateOduckPerson.do',
    data : {
        userName : '미카짱',
        age : 45
    }
})

既存のJquery AJAXのように、属性を設定する方法でAxiosを記述することもできます.また、非同期通信であるため、ES 8 async/awaitもサポートされている.

整理する

今日は、非同期通信AJAXとJquery、Axiosの使い方をご紹介します.Web開発にはAJAXが必要です.精神が錯乱するほど多く使われているので、概念や使い方を知る必要があります.
今晩はシチューです.🥕
関連項目:https://99geo.tistory.com/65
https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0
https://axios-http.com/kr/docs/intro
https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
https://shxrecord.tistory.com/108