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
'etc' 카테고리의 다른 글
| Algorithms - 가중치 랜덤 알고리즘(랜덤 쿠폰 뽑기) (5) | 2024.12.30 |
|---|---|
| 티스토리 - hELLO 스킨 '카테고리의 다른 글' 2중 노출 되는 문제 해결 방법 (0) | 2024.07.18 |
| QA - Test Case를 통한 QA 테스트 (1) | 2024.07.18 |
| Linux - 리눅스 필수 명령어 (0) | 2023.07.17 |
| XML - XML의 문법과 구성요소 (0) | 2023.06.23 |
