728x90
반응형
1) GET 방식
/step3-ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 방식으로 회원정보 검색</title>
<script type="text/javascript">
var xhr;
function startAjax() {
var idComp = document.getElementById("userId");
if (idComp.value === ""){
alert("아이디를 입력하세요.");
return; //함수 실행 중단 (밑에 코드 진행X)
}
//XMLHttpRequest : ajax를 위한 javascript 객체
xhr = new XMLHttpRequest();
//callback함수 등록 (서버가 응답하면 실행될 함수를 등록)
xhr.onreadystatechange = callback;
//요청 시, get방식으로 "FindMemberAjaxServlet"으로
//userId를 전송한다.
xhr.open("get", "FindMemberAjaxServlet?userId="+idComp.value);
xhr.send(null); //post방식일 때, 사용하는 메서드
}
//서버가 응답하면 실행되는 함수
function callback() {
// readyState=4 : 응답 완료
// status=200 : 정상수행
if (xhr.readyState == 4 && xhr.status == 200){
var info = xhr.responseText;
//span영역에 결과값 보여주기
document.getElementById("result").innerHTML
= "<font color=blue>"+info+"</font>";
} else if (xhr.readyState < 4) {
document.getElementById("result").innerHTML
= "<font color=green>"+"응답 대기 중"+"</font>";
}
}
</script>
</head>
<body>
<form>
<input type="text" placeholder="아아디" id="userId">
<input type="button" value="검색" onclick="startAjax()">
</form>
<br>
<span id="result">
</span>
</body>
</html>
/FindMemberAjaxServlet.java
package step3;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/FindMemberAjaxServlet")
public class FindMemberAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//서버의 작업처리 시간이 많이 소요된다고 가정
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String id = request.getParameter("userId");
if (id != null && id.contentEquals("java")) {
out.println("이름:아이유 || 주소:판교");
} else {
out.println(id+"에 대한 회원정보가 없습니다.");
}
out.close();
}
}
[ 실행 화면 ]
1. 첫 실행 화면
2. 아무 값도 넣지 않았을 때,
3. 응답 대기 중
4. 없는 아이디를 검색했을 때,
4_2. 있는 아이디를 검색했을 때, info 정보가 span 영역에 반영된다
2) POST 방식
/step4-ajax-post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step4-ajax-post</title>
<script type="text/javascript">
var xhr;
function startAjax() {
var postNoComp = document.getElementById("postNo");
if (postNoComp.value == ""){
alert("삭제할 게시물 번호를 입력해주세요.");
return; //함수 실행 중단
}
//XML 객체 생성
xhr = new XMLHttpRequest();
//callback함수 등록 (요청에 대한 응답이 완료될 때 실행)
xhr.onreadystatechange = callback;
//open
xhr.open("post", "AjaxPostServlet");
//ajax post 방식일 때 content type을 지정해야 한다.
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//send
var pno = postNoComp.value;
xhr.send("pno="+pno); //post방식으로 ajaxPostSerlvet에 데이터 전송
}
function callback() {
if (xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
</script>
</head>
<body>
<input type="number" id="postNo" placeholder="post번호">
<input type="button" value="삭제" onclick="startAjax()"><br><br>
<span id="deleteResult"></span>
</body>
</html>
/AjaxPostServlet.java
package step4;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/AjaxPostServlet")
public class AjaxPostServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String pno = request.getParameter("pno");
System.out.println("서버에서 pno 전달받음 "+pno);
out.println(pno+"번 게시물을 삭제했습니다.");
out.close();
}
}
[ 실행 화면 ]
1. 첫 실행 화면
2. 아무 값도 넣지 않았을 때,
3. 입력 결과
728x90
반응형
'Java Web Programming > 5. JavaScript | Ajax | jQuery (JSON)' 카테고리의 다른 글
| [Ajax/JSON] JSON을 이용한 Ajax 통신 2 (JSON Array + JSON Object) (0) | 2020.10.06 |
|---|---|
| [Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) (2) | 2020.10.06 |
| [Ajax/JSON] JSON Basic! (개념, 특징, 기본문법) (0) | 2020.10.06 |
| [JSP/Ajax] 동기적 방식과 비동기적 방식(ajax) (0) | 2020.10.05 |
| [JSP/Ajax] Ajax basic 기본 개념과 문법 (+ xml, json 설명) (2) | 2020.10.05 |
