Hi Hi

'jQuery Mobile AJAX통신'에 해당되는 글 1건

  1. jQuery Mobile - AJAX 통신

jQuery Mobile - AJAX 통신

 

jQuery Mobile 웹앱 홈 페이지는 서버에서 풀브라으징해서 새로고침 형태로 실행된다. 이후부터는 다른 페이지에 대한 요청은 모두 AJAX 통신으로 처리 된다. 링크 , 폼 처리 등 서버와 통신이 필요한 모든 동작에 jQuery Mobile 이 관여해서 모두 AJAX 통신으로 변경된다.

AJAX를 위한 그 어떤 코드도 순수 작성할 필요가 없다. 서버 통신이 필요한 요청으로는 대표적으로 GET과 POST 방식이 있다.

GET 방식은 HTTP 시작행에 데이터를 전송하는 방식이다. <a> 태그 및 <form method="GET"> 태그로 서버와 통신할 경우 모두 GET 방식이다.

POST 방식 요청은 HTTP 바디행에 데이터를 전송하는 방식이다. <form method="POST"> 태그로 서버와 통신할 경우 POST 방식이다.

GET 방식은 문자열만 전송할 수 있지만 POST 방식은 문자열 이외에 이미지, 파일 등 바이너리 데이터도 전송할 수 있다.

요청을 받은 서버측 파일(JSP, PHP, ASP, ASPX)은 웹앱에서 디스플레이할 수 있는 페이지를 응답으로 만들어야 한다. 웹앱 시작 HTML 파일에서 작성하는 <html> <head> <body> 태그는 작성할 필요가 없고 <div data-role="page"> 태그만 작성하면 된다. 그 이유는 jQuery Mobile 은 단일 HTML 모델이기 때문이다.

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="euc-kr" />
 <mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
 <title> jQuery Mobile</title>
 
 <link rel="shortcut icon" href="./image/icon.png">
 <link rel="apple-touch-icon" href="./image/icon.png">
 
 <link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
 <script src="./framework/jquery-1.6.4.js"></script>
 <script src="./framework/jquery.mobile-1.0.js"></script>
 
</head>
<body>
 <div id="home" data-role="page">
  <div data-role="header">
   <h1>HOME</h1>
  </div>
  <div data-role="content">
   <a href="ponelist.jsp" data-role="button"> 폰 목록</a>
  </div>
 </div>
</body>
</html>

phonelist.jsp

<%@ page contentType="text/html; charset=euc-kr" %>
<%@ page import="java.util.*" %>

<% List<String[]> phoneDb = (List<string[]>) session.getAttribute.("phoneDb");
if(phoneDb ==null){
 phoneDb = new ArrayList<String[]>();
 phoneDb.add(new String[]{
  "p1", "갤럭시1", "phone01.png", "삼성"
 });
 phoneDb.add(new String[]{
  "p2", "갤럭시2", "phone02.png", "삼성"
 });
 phoneDb.add(new String[]{
  "p3", "갤럭시3", "phone03.png", "삼성"
 });
 phoneDb.add(new String[]{
  "p4", "갤럭시4", "phone04.png", "삼성"
 });
 session.setAttribute("phoneDb", phoneDb);
}
%>

<div id="phonelist" data-role="page">
 <div data-role="header">
  <h1> 폰 목록 </h1>
 </div>
 <div data-role="content">
  <ul data-role="listview">
   <%for(String[] phone: phoneDb) {%>
    <li>
     <a href="pohoedatail.jsp?pno<%=phone[0]%>">
      <table>
       <tr>
        <td style="padding-right: 5px">
         <img src="./image/<%=phone[2]%>" style="width:30px; :height:50px"/>
        </td>
        <td style="padding-left:5px"><%=phone[1]%></td>
       </tr>
      </table>
     </a>
    </li>
   <%}%>
  </ul>
 </div>
 
 <div data-role="footer" data-position="fixed">
  <div data-role="navbar">
   <ul>
    <li><a href="%home" data-icon="home" data-transition="slide" data-direction="reverse"> 앱홈</a></li>
   </ul>
  </div>
 </div>

phonedetail.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<%@ page import="java.util.*" %>

<%
String pno = request.getParameter("pno");
List<String[]> phoneDb = (List<String[]>) session.getAttribute("phoneDb");
String[] phone = null;
for(String[] p : phoneDb) {
 if(p[0].equals(pno)) {
  phone = p;
  break;
 }
}
%>

<div id="phonedetail" data-role="page">
 <div data-role="header">
  <h1>폰 상세 내용</h1>
 </div> 
 <div data-role="content">
  <ul data-role="listview">
   <li>
    <table>
     <tr>
      <td style="padding-right: 5px">
       <img src="./image/<%=phone[2]%>"/>
      </td>
      <td style="padding-left: 5px">
       <table>
        <tr style="padding: 5px">
         <td style="padding: 5px">모델명:</td>
         <td><%=phone[1]%></td>
        </tr>
        <tr style="padding: 5px">
         <td style="padding: 5px">제조사:</td>
         <td><%=phone[3]%></td>
        </tr>
        <tr style="padding: 5px">
         <td style="padding: 5px">상품가:</td>
         <td><%=phone[4]%></td>
        </tr>
        <tr style="padding: 5px">
         <td style="padding: 5px">색상:</td>
         <td><%=phone[5]%></td>
        </tr>
       </table>
      </td>
     </tr>
    </table>
   </li>
  </ul>
    </div>
   
 <div data-role="footer" data-position="fixed">
     <div data-role="navbar">
      <ul>
    <li><a href="#home" data-icon="home"
      data-transition="slide" data-direction="reverse">앱홈</a></li>
    <li><a href="phonelist.jsp" data-icon="grid"
      data-transition="slide" data-direction="reverse">목록</a></li>
   </ul>
  </div>
    </div>
</div>