https://www.youtube.com/watch?v=nKD1atl6cAw&t=37s 참조
Ajax (Asynchronous JavaScript and XML)
- 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
- 최근에는 XML 보다 JSON을 더 많이 사용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미
Ajax 언어 해석하기
비동기 : Asynchronous
프론트엔드에서 페이지 전환 없이 웹서버와 통신하는 것
웹에서 실시간으로 문서편집, 지도도 보는 등의 기능을 할 수 있는데, Ajax라는 비동기로 서버와 통신할 수 있는 기술이 있기 때문이다.
서버
유저가 데이터 요구하면 데이터 보내주는 프로그램
ex) 네이버웹툰서버 : 유저가 웹툰 달라고 요구하면 웹툰 보내주는 프로그램
요구하는 방법
1. 원하는 데이터 URL 을 알아야 한다. *URL: 서버개발자가 만든 API
2. 그 URL로 'GET요청' 한다.
'GET요청' 하는방법 3가지
1. 주소창에 url 입력
2. 버튼으로 get요청 -> 브라우저가 항상 새로고침됨
<form action = "comic.naver.com" type="get">
<button type = "submit">3. AJAX로 GET요청 -> 새로고침 없이 서버에게 GET요청하는 JS코드
장점 : 새로고침이 없으니까 웹페이지 전환이 부드러워짐
1) URL로 (영상참조)
자바스크립트로 GET요청하는 방법
1. 옛날 JS 방식
<script>
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
it(this.readyState == 4 && this.status == 200) {
console.log(ajax.reponseText)
}
};
ajax.open("GET", "https://naver.com", true);
ajax.send();
</script>2. 요즘 JS방식
<script>
fetch("https://naver.com')
.then((response) => {
return response.json()
})
.then((결과) => {
console.log(결과)
})
</script>3. 외부 라이브러리 방식
- Jquery안에 ajax 함수 쓰는 방법
- react에서 axios 라이브러리 쓰는 방법
Ajax의 동작방식
- 요청 : 브라우저는 서버에 정보를 요청한다. (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현하고 있다.)
[ 서버의 동작 : 서버는 응답으로 데이터를 전달한다. (XML, JSON) ] - 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.
참조 : https://devyj.tistory.com/1
Ajax 함수
참조. https://goodmean.tistory.com/95
1.setCharacterEncoding ()
- 클라이언트에게 보내는 데이터의 문서타입과 문자셋을 응답정보 헤더에 설정하는 메소드이다.
- 들어오는 파라미터를 UTF-8로 해석할 때 쓴다. 이 밖에 쓰임새는 블로그를 참조한다.
resp.setContentType("application/x-json; charset=utf-8");
2. getWriter( )
클라이언트에 응답하기 위한 출력 스트림을 반환한다. 그리고 이 출력 스트림을 이용해 클라이언트에게 응답을 보내게 된다.
reponse.getWriter().print() 를 이용하여 ajax의 결과값으로 보낼 수 있다.
resp.getWriter().print(jObj);Ajax 예제 1
Q. json에서 데이터 가져오기
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<p id="demo"></p>
<button type="button">button</button>
<script type="text/javascript">
$("button").click(function(){
// json 읽어들이는 방법
// 자바스크립트에서 블록괄호 ({ }) 나오면 json!
$.ajax({
// 전송(송신)
url:"data.json", // 어디로 갈지?
type:"get", // 타입 형식 : get(공개), post(보안)
datatype:"json", // 타입
// 수신(받음)
success:function(data){
// alert('success');
// alert(data);
//내용물 보려면 문자열로 변환하는 JavaScript 쓴다 : 객체를 JSON 문자열로 변환
// alert(JSON.stringify(data));
for(i = 0;i < data.length; i++){
$("#demo").append((i + 1) + " "); //1~3
$("#demo").append(data[i].name + " "); // "" = 문자열
$("#demo").append(data[i].age + " ");
$("#demo").append(data[i].address + " ");
$("#demo").append(data[i].phone + "<br>"); //개행
}
}, // 파일 못 찾았으면 : error
error:function(){
alert('error');
}
});
});
</script>
</body>
</html>data.json
[
{
"name":"홍길동",
"age":24,
"address":"서울시",
"phone":"123"
},
{
"name":"성춘향",
"age":16,
"address":"남원시",
"phone":"234"
},
{
"name":"홍두께",
"age":22,
"address":"강릉시",
"phone":"345"
}
]
과제
Q. data.jsp 의 데이타를 index로 불러와라
*주의
\" : key값의 앞뒤에 붙이는 것
index.jasp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!-- Q.data.jsp 의 데이타를 index로 불러와라 -->
<p id="name"></p>
<p id="age"></p>
<p id="birth"></p>
<br>
<button type="button">button</button>
<script type="text/javascript">
$(function () {
$("button").click(function(){
// json 읽어들이는 방법
// 자바스크립트에서 블록괄호 ({ }) 나오면 json!
$.ajax({
// ajax로 전송하기
url:"data.jsp", //url
type:"get", // 타입 형식 : get(공개), post(보안)
datatype:"json", // 타입
// 수신
success:function(data){
// alert('success');
// alert(data.trim());
// 이제 데이터를 이 파일의 p태그에 넣어야함
//형변환 - JSON.parse : 문자열->숫자
let json = JSON.parse(data);
// alert(json);
// p는 일반태그이므로 json.name이라고 적으면 된다.
$("#name").text(json.name);
$("#age").text(json.age);
$("#birth").text(json.birth);
},
error:function(){
alert('error');
}
});
});
});
</script>
</body>
</html>
data.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = "홍길동";
int age = 24;
String birth = "2001/06/17";
// json + 내장객체
//key값 붙이면
String str = "{ \"name\":\"" + name + "\", \"age\":" + age + ", \"birth\":\"" + birth + "\" }";
// \" : key값의 앞뒤에 붙이는 것
//key 값 붙이기 전에는 "{name:" + name + ", age:" + age + ", birth" + birth" }";
out.println(str);
%>Ajax 예제 2
Q. Client에서 Server로 데이타를 보내고, 받아라
데이타를 보내주고, 받는 부분의 통신은 Ajax로 한다.
4교시까지 듣고 정리하기
'front-end' 카테고리의 다른 글
| [bootstrap] 부트스트랩 사용법 (0) | 2023.02.22 |
|---|---|
| [JDBC] JDBC란? (0) | 2023.02.09 |
| [JSP] JSP의 개념 (0) | 2023.02.08 |
| [servlet] servlet 개념 알기, GET/POST, Session (0) | 2023.02.06 |
| [Jquery] Jquery 사용하기, 함수 호출 방법, radio / checkbox / select 알아보기 (0) | 2023.02.03 |
댓글