[ AJAX, Axios ]
21002 ワード
AJAX (Asynchronous JavaScript And XML)
非同期Webアプリケーションを作成するために,以下の組合せのWeb開発手法を用いる.
AJAXとは、主にWebサーバ(バックエンドソース)と通信する際に用いられる技術であり、ブラウザ内蔵XMLHttpRequestオブジェクトを介してWebサーバと非同期通信を行う.非同期処理の内容については、前の文章で書いたものですが、見てみてください.>>同期/非同期処理、callback/Promise/async&await
Ajacks、Ajacksなどと呼ばれていますが、何の間違いもないので、口に巻いてあるものを使いましょう.
ひどうきつうしん
前の文章を嫌なあなたが走り続けることにたとえると、前のランナーが入ってきて私が出発できるように、前のコードが完成してから次のコードが実行される構造が表示されます.これが同期構造です.雨の動機は何ですか?前走者が来ようが来まいが、先に来た順に洗ってから入る仕組みだ.通常、プログラミング言語の多くは同期特性を有し、これは少し簡単な構造であり、前のタスクに時間がかかると、行遅延や処理応答遅延などの性能が低下する.そのため,非同期概念が出現し,要約すると「いつからでも,先に終わる人が先に出る」という形式が非同期処理である.非同期通信は、このような非同期特性を有するWebサーバの要求および応答と容易に考えられる.
なぜ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を理解するために知ってるでしょ
実行順序
// 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章節/欠点
長所
短所
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以上の仕様で使用できます.主な特徴は以下の通りです.
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
Reference
この問題について([ AJAX, Axios ]), 我々は、より多くの情報をここで見つけました https://velog.io/@carrotsman91/AJAX-Axiosテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol