반응형
Ajax : 자바스크립트를 이용한 비동기 통신기술
포그라운드 통신 : 모든 정보가 전달되는것 GET방식 POST 방식 우리가 기존에 서버에 보냈던 방식
(내가 요청한 정보 - 입력한 정보가 모두 나타나는것)
백그라운드 통신 : 내가 요청한 사항이 서버에 요청이 되면, 사용자 눈에는 보이지 않는 방식
동기 방식 : 내가 서버에 요청한 결과를 결과가 올 때 까지 기다리는것
(내가 택배를 신청하면 택배가 올 때 까지 택배만 기다리는 것)
비동기 방식 : 결과가 올 때 까지 기다리지 않고, 다른 할 일을 처리하는 것 - default 값
(온라인 쇼핑을 하고 주문한 물품을 현관앞에서 기다리지 않고 내 할 일 하는것)
1.XMLHttpRequest 객체얻기
var xhr;
if(window.ActiveXObject)//Window Explorer면
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)//기타브라우져일 경우
xhr = new XMLHttpRequest();
2.CallBack(리턴받을 함수) 설정
xhr.onreadystatechange = res
여기서 res()는 자바스크립트 함수임
3.작업요청 지정(GET/POST)
-open(전송방식,요청페이지,비동기지정(true))
-GET방식일 경우
xhr.open("GET","ex.jsp?no=3&no2=5",true);
xhr.send(null);
-POST방식일 경우
xhr.open("POST","ex.jsp",true);
xhr.send("no=3&no1=5");
4.res()함수 호출시 상태값
var code = xhr.readyState;
0 : uninitialize
1 : loading
2 : loaded
3 : interactive
4 : complete
var status = xhr.status;
200 : complete
404 : Not Found
500 : Syntax Error
5.데이터 수신
function res()
{
if(xhr.readyState==4 && xhr.status==200)
{
//Text Data 수신시
var data = xhr.responseText;
//JSON코드 받을시에는 반드시 eval()함수를 사용해야한다.
var json = eval(xhr.responseText); // or JSON.parse(xhr.responseText)
//Xml Data 수신시
var data = xhr.responseXML;
}
}
cf)자바스크립트에서 한글처리
encodeURIComponent(str)
위 파일을 이 경로에 넣는다.
해당 파일은 위의 과정을 생략하는데 도와준다.
var xhr = null;
function createRequest(){
if(xhr!=null)return; // 싱글톤
if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
xhr = new XMLHttpRequest();
}
function sendRequest(url, param, callBack, method){
createRequest(); // xhr을 가져오는 과정
var httpMethod =
// Post와 post가 아니면 GET
(method!='POST' && method!='post')?'GET':'POST';
var httpParam =
(param==null || param == '')?null:param;
var httpURL = url;
//요청 방식이 get방식이고, 전달할 파라미터 값이 있다면
//url경로를 제작 해야 한다.(.../test.jsp?ch=123)
if(httpMethod == 'GET' && httpParam != null)
// get방식으로 파라미터 제작해주겠다.
// 아니면 아무것도 안함 post 방식은 send때 보냄
httpURL = httpURL+"?"+httpParam;
xhr.open(httpMethod, httpURL, true);
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange = callBack;
// post 방식은 send에 파라미터를 줘야 하기 때문에, 넣어주고 아니면 null
xhr.send(httpMethod == 'POST'?httpParam:null);
}
html로 간단한 예제 실습 파일을 만들어보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>에이젝스 1단계</title>
<!-- XMLHttpRequest 객체를 사용할 수 있는 Library 연결 -->
<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">
function result() {
let word = document.getElementById("word").value.trim();
if(word=="") {
alert("단어를 입력하세요");
document.getElementById("word").value="" // 값 지우기
document.getElementById("word").focus(); // 포커스
// JQuery = ${ #word }.value=""
return;
}
const url = "word.do"; // WordAction(Servlet)
const param = "word=" + word; // word.do?word=one
// Ajax 통신으로 요청
sendRequest(url,param,callbackFn,true);
}
// 결과를 수신받을 함수
function callbackFn() {
let readyState = xhr.readyState;
let status = xhr.status;
console.log("readyState=" + readyState, "status=" + status);
if(xhr.readyState==4 && xhr.status==200) {
let data = xhr.responseText;
console.log("data=" + data);
document.getElementById("disp").innerHTML = data;
}
}
</script>
</head>
<body>
단어: <input id="word">
<input type="button" value="결과확인" onclick="result()">
<hr>
<div id="disp"></div>
</body>
</html>
3번 4번에 동시에 데이터가 중복 저장되기 때문에 4번하나만 저장하기 위해서 callback에 if문을 넣는다.
Servlet 작성하기(Action)
package action;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Servlet implementation class WordAction
*/
@WebServlet("/word.do")
public class WordAction extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// /word.do?word=one
// 수신 인코딩 설정
request.setCharacterEncoding("utf-8");
// parameter 받기
String word = request.getParameter("word").toUpperCase();
String kor_word = "";
switch(word) {
case "ONE" : kor_word = "하나"; break;
case "TWO" : kor_word = "둘"; break;
case "THREE" : kor_word = "셋"; break;
case "FOUR" : kor_word = "넷"; break;
case "FIVE" : kor_word = "다섯"; break;
default : kor_word = "기록되지 않은 정보";
}
// 결과전송
response.setContentType("text/html; charset=utf-8;");
PrintWriter out = response.getWriter();
out.printf("[%s]는 [%s]란 뜻입니다.", word, kor_word);
}
}
한 부분만 HTML에서 바꿔야 할 때 비동기식으로 전체를 바꾸는 것이 아닌 Ajax를 사용해서 한 부분만 수정할 수 있는 방식을 사용하기 위해서 Ajax를 사용한다.
위에 있는 것은 앞으로 사용 안하고 이제 부터 쉬운 방식을 사용할 것이다. (JQuery 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>에이젝스 1단계</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
function result() {
// let word = document.getElementById("word").value.trim();
let word = $("#word").val().trim();
if(word=="") {
alert("단어를 입력하세요");
$("#word").val(""); // 값 지우기
$("#word").focus(); // 포커스
// JQuery = ${ #word }.value=""
return;
}
// JQuery Ajax 이용
// 형식) $a.jax({name:value, name:value, ...})
$.ajax({
async : true, // true(비동기), false(동기) true:default
type : "GET", // 호출방식(get/post) get:default
url : "word.do", // 호출대상
data : {"word":word}, // parameter : word.do?word=word
dataType : "text/html", // 서버에서 수신된 데이터 타입 ("xml or json")
success : function(result){ // 요청정보가 정상처리 되었을 경우 응답데이터
// alert(result);
$("#disp").html(result);
},
error : function(err){ // 에러 발생시 콜백되는 함수
alert(err.responseText);
}
});
}
</script>
</head>
<body>
단어: <input id="word">
<input type="button" value="결과확인" onclick="result()">
<hr>
<div id="disp"></div>
</body>
</html>
JQuery Ajax 타입으로 사용하는 방법(이름 구분을 확실하게)
(이거 처음 치려면 힘드니까 샌드위치형식으로 코드 치십시오)
// JQuery Ajax 이용
// 형식) $a.jax({name:value, name:value, ...})
$.ajax({
async : true, // true(비동기), false(동기) true:default
type : "GET", // 호출방식(get/post) get:default
url : "word.do", // 호출대상
data : {"word":word}, // parameter : word.do?word=word
dataType : "text/html", // 서버에서 수신된 데이터 타입 ("xml or json")
success : function(result){ // 요청정보가 정상처리 되었을 경우 응답데이터
// alert(result);
$("#disp").html(result);
},
error : function(err){ // 에러 발생시 콜백되는 함수
alert(err.responseText);
}
});
반응형
'javaScript↗' 카테고리의 다른 글
| [오류해결]프로젝트 xar 파일로 import시, 오류날 때 (0) | 2024.06.24 |
|---|---|
| Ajax 실전 활용 게시판 예시 (비밀번호 체크) (0) | 2024.06.24 |
| [오류해결]JavaScript 함수 실행 먹통될 때 (0) | 2024.06.23 |
| [오류주의]javaScript의 치명적인 오류 (함수에 괄호 누락 ()) (0) | 2024.06.14 |
| jQuery (제이쿼리) (0) | 2024.06.12 |