1. Ajax(Asynchronous javascript And XML)
- 비동기적 통신
- 빠르게 동작하는 웹페이지를 만들기 위한 개발 기법
- Ajax는 웹페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있고, 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
- 이 때, 서버와 데이터를 주고 받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 파일 등이 있다.
1-1. Ajax장점
- 웹 페이지 전체를 다시 로딩하지 않고도 웹페이지 일부분만 갱신할 수 있다.
- 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
- 다양한 UI동적 페이지 구현이 가능해진다.
1-2. Ajax단점
- 페이지의 이동이 없기 때문에 히스토리의 관리가 안 된다.
- 반복적인 데이터 요청이 있으면 느려지거나 작동하지 않게 된다.
1-3. Ajax의 구성 요소
- 웹 페이지의 표현을 위한 HTML 과 CSS
- 데이터의 교환을 위한 JSON, XML(대부분 JSON을 사용한다.)
- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체(브라우저에 내장되어 있다.)
1-4. 서버에 요청하기(request)
- 제이쿼리로 바꾸면 정말 쉽게 된다.
- XMLHttpRequest 객체 : 가장 핵심적인 구성 요소이다.
웹 브라우저가 서버와 데이터를 교환할 떄 사용한다. - open() : 서버로 보낼 ajax요청의 형식을 설정
open(전달방식, url주소, 동기여부) //파라미터가 3개 - send() : 작성된 ajax요청을 서버로 전달
1-5. 서버로부터 응답(response)
-
readyState 프로퍼티
-
status 프로퍼티
-
onreadystatechange 프로퍼티
-
readyState는 XMLHTtpRequest객체의 현재 상태를 나타낸다.
-> UNSENT(숫자0) : XMLHTtpRequest객체가 생성
-> OPENED(숫자1) : open()메서드가 성공적으로 실행됨
-> HEADERS_REVEIVED(숫자2) : 모든 요청에 대한 응답이 도착함
-> LOADING(숫자3) : 요청한 데이터를 처리 중임
-> DONE(숫자4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨 -
status 프로퍼티 : 서버의 문서상태를 나타낸다.(HTTP상태 코드)
-
onreadystatechange : XMLHTtpRequest객체의 readyState 프로퍼티 값이 변할 때 마다 자동으로 호출되는 함수를 설정
제이쿼리로하는게 훨씬 쉬우니까 꼭해보자.
- 연습
<%@ 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>
</head>
<body>
<h3>Ajax 요청 보내기 테스트</h3>
<input type="submit" value="Get방식으로 보내기" onclick="send1();">
<input type="submit" value="Post방식으로 보내기" onclick="send2();">
<p id="result"></p>
<script>
function send1(){
let xhr = new XMLHttpRequest();
xhr.open("GET", "request_ajax.jsp?userid=apple&userpw=1234", true);
xhr.send();
xhr.onreadystatechange = function(){
// 통신 성공의 조건
if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200 ){
document.getElementById("result").innerHTML= xhr.responseText;
}
}
}
function send2(){
let xhr = new XMLHttpRequest();
xhr.open("POST", "request_ajax.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("userid=admin&userpw=abcdefg");
xhr.onreadystatechange = function(){
if( xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200 ){
document.getElementById("result").innerHTML= xhr.responseText;
}
}
}
</script>
</body>
</html>- JSON 라이브러리
json-simple-1.1.1.jar
오늘자 day08프로젝트에 라이브러리 추가하고 빌드패스로 jar 추가해주었다.
jQuery를 이용한 ajax : console창을 볼것
<%@ 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.3/jquery.min.js"></script>
</head>
<body>
<input type="button" value="jquery_get" onclick="get()">
<input type="button" value="jquery_post" onclick="post()">
<script>
function get(){
$.ajax({
type: "GET",
url: "data.json",
dataType: "json",
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
error: function() {
console.log('통신실패!!');
},
success: function(data) {
console.log("get data : " + data);
console.log("get data.search_word : " + data.search_word);
console.log("get data rank : " + data.search_word[0].rank);
console.log("get data name : " + data.search_word[0].name);
}
});
}
function post(){
$.ajax({
type : 'post',
url : 'data.json',
dataType: "json",
contentType : "application/json; charset=utf-8",
error: function() {
console.log('통신실패!!');
},
success: function(data) {
console.log("post data : " + data);
console.log("post data.search_word : " + data.search_word);
console.log("post data rank : " + data.search_word[0].rank);
console.log("post data name : " + data.search_word[0].name);
}
});
}
</script>
</body>
</html>순서 : day07 뒷부분 +
ajax_test.jsp
request_ajax.jsp
ajax폴더안에 새로 new- other - file검색해서 다음 후에data.json이라는 파일만들기
json_test.jsp
+day08의 앞부분
ajax_test.jsp
- 잡담
대시보드만드는 회사. 이 회사는 제니퍼소프트인데 수영장까지있네 대박
