[ jQuery ] ajax / 비동기 통신

728x90

📖 AJAX(Asynchronous JavaScript And Xml)

🔹 자바스크립트와 XML을 이용한 비동기 통신

✔ 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

📌 동기 통신은 동시에 여러 작업을 못하고 요청이 들어오면 다른 작업 못하고 순차적으로 처리

📌 비동기 통신은 요청하고 기다리지 않고 다른 동작 가능 !

✅ Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

서버와 주고받는 데이터 형태
JSON
XML,XSLT,XMLHttpRequest	웹 서버와 비동기적으로 데이터를 교환하고 조작
HTML(또는XHTML) 과CSS	표현 정보
DOM,자바스크립트	동적인 화면 출력 및 표시 정보와의 상호작용
텍스트 파일 등

Ajax 애플리케이션 은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트,JSON,JSON-RPC를 이용할 수 있다.

▶ DHTML이나LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니라

함께 사용하는 기술의 묶음을 지칭하는 용어이다.

실제로AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

지원하는 브라우저로는모질라 파이어폭스,인터넷 익스플로러,오페라,사파리,구글 크롬등

단, 오페라는 현재 XSL 포맷팅 객체와 XSLT 변환을 지원하지 않는다.

Ajax 장점	Ajax 단점
웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다.	클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다	바이너리 데이터를 보내거나 받을 수 없다.
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.	스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
백그라운드 영역에서 서버로 데이터를 보낼 수 있다.	클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.

📌 클라이언트 풀링(client pooling)

사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
이에 반해 서버 푸시(server push) 방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공
ex) 스마트 폰에서 각종 앱이 보내는 푸시 알림 /서버 푸시 방식의 대표적인 예

✅ Ajax 프레임워크

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경

가장 많이 사용되는 프레임워크.

- Prototype

- script.aculo.us

- dojo

- jQuery

예시 🔽

$.ajax({
    url: " 주소 ", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "이름" },  // HTTP 요청과 함께 서버로 보낼 데이터
    method: "GET",   // HTTP 요청 메소드(GET, POST 등)
    dataType: "json" // 서버에서 보내줄 데이터의 타입
})
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body");
})
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
    $("#text").html("오류입니다.<br>")
    .append("오류명: " + errorThrown + "<br>")
    .append("상태: " + status);
})
// 
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다.");
});

실행 🔽

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery를 이용한 비동기 통신 구현</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/*
  AJAX(Asynchronous JavaScript And Xml) : 자바스크립트와 XML을 이용한 비동기 통신
 */
     $(document).ready(function(){
    	 //text 정보를 읽어 옴
    	 $.ajax({
    		 url:'myString.jsp',
    		 success:function(param){//서버의 응답이 성공했을 때 호출
    			 //전송받은 text를 body에 표시
    			 $('body').append(param);
    		 }
    	 });
     });
</script>
</head>
<body>

</body>
</html>

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%> 
<!-- contentType=plain으로 바꾸기 / 공백 최대한 지워줌-->
Hello JSP!

728x90

저작자표시 비영리 변경금지

'JAVA' 카테고리의 다른 글

자바(JDK) 다운로드, 환경변수 설정하기 (0)	2022.12.21
[ Java ] 자바 버전 확인 방법 (0)	2022.06.15
[ Java ] 추상클래스,추상메서드/인터페이스 (0)	2022.05.10
[ Java ] 클래스 변수/인스턴스 변수/지역변수 (0)	2022.05.10
JAVA 용어 정리 [1] JVM/스레드/오버로딩/오버라이딩 (0)	2022.05.02

Haeun’s Dev Blog

[ jQuery ] ajax / 비동기 통신

📖 AJAX(Asynchronous JavaScript And Xml)

✅ Ajax 프레임워크

'JAVA' 카테고리의 다른 글

댓글

티스토리툴바

[ jQuery ] ajax / 비동기 통신

📖 AJAX(Asynchronous JavaScript And Xml)

✅ Ajax 프레임워크

'JAVA' 카테고리의 다른 글

관련글

댓글

티스토리툴바