1-1. Ajax장점
1-2. Ajax단점
1-3. Ajax의 구성 요소
1-4. 서버에 요청하기(request)
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>
<%@ 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>
ajax_test.jsp
request_ajax.jsp
ajax폴더안에 새로 new- other - file검색해서 다음 후에data.json이라는 파일만들기
json_test.jsp
+day08의 앞부분
ajax_test.jsp