728x90
[Javascript] AJAX란 무엇인가?
AJAX 란? AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저
gangintheremark.tistory.com
AJAX에 대해서
AJAX란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 비동기 통신이기 때문에 새로고침 없이도 데이터 로드가 가능하다.
장점
- 서버에서 처리가 완료될 때까지 기다리지 않고 다른 프로세스를 진행 가능하다
- 웹페이지의 속도와 성능이 향상된다
단점
- 연속으로 데이터 요청 시, 서버 부하 증가
// Jquery 에서 AJAX 적용하기
$.ajax({
url: 요청이 보내지는 곳,
type: get/post,
success: 요청 성공 시, 동작할 함수,
error: 요청 실패 시, 동작할 함수,
complete: 요청 완료 후 동작할 함수,
data: 서버로 넘어갈 값,
dataType: data의 타입,
global: 전역 함수 여부 true/false,
async: 동기 여부 true/false
}); 🍀 reqres.in의 API를 이용해 사용자(USER) 목록 데이터 가져오기
<head>
<script>
$(document).ready(function () {
$("#ok").on("click", function(){
// URL : https://reqres.in/api/users?page=2 비동기 요청
$.ajax({
// 1. 요청 코드
type: "get",
url: "https://reqres.in/api/users", // '?' 뒤의 쿼리스트링은 분리해서 작성
data: {
page:2 // 여러 개도 가능
},
// 2. 응답 코드
dataType: "text", // 응답 뭘로 받을래? text or json
success: function(data, status, xhr) { // 성공했을 때
console.log(data);
$("#result").text(data);
},
error: function(xhr, status, error) { // 실패했을 때
console.log("error 발생");
}
});
});
});
</script>
</head>
<body>
<button id="ok">요청</button> <br>
<div id="result"></div>
</body>728x90
'Framework & Library > JQeury' 카테고리의 다른 글
| [JQuery] 제이쿼리의 Event 처리 (1) | 2023.07.14 |
|---|---|
| [JQuery] Utility method 유틸리티 메소드 (0) | 2023.07.14 |
| [JQuery] Mainipulation method (0) | 2023.07.14 |
| [JQeury] Attributes method 속성 메소드 (0) | 2023.07.14 |
| [JQuery] Traversing (0) | 2023.07.13 |
