jQuery

jQueryは、HTMLのDOM操作、イベント制御、アニメーション、AjaxのWebページを含むJavaScriptライブラリです.

ellentを選択する強力な方法を提供します.規則性があり、イベントを処理できます.

は、選択されたエンティティ

を効果的に制御するための複数の手段を提供する.

DOMに関する処理を容易に実施することができる.

アニメーション効果が作りやすい.

AJAX処理方式が便利に利用できます.

jQueryとJSのタグの違い

次の2つのコードは同じ動作を実現します.ご覧のように、jqueryはより短いコードを持っており、「write less,do more」というjqueryスローガンの意味は非常にはっきりしています.

JavaScriptコード

var titleElements = document.getElementsByClassName("title"); for (var titleElement in titleElements) { titleElement.className = titleElement.className + " selected"; }

第2クエリーコード

$(".title").addClass("selected");

jQueryの使用方法

npmまたは糸取付

$ npm install jquery
$ yarn install jquery

CDN (Contents Delivery Network)
インターネットが利用可能であれば、HTMLスクリプトのhead 태그の間に次のコードを挿入してインストールする必要はありません.これは、パッケージ管理ツールがない時期に開発される場合に使用される典型的な方法です.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

プロジェクトに

パッケージファイルを含める
説明は省略する.

Ajaxとは?

REF : https://99geo.tistory.com/65
Ajax : Asynchronous Javascript And XML,
AJAXは비동기식 - 자바스크립트 & xmlの略です.
1つの方法は、ブラウザのXMLHttpRequestオブジェクトを使用してページ全体をリフレッシュすることなく、ページの一部にのみデータをロードすることです.
JavaScriptの非同期通信、クライアントとサーバ間でXMLデータを交換する技術を使用します.
すなわち,JavaScriptによりサーバにデータを要求する.
AJAXというネットワーク技術を使用すると、クライアントはサーバにデータを要求し、結果を返すことができます.簡単に言えばサーバとクライアント(私)の通信です

클라이언트란?サーバから情報を取得し,ユーザに表示して対話できるソフトウェアである.
Ex)Webブラウザ、携帯アプリなど…
.

서버란?ネットワーク上でアクセス可能なプログラムであって、特定の資料の管理またはアクセスを制御するプログラム.サーバは一般的にユーザーによって直接使用されません.

AJAX通信コード

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response; // 해당 $.get이 ajax의 통신 코드 
	});
	return tableData;
}
console.log(getData()); // undefined (기대되는 값은 상품1의 정보)

解説

上のコードでは、$.get()はajax通信を行う部分である.
.

2https://domain.comにHTTP GET 요청要求1번 상품(product) 정보を送信するコードである.言い換えれば、指定されたURLに「1つのデータを送信する」という要求を出すようなものです.
.

サーバから受信したデータは、response 인자に含まれる.
.tableData = response;コードによって受信されたデータは、tableData変数に格納される.
.
では、今このgetData()を呼んだらどうなりますか?受け取ったデータが何であれ、まず何かを撮ります.結果はundefinedで、底から見たように.
.
$.get()リクエストと受信データを使用して、待機せずに次のコードreturn tableDataを返します.実行したからです.
.
したがって、getData()の結果値は、初期値が設定されていないTable Dataの未定義値を出力します.
.
このように,特定の論理実行の終了を待たずに,まず残りのコードを実行するのがJavaScriptが採用する非同期処理方式である.
.
このような非同期処理の問題は、コールバック関数とプロセスによって解決できます.ここで説明します.https://velog.io/@he1256/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EB%B0%A9%EC%8B%9D-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%ED%99%9C%EC%9A%A9-javascript

Ajaxの必要性と意義

WEB画面で簡単に何かを歌ったり、データを閲覧したりする場合は、Ajaxを使用してページ全体のリフレッシュ(HTTPプロトコル)を避けることができます.
基本的に、HTTPプロトコルは同期しており、クライアントが要求を送信し、サーバ側が応答を受信すると、接続が切断されます.だから画面の内容を更新するために、再び要求して、応答して、ページ全体を更新します.しかし、そうすれば、大きな資源の浪費と時間の浪費をもたらすだろう.
AJAXはXMLHttpRequestオブジェクトを介してサーバに要求し、HTMLページ全体ではなく一部のみを更新します.この場合、必要なJSONまたはXML形式のデータのみを受信して更新するので、対応するリソースと時間を節約できます.

Ajaxのメリット

Webページのスピードアップ

サーバの処理が完了するのを待たずに処理を行うことができる.

サーバ上でデータを転送するだけで、全体的な符号化量を削減できます.

は、既存のWeb上では実現不可能な様々なUIを可能にする.(Flickrの場合は、ページを再ロードすることなく、写真のタイトルやラベルを変更できます.)

Ajaxの欠点

はストレージ管理を行わない.

ページの通信がないため、セキュリティの問題があります.

連続でデータを要求すると、サーバ負荷が増加する可能性があります.

XMLHttpRequestを介して通信する場合、進捗情報はユーザーに提供されません.(リクエストが完了していない場合、ユーザーはページを離れるか、エラーが発生する可能性があります.)

AJAXを使用できないブラウザについて質問があります.

HTTPクライアントの機能は限られている.

をサポートするCharsetは限られています.

スクリプトで作成され、デバッグが容易ではありません.

と同じ-ソースポリシーのため、他のドメインと通信できません.(クロスドメイン問題)

Ajaxプロセス

1.XMLHttpRequestオブジェクトを作成します.
ブラウザにrequestを送信する準備をさせるプロセス
必要な方法を持つオブジェクトが必要です
.
2.コールバック関数を作成します.
サーバ応答時に実行される関数
HTMLページの更新
.
3. Open a request
サーバ応答時に実行される関数
HTMLページの更新
.
4. send the request

AXIOS or FETCH

Axios&Fetchは?

axiosやFetchはAjaxなどのWeb通信機能を提供するライブラリで、状況に応じて選択する必要がありますが、axiosの方が人気があります.
Axios

の旧式ブラウザをサポートします.

応答タイムアウトを設定する方法がある.

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

node.jsで使用できます.

リクエスト(キャンセルリクエスト)を中止できます.

catchに捕まったとき.その後、実行せずに、対応するエラー・ログをコンソール・ウィンドウに表示します.

の戻り値はPromiseオブジェクト形式です.
.
.axiosコード

async function test() {
        await axios({
            method: 'get',
            url: `https://api.testUrl`
        }).then(function (response) {
            console.log("성공", response)
        }).catch(function (error) {
            console.log("실패", error)
        })

Fetch

JavaScriptの内蔵ライブラリなので、インポートせずに使用できます.

ライブラリの更新はエラーを防止します.
(React Nativeはライブラリを頻繁に更新しますが、Fetchは更新を防止します.)

ネットワークエラーが発生した場合、待機する必要があります.(応答タイムアウトAPI提供X)

でサポートされていないブラウザがあります.

の戻り値はPromiseオブジェクト形式です.
.
.Fetchコード

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error))

ref:

https://7942yongdae.tistory.com/13