1. Ajax(1010-Ajax-6) 2007. 10. scpark@dit.ac.kr

2. 5. POST 요청 • 비동기 요청을 보낼때, • send(null) 을 버리고 • 서버에 보다 많은 데이터를 보낼수 있는 방법을 배워봅시다. -> POST 방식으로 비동기 요청 보내기

3. 5. POST 요청 • 사례연구: Break Neck Pizza • 이전에 만든 Break Neck Pizza 응용에서는, • 고객이 전화번호를 입력하면, • 비동기 요청이 발생해서, • 서버로 부터 전화번호를 가진 고객의 주소를 주소입력란에 뿌려주고, • 동기요청에 의한 [피자주문] 버턴을 클릭하면 주문서 내역서를 보여주었다.

4. 5. POST 요청 • 사례연구: Break Neck Pizza • 이번 사례에서는, • 기존의 응용을 사용하되, • [피자주문]을 클릭하면, 새로운 자바스크립트 함수가 실행되어, 비동기 요청으로, • 주문한 피자내역대로 피자가 고객의 집까지 배달에 소요되는 시간만을 보여주게 한다.

5. 5. POST 요청

6. 사례연구: Break Neck Pizza 구현단계(1) 1. HTML 업데이트 먼저, “Order Pizza”를 클릭할때 폼을 전송하지 않도록 HTML을 수정해야 한다. <html><head><title>Break Neck Pizza Delivery</title> <link rel="stylesheet" type="text/css" href="breakneck.css" media="screen" /> <script type="text/javascript" src="ajax.js"> </script> <script type="text/javascript" src="pizza.js"> </script> <script type="text/javascript" src="validation-utils.js"> </script></head> <body onLoad="document.forms[0].reset();"> <div id="main-page"> <p><img src="breakneck-logo_new.gif" alt="Break Neck Pizza" /></p> <form id="order-form"> <p>Enter your phone number: <input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" /></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><textarea name="address" id="address" rows="4" cols="50"></textarea></p> <p><input type="button" value="Order Pizza" onClick="submitOrder();" /></p> </form> <p class="tagline">** No more waiting! Now faster than ever! **</p> </div> </body></html>

7. 사례연구: Break Neck Pizza 구현단계(2) 2. 서버에 주문 보내기 submitOrder() 함수 만들기, 이 함수는 고객의 전화번호, 피자주문 양식의 내용을 받아서 서버에 있는 placeOrder.jsp로 보냄, 그리고 콜백함수인 showConfirmation()을 생성한다. function submitOrder() { var phone = document.getElementById("phone").value; var address = document.getElementById("address").value; var order = document.getElementById("order").value; var url = "placeOrder.jsp"; request.open("POST", url, true); request.onreadystatechange = showConfirmation; request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send("phone=" + escape(phone) + "&address=" + escape(address) + "&order=" + escape(order)); }

8. 사례연구: Break Neck Pizza 구현단계(3) 3. placeOrder.jsp 업데이트 여전히 주문은 받지만, HTML은 돌려주지 않으며 대신 피자가 고객의 집에 도착하는데 얼마나 걸릴지 예상시간을 돌려줍니다. function submitOrder() { var phone = document.getElementById("phone").value; var address = document.getElementById("address").value; var order = document.getElementById("order").value; var url = "placeOrder.jsp"; request.open("POST", url, true); request.onreadystatechange = showConfirmation; request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send("phone=" + escape(phone) + "&address=" + escape(address) + "&order=" + escape(order)); }