https://intheham.tistory.com/44#%3C%20DOM%20%3E-1
[JavaScript] form, image, DOM
※ 내장 객체 서열 window : 창의 위치, 툴바 구성 등 | document : 윈도우창에 웹 페이지 뿌리기 | form, image | button, text, textarea, radio.... (value 로 접근) < form > - get, post // 이름이 t1인 입력 양식의 값 -- f.t
intheham.tistory.com
AJAX (Asynchronous JavaScript and XML)
: 비동기 자바스크립트와 xml
웹 동기 요청 -- 요청을 보내면 새 페이지로 응답페이지를 받아옴. 전체 페이지 바뀜.
웹 비동기 요청
-- 응답 페이지가 출력된 상태에서 요청을 보냄. 페이지 이동 없음.
-- 결과로 텍스트, json, xml 데이터를 받아옴. -> 이 데이터를 DOM으로 수정해 화면에 적용함.
DOM -- document.getElement
< 비동기 요청 방법 >
1. 비동기 request 객체 생성
const xhttp = new XMLHttpRequest();- const 는 상수 정의할 때 쓰임. (상수: 처음 초기값 할당만 가능하고 선언. 실행문에서는 =연산자 사용 불가)
- 상수 이름은 대문자로 주로 표현함. (에러는 안나지만 개발자들 사이에서의 약속)
// 함수 객체 const f1 = (x, y) = { return x+y; }
// 함수 호출 f1(1,2);
2. 비동기 요청 경로 설정
xhttp.open("GET", "ajax_info.txt");open(param1, param2);
param1 -- 전송방식 -- post, get, patch, update, delete
param2 -- 요청받을 서버페이지 경로
3. 요청 보냄
xhttp.send();
4. 요청의 응답을 받았을 때(text, JSON, xml) 자동 호출될 핸들러 등록, 실행됨.
xhttp.onload = function() { // 핸들러 용으로 쓸 익명함수
// 받은 응답을 가지고 처리 코드 작성
}
* 웹 동기 요청 (새 페이지 호출)
<form action="${pageContext.request.contextPath}/ajaxtest/gettest" method="get" name="f">
name: <input type="text" name="name">
<input type="submit" value="동기 요청">
</form>
* 웹 비동기 요청 -- get 방식
- url에 폼파라메터 값을 같이 전송하고 싶으면 링크 뒤에 "?" 달고 이어 적기
url?name=value&name=value&name=value
<%@ 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 type="text/javascript">
function a(){
//1. 비공기 요청 객체 생성
const xhttp = new XMLHttpRequest();
//2. 서버로부터 비동기 요청 응답이 왔을 때 자동 실행될 핸들러 등록
xhttp.onload = function(){
let res = document.getElementById("res");
res.innerHTML = xhttp.responseText; //responseText: 서버로부터 텍스트 형태로 받은 응답값
}
let param = "?name=" + f.name.value; //전송할 폼파라메터 값이 많을 경우 오타가 날 수 있어서 변수로 뺌.
//3. 비동기 요청의 전송방식, 서버페이지url 설정 -- get방식인 경우 url 뒤에 파라메터 붙여 값을 같이 전송함.
xhttp.open("GET", "${pageContext.request.contextPath}/ajaxtest/gettest"+param);
//4. 요청 보냄
xhttp.send();
}
</script>
</head>
<body>
<form name="f">
name: <input type="text" name="name">
<input type="button" value="ajax get요청" onclick="a()">
</form>
<div id="res"></div>
</body>
</html>
* 웹 비동기 요청 -- post 방식
- url에 폼파라메터 값을 같이 전송하고 싶으면 get 방식과는 다르게 ? 가 없음.
- 폼파라메터 값을 .send( __ )에 넣기
- .setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 추가하기.
<%@ 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 type="text/javascript">
function b(){
//1. 비공기 요청 객체 생성
const xhttp = new XMLHttpRequest();
//2. 서버로부터 비동기 요청 응답이 왔을 때 자동 실행될 핸들러 등록
xhttp.onload = function(){
let res = document.getElementById("res");
res.innerHTML = xhttp.responseText; //responseText: 서버로부터 텍스트 형태로 받은 응답값
}
//post 방식은 ?지우기 (연결하려면 &로 연결하기)
let param = "name=" + f.name.value;
//3. 비동기 요청의 전송방식, 서버페이지url 설정
xhttp.open("POST", "${pageContext.request.contextPath}/ajaxtest/gettest");
// post방식 enctype을 application으로 설정
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4. 요청 보냄 POST 방식으로 보낼 때에는 send()에 값을 넣어 보냄.
xhttp.send(param);
}
</script>
</head>
<body>
<form name="f">
name: <input type="text" name="name">
<input type="button" value="ajax post요청" onclick="b()">
</form>
<div id="res"></div>
</body>
</html>
* /ajaxtest/gettest (Servlet)
@WebServlet("/ajaxtest/gettest")
public class GetTest extends HttpServlet {
private static final long serialVersionUID = 1L;
public GetTest() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String name = request.getParameter("name");
// response.getWriter() : 응답페이지에 출력할 출력 스트림 생성
// 서블릿은 주로 응답을 주지만.. 출력도 할 수 있어요~~
// 출력할 양이 많으면 jsp 로 빼서 Servlet은 forward로 jsp url연결함.
response.getWriter().append("get: hello "+name+"~~");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String name = request.getParameter("name");
response.getWriter().append("post: hello "+name+"~~");
}
}
