hoon's bLog

ajax 기본 개념, 데이터 형식 본문

IT/HTML, jQuery, Ajax

ajax 기본 개념, 데이터 형식

개발한기발자 2023. 7. 21. 09:01
반응형

 

Ajax란?

  • Ajax = Asynchronous JavaScript and XML의 약자
  • Ajax는 HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법
  • Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만 갱신 가능
  • 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 가능

Ajax를 배우기 위한 사전지식(해당 링크 클릭!)

☞HTML
☞자바스크립트(JavaScript)
☞XML

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

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

https://www.tcpschool.com/ajax/ajax_intro_basic

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

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
'IT/HTML, jQuery, Ajax' Related Articles more