반응형

Ajax를 jQuery를 이용해서 실행하게 되면 소스 코드가 많이 단축되며 기존의 경우 ajax 실행시

 

실행함수 & 응답함수 두가지를 만들어야 했으나 1개의 함수만으로 두가지를 전부 실행 헐 수 있다.

 

======================================== jQyuery Ajax Sample Get =============================================

function doDelete(id){
$.ajax({
type: "GET",
url: "./tset.jsp", //보낼 페이지
data: "id="+id, //변수가 여러개면 "id=ddd&name=프라임&age=22" 처럼 작성
dataType:"JSON",
success: function(result) {
alert("반영되었습니다."); //성공시 실행부분
},
error: function(result) {

alert("에러가 발생하였습니다."); //실패시 실행부분
}
});
}

 

======================================= jQyuery Ajax Sample Post ============================================

function doSave(){

$.ajax({
type: 'POST',
url: ($("#tran_status").val()=="U") ? "insert.jsp":"update.jsp", //특정 객체의 값에 따라 이동 페이지 결정

data: {
id:$("#id").val(), //원하는 객체의 값을 명칭을 매칭시킨다. 즉 name:value 식으로 전달 getParameter로 받을수 있다
name:$("#name").val(),
age:$("#age").val(),

point:($("#point").val()=="null") ? "0":$("#point").val() //조건에 따른 값 세팅도 가능
},
success: function(result) {
alert("반영되었습니다."); //성공시 실행부분
},
error: function(result) {

alert("에러가 발생하였습니다."); //실패시 실행부분
}
});

}

 

반응형

'Programming > jQuery' 카테고리의 다른 글

jQuery Mobile을 이용한 List 더보기 구현  (0) 2015.12.11
jQuery 스크롤 페이징  (0) 2015.12.11



Posted by 궁극의 java개발자
,





반응형

ListView Main JSP(historyview.jsp)
<%
 String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
 String userID = UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
 String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
 NotiHistoryService service = new NotiHistoryService();
 List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, 1, 15);
%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
 rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
 

<script>
       var nCount=1;
       var $listView;
       $(function()
       {         
           $("#btn_more").click(onAdd);
           $listView = $("#listView");
 
       });
     
       function onAdd(){
        nCount++;
        $.ajax({
         type: 'get',
         async: true,
         url: './morehistory.jsp?appcode=<%=appCode%>&userid=<%=userID%>&deviceid=<%=deviceID%>&page='+nCount+'&rowsize=15',
         success: function(data) {
          var response = data.trim();
          if(response == "") {
           alert('리스트가 더 없습니다.');
          } else {
              $(response).appendTo($listView);
              $("#listView").listview("refresh");           
          }
         },
         error: function(data, status, err) {
                   alert('서버와의 통신이 실패했습니다.');
            }
        });
         
       }
   </script>
 
</head>
 
<body>
 
 <div data-role="page" id="history">
  <div data-role="content">
   <ul data-role="listview"  id="listView">
    <%
     if (history != null && history.size() > 0) {
      for(NotiHistory h: history) {
    %>
    <li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
     <%=h.getMsgHeader()%><br>
     <%=h.getMsgBody()%><br>
     </a>
    </li>
    <%
      }
     } else {
    %>
     <li>전송된 알람이 아직 없습니다.</li>
    <%
     }
    %>
   </ul>
   <%
    if (history != null && history.size() > 0) {
   %>
   <br>
    <input type="button" data-icon="plus" id="btn_more" value="15개 더보기"/>
   <%
    }
   %>
  
  </div>
 </div>
</body>
</html>
 
morehistory.jsp
<%@page import="java.io.UnsupportedEncodingException"%>
<%@page import="com.hs.mobile.push.service.vo.NotiHistory"%>
<%@page import="java.util.List"%>
<%@page import="com.hs.commons.utils.StringUtil"%>
<%@page import="com.hs.mobile.push.service.NotiHistoryService"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.hs.mobile.push.service.CommonQueryService"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
 pageEncoding="EUC-KR"%>
 
<%
 String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
 String userID = StringUtil.UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
 String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
 int nPage = StringUtil.sToi(request.getParameter("page"),1);
 int rowsize = StringUtil.sToi(request.getParameter("rowsize"),15);
 
 NotiHistoryService service = new NotiHistoryService();
 List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, nPage, rowsize);
%>
<%
 if (history != null && history.size() > 0) {
  for(NotiHistory h: history) {
%>
<li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
  <%=h.getMsgHeader()%><br>
  <%=h.getMsgBody()%><br>
  </a>
 </li>
<%
  }
 }
%>

 

반응형

'Programming > jQuery' 카테고리의 다른 글

jQuery ajax (GET, POST type, success, error 처리등)  (0) 2015.12.11
jQuery 스크롤 페이징  (0) 2015.12.11



Posted by 궁극의 java개발자
,





반응형
mixsh나 twtkr등에서 스크를 마지막에 가면 자동으로 다음 글들을 불러 오게 하는 자료입니다.
JQUERY로 짜여졌고 간단합니다.

엄청나게 간단하네요....;;;

링크에 실제 배포하는 사이트 남겨 두었습니다.

샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/


구조설명:

컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>

로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),


function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};

스크롤 감지하는 부분
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});

 

반응형



Posted by 궁극의 java개발자
,





반응형

이번에는 홈 디렉토리에 대한 이야기입니다. 초보분들에게는 상당히 중요한 이야기이니 주의깊게 읽어주시기 바랍니다.

3) 웹을 위한 장소 (홈 디렉토리, 가상 디렉토리)

ASP를 시작하면서 아무리 이야기해도 지나치지 않는 것은 바로 ASP라는 페이지만의 특이성이다. 다시 말하면, ASP 페이지는 그 페이지를 보기 위해서는 반드시 서버를 거쳐야 한다는 것이다.

일반적인 HTML 페이지는 사용자의 브라우저가 그 html 코드를 해석해서 보여주기 때문에 서버에서 해주어야 할 일이 없다. 단지 요청한 페이지만을 건네주기만 하면 되는 것이다. 이것은 html페이지만 있다면 어디서든지 브라우저로 그 페이지를 읽을 수가 있다는 이야기이기도 하다. 즉, html페이지를 다운받아서 자신의 로컬 하드에 카피해 놓고 언제라도 더블클릭하여 브라우저로 볼 수가 있다는 이야기이다.

그러나, ASP 페이지는 다르다.

이 페이지는 반드시 웹 서버를 거쳐서 어떤 서버의 처리를 거치고 난 다음에야 그 결과를 볼 수가 있다. 즉, html 페이지는 다운 받아서 아무때나 로컬에서 확인할 수가 있지만 ASP 페이지는 그런 식으로 확인할 수는 없다는 것이다.

왜? 그 이유는(이미 알고있다고 말하셔도 필자는 다시 이야기해야만 한다. 그만큼 중요한 이야기이니 말이다)

ASP 페이지는 반드시 웹 서버를 거치고 난 다음에야 확인이 가능한 특이한 페이지이기 때문이다. 만일 여러분이 asp 페이지의 이 특이성을 이해하지 못하고, 여러분의 로컬 하드에서 asp 페이지를 더블클릭해서 실행하려 한다면 다음과 같은 다운로드 화면을 만나거나, 연결된 에디터를 만날 것이다. 이를테면 메모장, 포토샵, 아니면 다른 에디터 등등 말이다.

그렇다면, 이 페이지를 실행하기 위해서는 어떻게 해야 하는가? 그것이 바로 현재 여러분이 궁금한 점이며, 바로 지금 이야기하고자 하는 것이다.

ASP 페이지는 반드시 그를 실행하기 위해서는 웹서버를 통과해야 한다. 즉, 웹 서버가 인식할 수 있는 특별한 장소에 위치해야 한다는 것이다.

 

- 홈 디렉토리 -

MS의 웹 서버가 설치된 서버들은 모두 기본적으로 C:\inetpub\wwwroot 라는 폴더가 존재한다. 바로 이곳이 그 특별한 구역인 것이다. 이 곳은 여러분이 브라우저를 열고 자신의 http://ip주소 혹은http://localhost(자신이 웹 서버인 경우에만 가능한 방법) 라고 치면 연결이 되어지는 곳이다. 바로 여러분의 웹 서버의 디폴트 디렉토리인 것이다. 이 곳은 웹 브라우저에 ip 주소를 입력함으로써 접근이 가능하며, 마치 인터넷을 통해서 접근하는 것과 같이 접근하는 것이 된다. 이렇게 접근하면 웹 서버로 접근하는 것이며, 동시에 asp 페이지를 요청할 수가 있다. 이 곳이 바로 홈 디렉토리라 불리우는 곳이다.

이 폴더내에 위치한 asp 페이지들은 사용자가 브라우저를 열고 http://서버의 ip주소/*.asp 라고 접근하게 되면 서버를 거쳐서 자신의 코드를 해독하고 그 결과를 html코드로 만들어 사용자에게 건네어주게 된다. 바로 이곳에 있는 asp페이지들만이 서버를 거칠 수가 있는 것이다.

참고 : 웹서버에서 ASP페이지를 해석하는 역할을 담당하는 녀석으로 ASP.DLL이 존재한다.

다음의 그림을 보고 다시 한번 정리를 하자. 아래의 그림은 아주 간단하지만 위의 모든 내용을 다 포함하고 있는 태오가 만든 상당히 함축적이고, 집약적인 유용한 그림이 아닐 수가 없다. 그런가?

asp 페이지의 위치는 서버의 C:\inetpub\wwwroot\ 의 하위에 존재해야만 한다.(일단은 그렇다) 그 곳이 바로 웹을 위해 준비된 특별한 구역이기 때문이다. 위의 그림에서는 C:\inetpub\wwwroot\ 라는 곳에 x.asp가 위치하고 있다. 이제 사용자가 접근한다고 가정해보자.

사용자(여기서의 사용자에는 나 자신도 포함이 되어진다)는 브라우저를 열고 그 x.asp페이지에 접근하기 위해서 http://서버의 ip주소/x.asp 라고 입력하여 접속을 시도한다.

그렇게 되면 웹 서버는 그 요청을 받아들여 서버의 C:\inetpub\wwwroot\ 내에서 x.asp페이지를 찾는다. 찾아지면 그 페이지가 asp페이지임을 인식하고 IIS 서버의 ASP.DLL에게로 보낸다.

그리고, ASP.DLL에 의해서 해석이 되어진 페이지를 그제서야 사용자에게 돌려주는 것이다. HTML로 만들어서 말이다. 그러면 사용자는 그 페이지를 브라우저를 통해 확인해 볼 수가 있게 된다.

이제 여러분은 전체적인 돌아가는 구성이 머리 속에 확연히(?) 그려졌을 것이다. 이것은 매우 중요하다. 적어도 필자의 경험상 이 상황의 이해는 코딩보다도 중요했다. 위의 구성을 이해한다면 왜 사용자들이 asp코드를 볼 수가 없는지, asp코드가 어째서 안전하고, 보호되어질 수가 있다는 것인지를 이해할 수가 있다. 클라이언트에게 돌아가는 것은 단지 번역된 html코드에 불과하기 때문이다.

이 시점에서 "에~~ 소스를 볼 수 있는 방법이 있는데~"라고 선수를 치시고 싶은 독자가 있을런지도 모르겠다. 그렇다면 잠시 기다리자. 그 이야기가 곧 상영될 예정이다. 몇 페이지만 기둘리자. 이 Chapter가 끝나기 전에 이 이야기는 여러분을 찾아뵐 것이다.

 

출처 ♥ 프로그래머의 지름길 ♥ | 양파링
원문 http://blog.naver.com/didvkring/90003518917

 

반응형



Posted by 궁극의 java개발자
,