2021.02.24(Thu) 📌 TIL

오전에는 어제 하던 페이징처리 + 검색 마무리

오후에는 ajax 첫 진도 ✍

 

 

======================2월 24일 수요일======================
-----------------------------[오전]--------------------------------

 

 📃 [GuestSQL.java문서]

    검색갯수 public int getSearchTotal(필드,키워드){ }
    페이징처리 public ArrayList dbSelectAll(int start, int end){ }
    페이징+검색 public ArrayList dbSelectAll(int start, int end,String skey, String sval){ }

 

 

첫번째)  검색갯수 int getSearchTotal(필드, 키워드){ }
두번째)  시작행, 끝행, 검색필드, 검색키워드 public ArrayList dbSelectAll( int start, int end, String skey, String sval )
세번째)  서블릿문서에서 skey=keyfield, sval=keyword 데이터받기
네번째)  검색데이터로 다시 pagecount

 

다섯번째) returnpage, skey, sval, pageNUM 객체로 넘기기 request.setAttribute("객체명", 변수)
여섯번째) guestList.jsp 문서에서 EL, JSTL태그적용
일곱번째) guestList.jsp 문서에서 l◀[Pre] [11] ~ [16클릭] ~ [20] [Next]▶l

                                                              16클릭해서 시작행 151~160

 

 

 

  이름검색 select !! where name like '%b%' ; 62건
    pagecount=62
    지금현재 pagecount=32

 

-----------------------------[오후]--------------------------------

 

 📃 [Ajax ]

     자바스크림트는 웹브라우저에서 인식되는 언어
     자바스크립트 문법적용이나 흐름 비슷
      ㅣ- BootStrap, jQuery, Ajax, 타임스크립트
      ㅣ- javascript기반 Client웹프레임워크
      ㅣ- Angualr, react 페북/인스타, Vue중국알리바마쇼핑물

 

[Ajax 비동기처리]
    ㅣ- 실시간뉴스나 속보는 새로고침없이 자동으로 변경,새로고침 적용
    ㅣ- 왼,오,중앙,상단,하단 이미지로드, 보여주는 뷰단 로드된 후 로그인쪽만 살짝 변경
    ㅣ- 로드된문서에서 일정부분만 변경=새로고침 적용
    ㅣ- 요청한 페이지에 결과출력 request요청페이지 response응답 ===> 한페이지에서 서비스 = spa느낌

 

💻 WebContent에서 새문서
      ㅣ- hello.jsp
      ㅣ- helloAjax.jsp문서에서 고전적인 순수자바스크립트 ajax적용

 

 

Ajax 비동기처리 할때 자바스크립트에서 객체생성
    xhr = new XMLHttpRequest( );
            넘겨야 할 데이터를 받아서 open함수(1,2넘길문서 명시, true)
    xhr.onreadystatechange="결과값을 출력 readyState==4 status=200 xhr.responseText; " ;
    xhr.open("방식", "hello.jsp?title=cf", true)
    xhr.send( ); 포워딩 역할

 

 

📃 <helloAjax.html>

<script type="text/javascript">
var xhr; 

function two( ){ 
  xhr=first( );
  //var b=document.getElementById("title").value;
  //var c=$('#title').val() ;
  var b=document.myform.title.value;
  var url="hello.jsp?title="+b;

  xhr.onreadystatechange=display;  
  xhr.open("GET", url, true);
  xhr.send(null); //send가 포워딩의 역할을 해준다
}//end

function first( ){
   return  new XMLHttpRequest( );
}//end

function display( ){
 if(xhr.readyState==4){
   if(xhr.status==200){
     var str=xhr.responseText;   
     document.getElementById("msg").innerHTML=str;
   }
 }
}//end

 

Ajax 비동기처리를 JQuery방식
ㅣ- 스프링

 

 

helloAjax.html 응용 

hello.jsp