자바스크립트의 기술
HTML 파일 화면의 일부분만 새로 받아와서 변경하고 싶은 경우 사용한다 (화면을 새로고침 하지 않는다)
request -> response 시 새로고침 하지 않음
백그라운드에서 데이터를 주고 받을 수 있음
제이쿼리 엑시오스
w3school에서 연습
https://www.w3schools.com/js/js_ajax_intro.asp
AJAX Introduction
AJAX Introduction AJAX is a developer's dream, because you can: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background AJAX Example Explained HTML Page
www.w3schools.com
.then
fetch + async + await
리턴값.text()
리턴값.json()
https://joshua1988.github.io/web-development/javascript/js-async-await/
자바스크립트 async와 await
(중급) 자바스크립트 개발자를 위한 async, await 사용법 설명. 쉽게 알아보는 자바스크립트 async await 개념, 사용법, 예제 코드, 예외 처리 방법
joshua1988.github.io
<%@ 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.5.1/jquery.min.js"></script>
<style>
div {
border: 1px solid black;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="reply-box">
<div id="reply-1" class="re">첫번째 댓글 입니다.</div>
</div>
<input type="text" id="tf-reply" />
<button onclick="start()">댓글쓰기</button>
<script>
var num = 1; // 이 값은 원래 db에서 가져와야됨
function start() {
num++;
var a = $('#tf-reply').val();
// 통신이 성공하면 아래 로직 실행
$.ajax(
// ajax 비동기 백그라운드로 다른페이지에 request를 하고 response를 받으면 result에 데이터를 저장한다.
// 보낼타입은 json 상대방에게 받을 타입도 json이다. 아래에서 확인
{ // 오브젝트
type : 'post',
url : 'AjaxResponseTest.jsp',
data : '{"username":"ssar", "password":"1234"}',
contentType : 'application/json; charset=utf-8',
dataType : 'json' // 받을데이터를 어떻게 파싱할까 text / json
}
).done(
function(result) { // 통신이 성공
console.log(result);
$('#reply-box').prepend(
"<div id='reply-" + num + "'>" + a + "</div>");
}).fail(function(error) { // 통신이 실패
console.log(error);
});
}
</script>
</body>
</html>
<%@page import="com.google.gson.Gson"%>
<%@page import="com.cos.blog.dto.ResponseDto"%>
<%@page import="java.io.BufferedReader"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
BufferedReader br = request.getReader();
String input = null;
StringBuilder sb = new StringBuilder();
while((input = br.readLine()) != null ){
sb.append(input);
}
System.out.println("받은데이터 시작---");
System.out.println(sb.toString());
System.out.println("받은데이터 끝---");
ResponseDto<String> dto = new ResponseDto<>();
dto.setStatus(200);
dto.setData("성공");
Gson gson = new Gson();
String returnStr = gson.toJson(dto);
System.out.println(returnStr);
out.println(returnStr); // JSON을 리턴
%>
'Web > JavaScript' 카테고리의 다른 글
| 자바스크립트 객체를 JSON으로 바꾸기 (0) | 2020.06.02 |
|---|---|
| jQuery 제이쿼리 시작 (0) | 2020.06.02 |
| 자바스크립트 history 객체 활용 미완성 (0) | 2020.03.13 |
| 자바스크립트 window.location으로 select 웹사이트 이동 (0) | 2020.03.13 |
| 자바스크립트 웹 페이지 프린트 (0) | 2020.03.13 |