ajax
2022. 12. 15. 17:00ㆍJSP
ajax_test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GET, POST 방식의 요청</title>
<!-- 애이잭스는 갈곳에 가서 할것다하고 다시 돌아온다 요청할
고 페이지는 화면상에서는 절대 이동되지 않는다.그래서 고 요청할 페이지에는
우리가 다시 도로 가져올 데이타만 있으면 된다 데이타를 그냥 가지고 오기만 하는것이다
현재 페이지는 고대로 있고 가져온 데이타만 왔다가 넣었다가 뺏다가 한다 페이지이동이
되지않고 고 우리가 요청하는 페이지에 있는 데이타들만 빼오거나 거기에 데이타 넣거나
한다 페이지 이동이 없고 데이타만 빼오거나 넣는행위만 해서 페이지 이동은 없다 -->
</head>
<body>
<h1>GET 방식의 요청</h1>
<button onclick="sendRequest()">GET 방식으로 요청 보내기!</button>
<p id="text"></p>
</body>
<script>
function sendRequest() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "request_ajax.jsp?city=Seoul&zipcode=45645", true);
/*request_ajax.jsp에서는 받아만 주면된다.바디태그에만 작성해주면 된다*/
/* xhr.open("GET", "request_ajax.jsp", true); *///두번째 인자는 어디로 갈래 어디로요청을 보낼래 라는 뜻 동기식으로 한다 true 지금은 여러개의연산이 있지않아서 동기식으로 해도 된다 ajax가 여러개가 동시에 돌아가지 않기 때문이다. 연산못할경우가 없을것이고 가벼워서 true로 줘도 무방하다
xhr.send();
xhr.onreadystatechange = function() {//실시간으로실행되는함수 상태가 변할때마다 얘가 실행된다. 애이잭스통신상태변할때마다실행된다
//현재 애이잭스의통신상태변할때마다 실행된다.어만약에
//스테이트가 바뀔때마다 어떤거 실행할래?
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
document.getElementById("text").innerHTML = xhr.responseText;//request_ajax.jsp에서 끌어온 데이타들인 주소 CITY우편주소가 안으로 들어간다
}
}
}//페이지 이동이 안된다. 뒤로가기 버튼도 비활성화되있다.
</script>
</html>request_ajax.jsp
<%-- 여기는 사용자가 보는 페이지가 아니다 직접 에이잭스가 와서 필요한 데이타를 갖고 가는곳이다
요 바디태그에 작성된 밑문서를 responseText로 가져오는 것이다 xhr.responseText는
ajax_test.jsp에 온레디스테이트채인지안에 성공 후 가져오는 부분에 있따 요청을
request_ajax.jsp에다가 쿼리스트링을 붙여 보내고 데이타 필요한거 가져와서
p태그안에 꽂는다--%>
<%
out.print(request.getParameter("city"));
out.print(request.getParameter("zipcode"));
%>'JSP' 카테고리의 다른 글
| 쿠키 set, get (0) | 2022.12.15 |
|---|---|
| ajax POST 방식의 요청 (0) | 2022.12.15 |
| 요청, 응답 페이지 (1) | 2022.12.15 |
| GET, POST 방식의 요청 (0) | 2022.12.15 |
| 내장 객체 (0) | 2022.12.14 |