Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 고잉버스
- 개발자 회고록
- 코테
- JavaScript
- 연습문제
- 스프링 컨테이너
- GoingBus
- 반복문
- 백준 java
- Java
- 리눅스
- 프로그래머스
- 카카오
- 자바
- Kotlin
- 리눅스마스터 1급 정리
- 리눅스마스터 3과목
- Linux
- 월간코드챌린지
- 문자열
- java 백준 1차원 배열
- 리눅스마스터1급
- 자바스크립트 코딩의 기술
- 코딩테스트
- 스프링 빈
- 명령어
- Memoir
- toCharArray
- map
- 백준 javascript
Archives
- Today
- Total
hoon's bLog
ajax 기본 개념, 데이터 형식 본문
반응형
Ajax란?
- Ajax = Asynchronous JavaScript and XML의 약자
- Ajax는 HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법
- Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만 갱신 가능
- 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 가능
Ajax를 배우기 위한 사전지식(해당 링크 클릭!)
Ajax 통신 간 주고 받는 데이터 형식
- JSON
- XML
- HTML
- 텍스트 파일 등
<예시코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Ajax Intro</title>
// jquery 라이브러리
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function() {
// id가 requestBtn인 버튼을 클릭했을때, text 영역에
// 해당 파일(or 페이지)("/examples/media/ajax_intro_data.txt")를 반환
$("#requestBtn").on("click", function() {
$("#text").load("/examples/media/ajax_intro_data.txt");
});
});
</script>
</head>
<body>
<h1>Ajax(Asynchronous JavaScript and XML)</h1>
<p id="text">Ajax Test Script</p>
<button id="requestBtn">데이터 불러오기!</button>
</body>
</html>
Ajax의 장점
- 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만 갱신 가능
- 웹 페이지가 로드된 후에 서버로 데이터 요청 가능(Request)
- 웹 페이지가 로드된 후에 서버로부터 데이터 응답 가능(Response)
- 백그라운드 영역에서 서버로 데이터 보내기 가능
Ajax의 한계
- Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스 X
- 클라이언트 풀링(client pooling) 방식 : 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
- 서버 푸시(server push) 방식 : 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미
- 요즘 많이 사용하는 스마트 폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예라고 볼 수 있다!
- 바이너리(binary) 데이터 송/수신 X
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청 X
- 클라이언트 PC로 Ajax 요청 X
Ajax 프레임워크
- Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경
- 보편적으로 많이 사용되는 프레임워크
- Prototype
- script.aculo.us
- dojo
- jQuery(필자는 jQuery를 많이 사용할 예정!!)
Reference
https://www.tcpschool.com/ajax/intro
https://www.tcpschool.com/ajax/ajax_intro_basic
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
ajax XMLHttpRequest object, XHR 기초 (0) | 2023.07.23 |
---|---|
ajax 구성 요소 및 동작 원리, 진행과정 (0) | 2023.07.22 |
jQuery effect 이펙트 효과의 제어 (0) | 2023.07.19 |
jQuery effect 제이쿼리 이펙트 효과 (2) | 2023.07.18 |
jQuery event delegation propagation 이벤트 위임 전파 버블링 (0) | 2023.07.17 |