etc

ajax - 기초 문법

Cold Bean 2024. 11. 15. 22:26
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
    	$("#start_ajax").click(function() {
        	$.ajax({
            	url: "data/data.jsp",	// 통신할 주소
               	type: "POST",			// 전송방식 (GET : 전송 시 파라미터 url에 담김 / POST : 전송 시 파라미터 url에 담기지 않음)
                contentType: "application/json",	// 요청으로 보낼 데이터 타입
                dataType: "HTML",		// 응답으로 받을 데이터 타입
				data: {name:"김찬빈"},	   // url로 보낼 데이터
                success: function(result) {		// 요청이 성공적으로 완료되었을 때 실행될 콜백 함수
                	alert("connect success!");
                    $("#name").text("이름: " + result);
               	},
                error: fuction(error) {	// 요청이 실패했을 때 실행될 콜백 함수
                	alert("error")
                }
			});
		});
	});
</script>
</head>
<body>
	<button id="start_ajax">서버와 통신 시작</button>	<!-- id가 "start_ajax"인 버튼을 생성 -->
    <p><span id="name"></span></p>	<!-- id가 "name"인 요소를 생성 -->
</body>
</html>

 

AJAX란?

  • Asynchronous Javascript and XML. 이름에 XML에 들어가지만 최근에는 HTML, JSON을 더 많이 사용한다. 
  • 기존 웹은 페이지를 로딩하면 다른 페이지를 로딩하기 위해서는 링크를 타고 넘어가야 했다. (깜빡임이 발생한다.)
  • AJAX 기술을 사용하면 페이지를 전환하지 않고도 다른 화면을 보여줄 수 있다.
  • 비동기적으로 서버에 요청을 하기 때문에 페이지의 전환 없이도 새로운 데이터를 가져올 수 있다.
  • 대표적으로 ajax를 이용해서 브라우저에 요청을 보내는 방식은 두 가지가 있다. get과 post 방식이다.
특징 GET POST
캐시화(cached) 캐시될 수 있음 캐시되지 않음
브라우저 히스토리 히스토리에 쿼리 문자열이 기록됨 히스토리에 기록되지 않음
데이터 길이 데이터의 길이가 URL 주소 길이 이내로 제한됨.
(익스플로러에서 URL 주소가 가질 수 있는 최대 길이는 2,083자이며, 이 중에서 순수 경로 길이는 2,048자까지만 허용됨)		 제한 없음
데이터 타입 오직 ASCII 문자 타입의 데이터만 전송할 수 있음 제한 없음
보안성 데이터가 URL 주소에 포함되어 전송되므로, 아무나 볼 수 있어 보안에 매우 취약함 브라우저 히스토리에도 기록되지 않고, 데이터가 따로 전송되므로, GET 방식보다 보안성이 높음

 

제이쿼리 ajax 메소드

지금은 ajax 요청을 보낼 때 fetch()나 axios 라이브러리를 사용하지만, 몇몇 전통이 있는 기업에서는 레거시 프로젝트 때문에 jQuery AJAX를 사용한다.(우리 회사가 그렇다)

 

POST와 GET 타입 외에도 PUT, DELETE, PATCH도 사용하고 싶다면 다른 라이브러리를 알아봐야한다.

메소드 설명
$.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송
$.get() 전달받은 주소로 GET 방식의 HTTP 요청을 전송
$.post() 전달받은 주소로 POST 방식의 HTTP 요청을 전송
$.getScript() 웹 페이지에 스크립트를 추가
$.getJSON() 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음
.load() 서버에서 데이터를 읽은 후, 읽어들인 HTML 코드를 선택한 요소에 배치

 

$.get()

  • 제이쿼리에서는 Ajax를 이용해서 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공한다.
  • URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다. 
  • HTTP 요청이 성공했을 때 콜백함수가 실행된다.
$.get(URL주소, 콜백함수);
// GET 방식으로 서버에 HTTP Request를 보냄
$.get("/example/media/request_ajax.php",
	// 서버가 필요한 정보를 같이 보냄
    {
    	species: "고양이",
        name: "나비",
        age: 3,
	},
    // 응답이 오면 호출되는 콜백 함수
    fuction(data, status) {
    	$("$text").html(data + "<br>" + status);	// 전송받은 데이터와 전송 성공 여부를 보여줌
    }
);

 

$.post()

  • jQuery에서는 Ajax를 이용해서 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공한다.
$.post(URL주소, 데이터, 콜백함수);
// POST 방식으로 서버에 HTTP Request를 보냄
$.post("examples/media/request_ajax.php",
	{
    	name: "홍길동",
        grade: "A"
    },
    fucntion(data, status) {
    	$("#text").html(data + "<br>" + status);	// 전송받은 데이터와 전송 성공 여부를 보여줌
    }
);

 

$.ajax()

  • $.ajax() 메소드는 jQuery get, post 메소드를 하나로 합친 메소드라고 볼 수 있다.
  • 해당 메소드로 다양한 요청을 서버에 보낼 수 있다. (type 속성이나 method 속성으로 http 메소드를 지정할 수 있다.)
$.ajax(URL주소, 옵션)
$.ajax({
	url: "/examples/media/request_ajax.php",	// 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
    data: { name: "김찬빈" },					   // HTTP 요청과 함께 서버로 보낼 데이터
    method: "GET",								// HTTP 요청 방식(GET, POST)
    dataType: "json"							// 서버에서 보내줄 데이터의 타입
    success: function(response) {
    	console.log("User find successfully!");
    },
    error: function(error) {
    	console.log("Error finding user: ", error);
    }
})

 

.load()

  • load() 메소드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 표시하는 단축 메서드이다.
// demo_test.txt 내용을 응답받은 뒤에 id가 list인 요소에 표시함
$.("#list").load("/demo_test.txt");

 

jQuery ajax 다양한 문법

  • jQuery ajax 메소드를 이용할 때 성공, 에러 처리를 위한 굉장히 다양한 문법 방식이 존재한다.

콜백 방식

심플하게 하나의 응답에 대한 콜백 함수를 실행에 콜백 내부에서 에러나 다양한 처리를 하는 방법이다.

// 콜백 방식
$.get("url", fuction(data) {
	console.log(data);
});

 

프로퍼티 방식

콜백 함수 대신 함수를 포함한 자바스크립트 객체 자체를 인자로 줄 수 있다.

$.get("url", {
	success: fuction(data) {
    	cosole.log(data);
    },
    error: function() {
    	console.log("요청이 실패하였습니다.");
    },
    always: function() {
    	console.log("요청이 완료되었습니다.");	// always 프로퍼티는 요청이 성공하든 실패하든 항상 실행
    }
});

 

헤더 설정하기

만일 추가적인 http 헤더를 설정하고 요청을 보내야 할 경우 아래와 같이 사용한다.

$.ajax({
	type: "GET",
    url: "/api/me",
    beforeSend: function (xhr) {	// 서버에 요청 보내기 전 헤더 설정
   		xhr.setRequestHeader("Content-type", "application/json");
        xhr.setRequestHeader("ApiKey", "asdfasxdfasdfasdf");
    }
});
728x90