AJAX란?
대화식 Web Application 제작을 위한 개발 기법
- HTML, CSS : 표현 정보
- JavaScript : 동적화면 출력및 표시, 정보 교환
- XML, JSON : 서버와 비동기적 데이터 교환
AJAX 프로그래밍 순서
XML HttpRequest를 사용한 AJAX 프로그램 과정
* 이론은 알겠는데 딱 거기까진 것 같다. 왜냐면 실습코드가 아직 낯설다. 추가적인 공부를 해야한다.
실습
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
var httpRequest = null;
function sendRequest(url, params, callback, method) {
httpRequest = getXMLHttpRequest();
var httpMethod = method ? method : 'GET';
if (httpMethod != 'GET' && httpMethod != 'POST') {
httpMethod = 'GET';
}
var httpParams = (params == null || params == '') ? null : params;
var httpUrl = url;
if (httpMethod == 'GET' && httpParams != null) {
//http:\\www.naver.com?name=홍길동
httpUrl = httpUrl + "?" + httpParams;
}
httpRequest.open(httpMethod, httpUrl, true);
httpRequest.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
httpRequest.onreadystatechange = callback;
httpRequest.send(httpMethod == 'POST' ? httpParams : null);
}<httpRequest.js>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"src="httpRequest.js"></script>
<script type="text/javascript">
function hello() {
//http:\\www.naver.com?name=홍길동
var params = "name=" + encodeURIComponent(document.fmt.name.value);
sendRequest("hello.jsp", params, helloRequest, "GET");
}
//서버로부터 데이터값이 도착할때 호출되는 함수
function helloRequest() {
//text,json,xml => HTML 변환 => 화면 출력
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
alert("서버 응답:"+ httpRequest.responseText);
}
}
}
</script>
</head>
<body>
<form name="fmt">
<input type="text"name="name"/>
<input type="button"value="전송"onclick="hello()">
</form>
</body>
</html><helloApp.html>
<%@ page language="java" contentType="text/plain; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
request.setCharacterEncoding("utf-8");
//"name=" + encodeURIComponent(document.fmt.name.value);
String name = request.getParameter("name");
%>
안녕하세요. <%= name %> 회원님!!!<hello.jsp>
지하철 요금 계산기
지하철 2호선을 기준으로 한쪽 방향으로만 진행한다는 가정하에 출발역과 도착역을
선택하면 지하철 요금을 계산하는 프로그램을 작성한다.
기본요금 - 10Km 이내
- 성인 일반 - 1,250원
- 청소년 - 720원
- 어린이 - 450원
추가요금
- 10~15Km 이내 : 5Km마다 100원 추가
- 50Km 초과 : 8Km마다 100원 추가
지하철 요금 계산기 프로세스
1. 출발역 도착역을 선택한다.
2. 요금 계산 버튼을 클릭하면, 출발역과 도착역 사이에 몇 개의 역이 있는지 계산한다.
3. 이동한 총 거리를 구한다. (총역수 * 역간 거리)
4. 이동 총 거리가 10Km이내면 기본요금을 화면에 출력한다.
5. 이동한 총 거리가 10 ~ 50Km면, 10Km까지는 기본요금, 10Km 초과는 5Km마다 100원씩
더해서 총 요금을 구하고 화면에 출력한다.
6. 이동한 총 거리가 50Km를 초과하면, 10km까지는 기본요금, 10Km~50Km까지는 5Km마다
100원씩 더하고, 50Km 초과에 대해서는 8Km마다 100원씩 더해 총요금을 화면에 출력한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="sub.js"></script>
<meta charset="UTF-8">
</head>
<body>
<label>출발역</label>
<select id="start"></select>
<label>도착역</label>
<select id="end"></select>
<label
><input type="radio" name="group" value="ADULT" checked /> 성인일반</label
>
<label><input type="radio" name="group" value="YOUNG" /> 청소년</label>
<label><input type="radio" name="group" value="CHILD" /> 어린이</label>
<div>
<button onclick="calculate();">요금계산</button>
</div>
<div
id="output"
style="
width: 100%;
height: 150px;
overflow-y: auto;
border: 2px solid #222;
"
></div>
</body>
</html>
<subway.html>
const subwayList = [
"영등포구청역",
"당산역",
"합정역",
"홍대입구역",
"신촌역",
"이대역",
"아현역",
"충정로역",
"시청역",
"을지로3가역",
"을지로4가역",
"동대문역사문화공원역",
"신당역",
"상왕십리역",
"왕십리역",
"한양대역",
"뚝섬역",
"성수역",
"건대입구역",
"구의역",
"강변역",
"잠실나루역",
"잠실역",
"종합운동장역",
"삼성역",
"선릉역",
"역삼역",
"강남역",
"서초역",
"방배역",
"사당역",
"낙성대역",
"서울대입구역",
"봉천역",
"신림역",
"신대방역",
"구로디지털단지역",
"대림역",
"신도림역",
"문래역",
];
const intervalDistance = 3170; //역간 거리(고정)
/**
* 지하철 목록을 출발역과 도착역 select 태그에 추가합니다.
*/
function loadSubways() {
var h = [];
for (var idx in subwayList) {
h.push(`<option value="${idx}">${subwayList[idx]}</option>`);
}
document.getElementById("start").innerHTML = h.join("");
document.getElementById("end").innerHTML = h.join("");
}
window.addEventListener("load", function () {
loadSubways();
});
function calculate() {
var x = document.getElementById("start").value;
var y = document.getElementById("end").value;
var age_fee;
var radio = document.getElementsByName("group");
for (var i = 0; i < 3; i++) {
console.log(radio[i].value);
if (radio[i].checked) {
switch (radio[i].value) {
case "ADULT":
age_fee = 1250;
break;
case "YOUNG":
age_fee = 720;
break;
case "CHILD":
age_fee = 450;
break;
}
}
}
console.log(age_fee);
var fee = age_fee;
var dis = Math.abs(x - y)
var distance = dis * intervalDistance;
if (10000 < distance && distance <= 50000){
fee += Math.ceil((distance - 10000) / 5000) * 100;
}
if (distance > 50000){
fee += Math.ceil((distance - 10000) / 5000) * 100 +
Math.ceil((distance - 40000) / 8000) * 100;
}
output.innerText = "출발역은 " + subwayList[x] +", 도착역은 " + subwayList[y] + "입니다.\n\n 총 "
+ dis + "개의 역을 승차했고, 총 거리는 " + distance + "m입니다.\n\n"
+ "총 요금은 \\" + fee + "원입니다.";
}<sub.js>
'kosta > HTML,CSS,JavaScript,JQuery' 카테고리의 다른 글
| [JQuery] 이벤트 실습 (0) | 2022.04.04 |
|---|---|
| [JQueery] 기초 (0) | 2022.04.01 |
| [JavaScript] 웹 브라우저 (0) | 2022.03.28 |
| [JavaScript] 기초 (0) | 2022.03.26 |
| [html, css] 실습 (0) | 2022.03.23 |
댓글