국비지원학원/XML,JSON,AJAX

107일차-AJAX

초코맛 2019. 4. 11. 00:41
반응형
*AJAX
  • $.ajax //라는 jQuery함수 사용(바로 불러다 할당, 무언가 찾지 않는다->비슷한게 $.each)
  • //책에 없음ㅜ
  • $.ajax({url:"url",
               type:"get|post 요청방식",  //get은 문자열 데이터&소용량 데이터만 전송가능.
               data:"QueryString",
               async:"동기인지 비동기인지-동작형태(true-기본(비동기식으로 응답을 받을 것인지)
                                                                             |false-(동기식동작으로 응답을 받을 것인지))",
                                                        //순서는 없음 그냥 옵션일 뿐
                                                        //이때 응답이라는건 누가받냐하면! error,success에 정의된 함수가 호출되어 응답을 받는다.
                                                        (서버에서 응답이 왔을때 자동으로 호출되는 함수 : Callback function)
                       dataType:"서버에서 응답받을 데이터 종류설정(XML,JSON,HTML,Text중 하나 다르면 받을 수 없다.)"
                                                               //대소문자가리지 않고사용가능- 다르면 Error난다
                       error:function(xhr){ //무기명 함수임!
                           //서버에서 에러에 대한 응답이 왔을때 사용자에게 제공할 코드
                                },
                        success:function(서버에서 응답한 데이터를 받는 매개변수){
                                             //서버에서 정삭적인 응답이 왔을때 사용자에게 제공할 코드(DOM사용한 화면의 일부분 변경 코드)
                                     }
                        });  //이때의 매개변수는 JSON 한개!!!
//이벤트가 발생하면 ajax가 동작하여> XMLHTTPRequest에 요청속성을 보내고>send()함수로 web container에 요청>.class로 만들어 JVM>instance>_jspService>님안녕을 불러> XMLHTTPRequest에응답(4회)>결과로 응답처리속성타서 success면 보여진다.
  • ///XML(Extensible Markup Language)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%><%
     String name=request.getParameter("name");
     //텍스트 응답.(CSV)
     String temp="";
     if("이".equals(name)){
           temp="찬,정,백";
     }else if("박".equals(name)){
           temp="최,김,노,김철";
     }else if("오".equals(name)){
           temp="공,이,";
     }else{
           temp="김,박";
     }//end else 줄변경에 신경써서 해야 데이터가 온전히 잘나온다.
%><%=temp%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; min-height: 600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
      $("#btn").click(function(){
            var name=$("#name").val();
            //크롬은 URL을 자동처리해 준다(가->%AA%BB)
            //하지만 IE는 처리해주지 않는다(가->가) 개발자가 직접  처리해주어야 한다.(안해주면 에러남)
            //JavaScript의 encoding함수 encodeURI()
            var queryString="name="+encodeURI(name); /*  +"&age="+age 이렇게 연장가능*/
            
            $.ajax({ url:"text_result.jsp",/* 페이지주소가  오류나면 404,주소안의 데이터가 잘못되면 500 error함수로 간다. */
                           type:"GET",
                           data:queryString,
                           dataType:"TEXT",
                           error:function(xhr){/*  xhr:xmlhttprequest */
                                //XMLHttpRequest->xhr사용하면  error의 이유를 확인할 수 있다.
                                //200-서버가 정상실행되어  응답성공 하였으나 응답의 형태가 처리가능한 데이터가 아닐 떄.
                                //-ex){"이름":값,  }이런경우..손으로 만들떄
                                alert("에러코드: "  +xhr.status+", 에러 메세지: "+xhr.statusText);
                           },
                           success:function(text_data){
                                //alert(text_data);
                                
                                //서버에서 응답된 데이터를 받아  처리한다.
                                var  output="<strong>"+name+"</strong> 조장의 조원<ul>";
                                var data=text_data.split(",");
                                for(var i=0; i<data.length;  i++){
                                     output+="<li>"+data[i]+
                                     (data[i]=="김건하"?"CEO":"")+"</li>";
                                }//end for
                                output+="</ul>";
                                $("#memberDiv").html(output);
                           }
            });//ajax
      });//click
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
           <div style="padding-top:100px; ">
           <c:import  url="../common/jsp/main_menu.jsp"></c:import>
           </div>
     </div>
     <div id="container">
     <div>
     <!-- 동기식일땐 <form action=""></form> 을 태워  보냈지만..지금은 필요없음.따라서 name도 x -->
           조장 : <input type="text" id="name" class="inputBox"/><br/>
           <input type="button" value="입력" class="btn" id="btn">
           <!-- ajax는 form으로 묶을 필요가 없다. 속성도 id 만 있으면 된다. -->
     </div>
     <div id="memberDiv">
     
     </div>
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>

<<<HTML로 응답>>>>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
     String name=request.getParameter("name");
     //HTML로 응답
     String[] temp=null;
     if("이".equals(name)){
           temp="찬,정,백".split(",");
     }else if("박".equals(name)){
           temp="최,김,노,김철".split(",");
     }else if("오".equals(name)){
           temp="공,이,".split(",");
     }else{
           temp="김,박".split(",");
     }//end else
%>
<table>
     <tr>
           <th width="80">번호</th>
           <th width="120">이름</th>
     </tr>
     <%
     for(int i=0; i<temp.length; i++){//서버의 자원을 사용중!  RIA가 아니게됨.
     %>
     <tr>
           <td><%=i+1%></td>
           <td><%=temp[i]%></td>
     </tr>
     <%
     }//end for
     %>
</table>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; min-height: 600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
td{text-align: center;}
</style>
<script type="text/javascript">
$(function(){
      $("#group").change(function(){
            var name=$("#group").val();
            if(name !="none"){
                 var queryString="name="+encodeURI(name);
                 $.ajax({
                      url:"html_result.jsp",
                      type:"get",
                      data:queryString,
                      dataType:"html",
                      error:function(xhr){
                            $("#memberView").html("<img  src='../common/images/img.png'/>");
                            for(vari=0; i<3; i++){
                                  $("#memberView").fadeOut(1000).fadeIn(2000);
                            }//end for
                      },
                      success:function(html_data){
                            /* 김건 뒤에 CEO를 붙이고 싶은데...  */
                            var temp=html_data.replace("김건",  "김건CEO");
                            $("#memberView").html(temp);
                            /* 클라이언트가 할수있는게 없고 무언가  하기가 어려움(일이커짐)그래서 html은 좋은일이 아님-서버에서 일을  다해 가져오니깐. */
                      }//success
                 });//ajax
            }//enhd if
            
      });//change
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
           <div style="padding-top:100px; ">
           <c:import  url="../common/jsp/main_menu.jsp"></c:import>
           </div>
     </div>
     <div id="container">
     <div>
           <select id="group">
                <option value="none">--조 선택--</option>
                <option value="이">1조</option>
                <option value="박">2조</option>
                <option value="오">3조</option>
                <option value="김건">조기취업</option>
           </select>
     </div>
     <div id="memberView"></div>
     
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>








*jQuery XML Parsing

  • 사용법)
dataType:"xml",                    
success:function(xml_data){  //서버에서 응답한 XML문서가 매개변수로 들어오고
    1.파싱할 노드를 찾는다(하나인 경우)
    var 변수=$(xml_data).find("찾을 노드명").text();  //찾을게 하나일 때 //노란부분이 파싱  //이름으로 바로가서 찾을 수 있다.
    1-1.여러개인 경우 반복(n개)
    $.each($(xml_data).find("찾을노드명-name"),function(인덱스-i,Element-nameNode){
        $(Element-this|nameNode).text(); //파싱
    });//end each
}
예제1)
<%@page import="org.jdom2.output.Format"%><%@
page import="org.jdom2.output.XMLOutputter"%><%@
page import="org.jdom2.Element"%><%@
page import="org.jdom2.Document"%><%@
page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%><%-- contentType을 변경하면  원하는형태로 나온다.. --%><%
     String name=request.getParameter("name");
     //XML로 응답
     String[] temp=null;
     if("이".equals(name)){
           temp="찬,정,백".split(",");
     }else if("박민".equals(name)){
           temp="최,김,노,김".split(",");
     }else if("오".equals(name)){
           temp="공,이,".split(",");
     }else{
           temp="김건,박".split(",");
     }//end else
           
     //1.XML문서 객체 생성
     Document xmlDoc=new Document();
     //2.최상위 노드 생성
     Element rootNode=new Element("names");
     //3.자식 노드 생성
     Element nameNode=null;
     for(int i=0; i<temp.length; i++){
           //자식 노드 생성
           nameNode=new Element("name");
           ///자식 노드에 값 설정
           nameNode.setText(temp[i]);
           //4.생성된 자식노드를 부모 노드에 추가
           rootNode.addContent(nameNode);
     }//end for
     //5.자식노드를 가진 부모노드를 문서노드에 추가
     xmlDoc.addContent(rootNode);
     //6.출력
     XMLOutputter x_out=new  XMLOutputter(Format.getPrettyFormat());
     x_out.output(xmlDoc, out);
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; min-height: 600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
      $(".btn").click(function(){
            var name=($("[name='name']:checked").val());
            var queryString="name="+encodeURI(name);
            $.ajax({
                 url : "xml_result.jsp",
                 type : "get",
                 data : queryString,
                 dataType : "XML",
                 error:function(xhr){
                      alert(xhr.status);
                 },
                 success:function(xml_data){
                     /* 값은 나오나 잘못된 parsing  alert($(xml_data).find("name").text()); //잘못된 파싱이다. */
                     var nameNodes=$(xml_data).find("name");
                     var output="";
                     $.each(nameNodes,function(idx,nameNode){
                           /* alert($(nameNode).text()); */
                           /* alert( $(this).text()); */
                           output+="<input type='checkbox'  name='name'  value='"+$(this).text()+"'/>"+$(this).text()+"<br/>";
                     });//end each
                     $("#memberView").html(output);
                     
                     /* JDOM보다 훨씬 간단 */
                     /* alert(xml_data); */
                 }
            });//ajax
      });//click
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
           <div style="padding-top:100px; ">
           <c:import  url="../common/jsp/main_menu.jsp"></c:import>
           </div>
     </div>
     <div id="container">
     <div>
           <input type="radio" name="name" value="이"  checked="checked"/>1조
           <input type="radio" name="name" value="박"/>2조
           <input type="radio" name="name" value="오"/>3조
           <input type="radio" name="name"  value="김건"/>조기취업
           <input type="button" value="조회" class="btn"/>
     </div>
     <div id="memberView"></div>
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>


예제2)
<depts>
<!-- DTD에 맞는 구조 -->
     <dept>
           <deptno>10</deptno>
           <dname>SI 개발부</dname>
           <loc>서울</loc>
     </dept>
     <dept>
           <deptno>20</deptno>
           <dname>SM 유지보수</dname>
           <loc>경기도</loc>
     </dept>
</depts>
///이라면~~
dataType:"xml",                    
success:function(xml_data){ 
    1-1.여러개인 경우 반복(n개)
    $.each($(xml_data).find("dept"),function(i,deptnode){
        $(deptnode).find("deptno|dname|loc").text(); //파싱(자식노드가 다양한 경우 노드를 정해 파싱)
    });//end each
}

<<<0326.dept.xml 로 표로 얻어봄>>>>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; min-height: 600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
      $("#reqXml").click(function(){
            //xml을 직접요청(공공데이터가 xml을 요청하여  응답받는것과 동일)
            //파라메터를 사용하지 않는다. == data:~를 사용하지  않는다!
            $.ajax({
                 url:"../xml0326/dept.xml",
                 type:"get",
                 dataType:"xml",
                 error:function(xhr){
                      alert(xhr.status+"/"+xhr.statusText);
                 },
                 success:function(xml){
                      //alert(xml);
                      //반복해야할 노드를 찾고
                      var deptNodes=$(xml).find("dept");
                      //찾은 노드를 반복 시킨다.
                      if($("#tab tr").size()==1){//같은데이터가  계속들어가는게 막아짐
                            $.each(deptNodes, function(idx,  deptNode){
                                 //반복중인 노드의 값 얻기
                                  //alert($(deptNode).find("loc").text());
                                  $("#tab:last").append("<tr><td>"+$(deptNode).find("deptno").text()
                                             +"</td><td>"+$(deptNode).find("dname").text()+"</td><td>"
                                             +$(deptNode).find("loc").text());
                            });//each
                      }//end if
                      
                 }//success
            });//ajax
      });//click
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
           <div style="padding-top:100px; ">
           <c:import  url="../common/jsp/main_menu.jsp"></c:import>
           </div>
     </div>
     <div id="container">
     <div>
           <a href="#void" id="reqXml">부서정보</a>
     </div>
     <div>
           <table border="1" id="tab">
                <tr>
                     <th style="width:80px;">부서번호</th>
                     <th style="width:180px;">부서명</th>
                     <th style="width:100px;">부서위치</th>
                </tr>
           </table>
     </div>
     
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>





200Error처리 )
  • //dataType을 Text로 바꾸면 200일때 뭘틀렸는지 알 수 있다.
  • //200 : 성공적으로 받았으나 데이터가 잘못되 jquery쪽에서 Error가 나지 않아 잡기 힘듦

<<탭이들어가 200에러가 나면>>
<%상황

<<xml->text로 바꾸고 출력을 변경해준다+콘솔출력도 가능.>>

<<그럼 화면에서 데이터의 문제점을 알 수 있다.>>




*JSON Parsing
 
사용법)
dataType:"JSON"   ,
success:function(json_obj){     //{"name":"김","age":30}
    json_obj.name
//김<=name  30<=age

<%@page import="org.json.simple.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
     String name="김";
     int age=30;
     //JSONObject 생성
     JSONObject json=new JSONObject();
     //값 할당
     json.put("name", name);
     json.put("age",age);
     
     out.println(json.toJSONString());
%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/jsp_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF  url(http://localhost:8080/jsp_prj/common/images/header_bg.png)  repeat-x;
           position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px;  font-weight:bold; text-align:center;
                /* padding-top: 35px */ position:absolute;  top:40px; left:290px; }
#container{width:800px; min-height: 600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px;  padding-right:20px; }
</style>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
      $("#setValue").click(function(){
            $.ajax({
                 url:"json_result.jsp",
                 type:"post",
                 dataType:"json",
                 error:function(xhr){
                      alert(xhr.status+" "+xhr.statusText);
                 },
                 success:function(jsonObj){
                      //alert(jsonObj.age);
                      $("#name").val(jsonObj.name);
                      $("#age").val(jsonObj.age);
                      
                 }//success
            });//ajax
      });//click
});//ready
</script>
</head>
<body>
<div id="wrap">
     <div id="header">
           <div id="headerTitle">SIST Class4</div>
           <div style="padding-top:100px; ">
           <c:import  url="../common/jsp/main_menu.jsp"></c:import>
           </div>
     </div>
     <div id="container">
     <div>
           <a href="#void" id="setValue">값 설정</a>
     </div>
     <div>
           이름 : <input type="text" name="name" id="name"  class="inputBox"/><br/>
           나이 : <input type="text" name="age" id="age"  class="inputBox"/><br/>
     </div>
     </div>
     <div id="footer">
           <div id="footerTitle">copyright&copy; all right  reserved. class 4.</div>
     </div>
</div>
</body>
</html>







 

반응형
저작자표시 비영리 변경금지

'국비지원학원 > XML,JSON,AJAX' 카테고리의 다른 글

109일차-객체다형성+Model2예시  (0) 2019.04.15
108일차-JSONArray+Model2  (0) 2019.04.11
106일차-JSON/AJAX  (0) 2019.04.10
105일차-XML+Parsing  (0) 2019.04.08
104일차-XML+Parser  (0) 2019.04.08

'국비지원학원/XML,JSON,AJAX'의 다른글

  • 현재글107일차-AJAX

관련글

티스토리툴바