Ajax
12610 ワード
●Ajax
要求Webサーバは必要なデータのみを受信し、クライアントから
データ処理用の非同期Webアプリケーション
クリエイティブ用Web開発技術
○同期VS非同期通信差異
非同期は画面をリフレッシュせず、リクエストと応答の間にも表示されません.
他のことができて、便利で速い環境を感じることができます.
○Ajaxのメリット
○Ajaxのデメリット
○$.ajax基本構造
実習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Ajax01</h1>
<button onclick = "getData()">데이터 요청</button>
<script>
// jQuery를 이용한 Ajax 실습
// Ajax02에 있는 정보를 가져오기
// 버튼이 클릭 되었을 때 ajax 통신 시작
function getData(){
$.ajax({
// 1. 어디랑 통신할 건지
url : "ExAjax02.html",
// 2. 성공 메소드
// data => 통신 성공 시 응답받은 데이터가 담길 변수
// 통신 성공시 실행되는 함수의 매게변수에 응답데이터 전부 담겨지게 된다
success : function(data){
alert("통신 성공");
console.log(data);
},
// 3. 에러 메소드
error : function(){
alert("통신 실패");
}
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Ajax02에 있는 태그입니다.</h1>
</body>
</html>
Reference
この問題について(Ajax), 我々は、より多くの情報をここで見つけました https://velog.io/@seoil1221/Ajaxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol