반응형
Ajax
- 비동기 통신(Asynchronous JavaScript and XML)
- 동기 통신 : 통신을 요청한 쪽에서 응답이 올 때까지 블락킹 (URL이 직접 나오면서 변경)
- 비동기 통신 : 통싱을 요청한 쪽에서 응답이 올 때까지 블락킹 X
- : js 가 핵심 + WEB API - XMLHttpRequest, fetch,axios, jQuery 등
- 동작 원리
- 사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러온다. 그 후 자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보내는데, 그 동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다. (비동기)
- 서버측에서 처리를 마치고 XmlHttpRequest 객체를 전달 받으면 이를 토대로 Ajax요청을 처리하게 되는 것이다. 클라이언트가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 client pooling 방식이라고 하는데 Ajax가 이 방식을 사용한다. 반면, 푸시 알림같은 server push방식의 서비스를 만들 수는 없다.
XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', './time.html');
xhr.onreadtstatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.querySelector('#time').innerHTML = xhr.responseText;
}
}
xhr.send();- Ajax방식으로 서버와 브라우저가 데이터를 주고받을 때 사용하는 API이다. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버와 통신하고 데이터를 교환한다.
JavaScript Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Break Neck Pizza Delivery</title>
<link rel="stylesheet" type="text/css" href="breakneck.css" media="screen" />
<!-- <script /> 이런식으로는 불가능 -->
<script src="./ajax-xhr.js"></script>
<script type="text/javascript">
let req;
// function getCustomerInfo() {
// let phone = this.value;
// req = createRequest();
// req.onreadystatechange = updatePage2;
// req.open("get", `http://118.36.53.65:8080/myapp/customer.do?phone=${phone}&type=xml`);
// req.send();
// console.log("send request...");
// }
function getCustomerInfo() {
let phone = this.value;
req = createRequest();
req.onreadystatechange = updatePage;
req.open("post", `http://118.36.53.65:8080/myapp/customer.do`);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(`phone=${phone}`);
console.log("send request...");
}
function updatePage(customer) {
if(req.readyState != XMLHttpRequest.DONE) return;
if(req.status == 200) {
console.log("updatePage");
let customer = JSON.parse(req.responseText);
document.getElementById("name").value = customer.name;
document.getElementById("address").value = customer.address;
} else if (req.status == 404) {
console.log("고객정보가 없습니다.");
} else {
console.log("데이터 조회에 실패했습니다.");
}
}
function updatePage2(xmlDoc) {
if(req.readyState != XMLHttpRequest.DONE) return;
if(req.status == 200) {
console.log("updatePage");
let xmlDoc = req.responseXML;
document.getElementById("name").value =
xmlDoc.getElementsByTagName("name")[0].firstChild.nodeValue;
document.getElementById("address").value =
xmlDoc.getElementsByTagName("address")[0].textContent;
} else if (req.status == 404) {
console.log("고객정보가 없습니다.");
} else {
console.log("데이터 조회에 실패했습니다.");
}
}
window.onload = function() {
document.getElementById("phone").onchange = getCustomerInfo;
}
</script>
</head>
<body>
<p><img src="breakneck-logo.gif" alt="Break Neck Pizza" /></p>
<form method="POST" action="placeOrder.jsp">
<p>
Enter your phone number:
<input type="text" size="14" name="phone" id="phone" />
</p>
<p>Type your order in here:</p>
<p><textarea name="order" id="order" rows="6" cols="50"></textarea></p>
<p>Your order will be delivered to:</p>
<p>Name : <input type="text" size="14" name="name" id="name" /></p>
<p>Address : <textarea name="address" id="address" rows="4" cols="50"></textarea></p>
<p><input type="submit" id="submit" value="Order Pizza" /></p>
</form>
</body>
</html>
jQuery Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Break Neck Pizza Delivery</title>
<link rel="stylesheet" type="text/css" href="breakneck.css" media="screen" />
<!-- <script /> 이런식으로는 불가능 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
let req;
function getCustomerInfo() {
$.ajax({
url : `http://118.36.53.65:8080/myapp/customer.do`,
method : "post",
data : {
phone : $(this).val(),
type : "xml",
},
success : updatePage2,
statusCode : {
404 : function() {
console.log("고객정보가 없습니다.");
}
},
error:function() {
console.log("데이터 조회에 실패했습니다.");
},
dataType : "xml" // 응답 데이터 형식, 생략 가능
});
console.log("send request...");
}
function updatePage(customer) {
console.log("updatePage");
document.getElementById("name").value = customer.name;
document.getElementById("address").value = customer.address;
}
function updatePage2(xmlDoc) {
console.log("updatePage");
$("#name").val($("name", xmlDoc).text());
$("#address").val($(xmlDoc).find("address").text());
}
$(function() {
$("#phone").change(getCustomerInfo);
});
</script>
</head>
<body style="background-color: pink;">
<p><img src="breakneck-logo.gif" alt="Break Neck Pizza" /></p>
<form method="POST" action="placeOrder.jsp">
<p>
Enter your phone number:
<input type="text" size="14" name="phone" id="phone" />
</p>
<p>Type your order in here:</p>
<p><textarea name="order" id="order" rows="6" cols="50"></textarea></p>
<p>Your order will be delivered to:</p>
<p>Name : <input type="text" size="14" name="name" id="name" /></p>
<p>Address : <textarea name="address" id="address" rows="4" cols="50"></textarea></p>
<p><input type="submit" id="submit" value="Order Pizza" /></p>
</form>
</body>
</html>반응형
