Ajax
Ajax (Asynchronous Javascript And XML : 비동기 방식의 자바스크립트 와 XML) 는 자체가 하나의 특정한 기술을 말하는 것이 아니며 대화식 웹 애플리케이션의 제작을 위해 함께 사용하는 기술(XML, DHTML, CSS, XSL/T, JSON)의 묶음을 지칭하는 용어이다
특징
장점
• 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 량을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
단점
• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• Http클라이언트의 기능이 한정되어 있다.
• 페이지 이동 없는 통신으로 인한 보안상의 문제
• 지원하는 character set이 한정되어 있다.
• 스크립트로 작성되므로 Debugging이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
pizza.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<style type="text/css">
/* body,h2{
font-family:돋움,돋움체,verdana;
color:navy;
} */
</style>
<script type="text/javascript">
var req=false;
function init(){
try{
req=new XMLHttpRequest();//Ajax요청을 보내기 위해서 반드시 필요한 자바스크립트 객체
}catch(e){
//XMLHttpRequest객체를 지원하지 않는 브라우저인 경우
try{
req=new ActiveXObject("Msxml2.XMLHTTP");//IE인 경우
}catch(e2){
req=false;
}
}
if(!req){
alert('Ajax요청 불가 - req객체 생성 실패');
}
}
function getUserInfo(){
//사용자가 입력한 연락처 값을 받자.
var phone = $("#phone").val();
//alert(phone);
//서버쪽에 연락처 정보를 가지고 요청을 보내자
req.open("GET","pizzaResult.jsp?phone="+phone,true);
//open(method방식, 서버페이지, 비동기여부)
req.onreadystatechange=updatePage;
//준비상태가 변화될 때마다 updatePage함수를 호출함
/*요청을 send하기 전에 반드시 위 속성에 콜백함수를 지정해야 한다.*/
req.send(null);//요청을 전송
//get방식의 요철일 경우는 null을 넣어주고
//post방식의 요청일 경우는 파라미터 데이터를 매개변수로 전달한다.
}//getUserInfo()
function updatePage(){
//alert("req.readyState= "+req.readyState+", req.status="+req.status);
if(req.readyState==4&&req.status==200){
//성공적인 응답이 왔다면
//서버로부터 받은 응답 데이터를 추출
var res=req.responseText;
//텍스트 형태의 데이터일 경우 => responseText로 응답 데이터를 추출
//XML형태의 데이터일 경우 => responseXML로 응답데이터를 추출
//alert(res);
var data=res.split("|");
//구분자('|')를 기준으로 쪼개어 배열에 할당
var midx=data[0];//string
var mname=data[1];
var maddr=data[2];
if(parseInt(midx)!=0){
var str="<ul class='list-group text-left'>";
str+="<li class='list-group-item'>회원번호: "+midx+"</li>";
str+="<li class='list-group-item'>회원이름: "+mname+"</li>";
str+="<li class='list-group-item'>회원주소: "+maddr+"</li>";
str+="</ul>"
$('#userInfo').html(str);
$('#userInfo').fadeIn(10);
$('#nonUser').fadeOut(10);
}else{
$('#userInfo').html(str);
$('#userInfo').fadeOut(10);
$('#nonUser').fadeIn(10);
$('#addr').focus();
}
}
}
window.onload=init;
</script>
</head>
<body>
<div class="section">
<div class="container">
<h1>Pizza Order Page</h1>
<form role="form" class="form-horizontal"
name="orderF" id="orderF"
action="order.jsp" method="POST">
<div class="form-group">
<p class="text-info">
<b>귀하의 전화번호를 입력하세요:</b>
<input type="text" size="20"
name="phone" id="phone"
onchange="getUserInfo()"
class="form-control"/>
</p>
<p class="text-danger">
<b>
귀하가 주문하신 피자는 아래 주소로 배달됩니다.
</b>
</p>
<div id="userInfo"></div>
<div id="address"></div>
<!-- 비회원 입력 폼 : 비회원일 경우 주소입력 폼을 보여주자.-->
<div id="nonUser" style="display:none;">
주소: <input type="text" name="addr" id="addr"
size="60" style="border:2px solid maroon;" class="form-control"/>
</div>
<!-- ------------------------------------------- -->
<p class="text-info">
<b>주문 내역을 아래에 기입하세요</b></p>
<p>
<textarea name="orderList"
id="orderList" rows="6" cols="50" class="form-control"></textarea>
</p>
<p>
<input type="submit" value="Order Pizza" class="btn btn-primary"/>
</p>
</div>
</form>
</div>
</div>
<jsp:include page="/foot.jsp"/>
</body>
</html>
pizzaResult.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*, jdbc.util.*"%>
<%
//1.사용자 연락처 받기
String phone=request.getParameter("phone");
System.out.println(phone);
Connection con =DBUtil.getCon();
String sql = "select * from pizza_user where phone=?";
PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, phone);
ResultSet rs = ps.executeQuery();
String idx="0", name="", addr="";
while(rs.next()){
idx = rs.getInt("idx")+"";
name=rs.getString("name");
addr=rs.getString("addr");
}
rs.close();ps.close();con.close();
%>
<%=idx %>|<%=name %>|<%=addr %>
요청전송
httpRequest.open ( "POST", "/test.jsp", true );
• 첫 번째 인자 : HTTP 메서드를 지정
• 두 번째 인자 : 접속할 URL.
• 세 번째 인자 : 동기/비동기 방식을 지정.
• httpRequest.send( "id=neptune&pw=111“ );
• POST 방식일 경우 전송할 문자열을 지정.
• GET 방식일 경우 URL뒤에 파라미터를 붙임("/test.jsp?id=neptune&pw=111") 응답처리
onreadystatechange에 콜백 함수를 지정함.
• onreadystatechange에서 명시한 콜백 함수는 readyState property값이 변경될 때 마다 호출됨
< readyState property의 상수값의 의미 >
값 의미 설명
0 UNINITIALIZED 객체만 생성되고 초기화되지 않은 상태 (open메서드가 호출되지 않음)
1 LOADING open메서드가 호출되고 아직 send메서드가 불리지 않은 상태
2 LOADED send메서드가 불렸지만 status와 헤더는 도착하지 않은 상태
3 INTERACTIVE 데이터 수신중 상태
4 COMPLETED 데이터 수신이 완료된 상태
< staus property의 상수값의 의미 >
값 의미 설명
200 OK 요청성공
403 Forbidden 접근거부
404 Not Found 페이지 없음
500 Internal Server Error 서버 오류 발생
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 71일차 - JSP Filter, 게시글 수정, ajax 삭제, 수정 요청 (0) | 2020.07.23 |
|---|---|
| 국비지원 70일차 - MVC 모델2 게시글 작성, 삭제 Ajax XML, 통신, 도서 검색 (0) | 2020.07.22 |
| 국비지원 68일차 - JSP 제약조건, MVC구조 모델2, jQuery size, plugin (0) | 2020.07.20 |
| 국비지원 67일차 - JSP 파일업로드, 파일다운로드, war배포, el표현식 jQuery pageXY, clientXY, dragdrop (0) | 2020.07.17 |
| 국비지원 66일차 - JSP cookie, 아이디 저장, 파일업로드 jQuery trigger, mouseover 특징, 위치값 (0) | 2020.07.16 |