고정 헤더 영역
상세 컨텐츠
본문
Ajax (Asynchronous JavaScript and XML)
비동기식 자바스크립트와 XML
동기식 정확성이 뛰어남
비동기식 상대방이 준비가 되던 안되던 데이터를 보내는 기법,
속도나 여러가지 측면에서 뛰어남 보통 비동기식을 활용
자바 스크립트를 이용한 백그라운드 통신기술로 하나의 웹 페이지 안에서 변경 사항이 발생했을 때,
해당 부분만 갱신이 가능하게 해주는 기법을 말한다.
Ajax을 이용한 코딩을 model2라고 부른다.
model1 - 서블릿 없이 jsp만 가지고 프로젝트를 만드는 것
- 하나의 영역(파일)에서 화면구현 입출력을 모두 처리하는 형태로 만든다.
model2 - 구현 로직과 처리 로직을 부리해서 작업하는 형태
- jsp에서는 화면 구현 및 요청 작업을 하고, 서블릿에서 처리(비즈니스) 로직을 작업하는 형태로 분리
XML은 EXtensible Markup Language의 약자
HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.
HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다.
XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있습니다.
1. XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어입니다.
2. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해줍니다.
3. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다.
4. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 합니다.
5. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다.
JSON_Test project 생성
Web_Content > new > folder
js folder 생성
C:\Jwork\JSON_Test\WebContent\js
위 경로에
httpRequest.js 파일 옮기기
Ajax 구조
- Ajax 구조
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);
// Xml Data 수신 시
var data = xhr.responseXML;
}
}
JSON(Javascript Object Notation) 표기법
JSON을 통해서 서로 다른 플랫폼에서도 공통 데이터 타입을 제공해 줄 수 있다.
::JSON(Javascript Object Notation)표기법
- 서로 다른 프로그램에서 데이터를 교환하기 위한 표기법
- 읽기/쓰기가 쉽다(배열형식)
1) 이름/값 형식으로 하나의 쌍으로 인식된다(Map 구조).
2) JSON -> {이름:값,이름:값,.....};
ex) var cnt = {c1:First,c2:Second,c3:Third}
var c1_value = cnt.c1; ( First가 들어감 )
var c2_value = cnt.c2; //Second
var c3_value = cnt['c3']; //Third값
단순 배열표현
배열 -> [값1,값2,값3];
-->
<script type="text/javascript">
var mem={lee:"이씨",park:"박씨",kim:"김씨"};
document.write(mem.park+"<br>");
document.write(mem['kim']+"<br>");
var mem1 =["일지매","이지매","삼지매"];
document.write(mem1[2]+"<br>");
var mem2 = [
{kim:"김씨",nam:"남씨"},
{lee:"이씨",choi:"최씨"},
{yang:"양씨",park:"박씨"},
];
document.write(mem2[1].choi+"<br>");
var mem3 = {
c1:["김씨","남씨"],
c2:["이씨","최씨"],
c3:["양씨","박씨"]
};
document.write(mem3.c1[1]+"<br>");
</script>
JSON 프로젝트 파일에 json_test1.html 파일 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var p = {
'name' : '인길동',
'age' : '30',
'tel' : '010-1111-2222'
};
document.write("이름 : " + p.name + "<br>");
document.write("나이 : " + p.age + "<br>");
var sido = ['서울','경기','인천'];
document.write(sido[0] + "<br>");
// 배열 idex는 0부터 시작
var p_array = [ {
'name' : '일길동',
'age' : '30'
}, {
'name' : '이길동',
'age' : '20'
}, {
'name' : '삼길동',
'age' : '50'
}];
for(var i=0; i<p_array.length; i++) {
document.write(p_array[i].name + "," + p_array[i].age + "<br>");
}
document.write("<br>");
var course = {
'name' : '개발자 과정',
'start' : '2016-01-01',
'end' : '2016-05-05',
'sub' : ['java','android','jsp'],
'student' : [{
'name' : '홍길동',
'age' : '30'
}, {
'name' : '독고길동',
'age' : '20'
}, {
'name' : '이길동',
'age' : '27'
}]
};
document.write("과목명 : " + course.name + "<br>");
document.write("시작날짜 : " + course.start + "<br>");
document.write("끝날짜 : " + course.end + "<br>");
document.write("과목명 : ");
for(var i=0; i<course.sub.length; i++) {
document.write(course.sub[i] + " / ");
}
document.write("<br><br>학생명 : <br>");
for(var i=0; i<course.student.length; i++) {
document.write(course.student[i].name + " / " + course.student[i].age + "<br>");
}
</script>
</head>
<body>
</body>
</html>
httpRequest.js
var xhr = null;
function createRequest(){
//JavaScript를 이용하여 서버로 정보를 보내는 HTTP request를 만들기 위해서는 이런 기능을 제공하는 클래스 인스턴스가 필요하다.
//이런 클래스는 InternetExplorer에서는 XMLHTTP라고 불리는 ActivX object를 말한다.
//그러면 Mozzlia, Safari나 다른 브라우저에서도 Microsoft의 ActiveX 객체의 method와 property를 지원하기 위해 XMLHttpRequest클래스를 구현 하고 있다.
if(xhr!=null)return;
if(window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
xhr = new XMLHttpRequest();
}
function sendRequest(url, param, callBack, method){
createRequest();//HTTP request생성
//전송타입 구분
var httpMethod =
(method!='POST' && method!='post')?'GET':'POST';
//파라미터 구분
var httpParam =
(param==null || param == '')?null:param;
//접근 url
var httpURL = url;
//요청 방식이 get방식이고, 전달할 파라미터 값이 있다면
//url경로를 제작 해야 한다.(.../test.jsp?ch=123)
if(httpMethod == 'GET' && httpParam != null)
httpURL = httpURL+"?"+httpParam;
//xhr.open( 요청방식, 접근url, 비동기(true면 비동기) );
xhr.open(httpMethod, httpURL, true);
//만약 "POST" type을 보내려 한다면, 요청(request)에 MINE type을 설정 해야 한다. 예를 들자면 send()를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 한다.
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//작업이 완료된 후 호출될 콜백메서드 지정
xhr.onreadystatechange = callBack;
xhr.send(httpMethod == 'POST'?httpParam:null);
}
Ajax과 JSON 포맷 활용
JSON (Javascript Object Notation) 표기법
- 서로 다른 프로그램에서 데이터를 교환하기 위한 표기법, 읽기/쓰기가 쉽다(배열형식)
JSON을 통해서 서로 다른 플랫폼에서도 공통 데이터 타입을 제공해 줄 수 있다.
gugudan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">
function send() {
var dan = document.getElementById("dan").value;
if (dan<2 || dan > 9) {
alert('2~9 사이 값을 입력');
document.getElementById("dan").focus();
return;
}
// Ajax로 요청 하기 위한 설정 및 요청
var url = "gugudan_ajax.jsp";
var param = "dan=" + dan;
sendRequest(url, param, resultFn, "GET");
}
/* Ajax로 요청한 결과를 처리하는 함수 */
function resultFn() {
// console.log( xhr.readyState+" / "+ xhr.status );
// xhr.readyState
// 0 (uninitialized) - 초기화 오류
// 1 (loading) - ??
// 2 (loaded) - ??
// 3 (interactive) - ??
// 4 (complete) - 로드완료
// xhr.status
// 200 : 이상 없음
// 404(경로 없음), 500(서버 에러) 등... : 이상 있음
if (xhr.readyState == 4 && xhr.status == 200) {
// 도착된 데이터를 읽어오기
var data = xhr.responseText;
// alert(data);
// 서버로부터 수신된 데이터(html)=>div에 넣는다 document.getElementById("disp").innerHTML = data;
document.getElementById("disp").innerHTML = data;
}
}
</script>
</head>
<body>
단: <input id="dan">
<input type="button" value="결과보기" onclick="send();">
<hr>
<div id="disp"></div>
</body>
</html>
gugudan_ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
request.setCharacterEncoding("utf-8");
// gugudan.jsp?dan=6
int dan = Integer.parseInt(request.getParameter("dan"));
StringBuffer sb = new StringBuffer();
for (int i=1;i<=9;i++) {
sb.append(String.format("%d x %d = %d<br>", dan,i,dan*i));
}
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= sb.toString() %>
<!-- Ajax은 스크립트 릿을 통해서 sb에 저장해둔 문장을 화면에 뿌리는데 이 값을 텍스트화 해서
요청한 곳( -->
</body>
</html>'FrontEnd > JSP (JavaServerPage)' 카테고리의 다른 글
| JSP 파일 업로드 (0) | 2022.08.25 |
|---|---|
| JSP ( JSON 형식 동영상 플레이 리스트 ) (0) | 2022.08.25 |
| JSP JSTL(JSP Standard Tag Library) (0) | 2022.08.25 |
| JSP EL(Expression Language) (0) | 2022.08.25 |
| JSP ( 회원관리 DB 만들기 ) (0) | 2022.08.25 |
