하이미디어교육센터(자바기반 풀스택 웹개발자)

Ajax는 자바스크립트 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.웹 페이지의 속도가 향상되나 히스토리 관리는 안 된다.   (실습1)  Basic * 생성 파일 : ajaxWrite.jsp   , ajaxWriteSave.jsp o--------------  ajaxWrite.jsp ----------------o <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> $(function(){        $("#btn_save").click(function(){                 var eng = $("#eng").val();                 $.ajax({                           type : "GET",           //  OR   "POST"                           data : "eng="+eng,                           url : "ajaxWriteSave.jsp",                           datatype : "text",                           success : function(data){                                         $("#parse_area").html(data);                           },                           error : function() {                                        alert(‎"전송실패");                           }                });         }); }); </script> <body> 영어점수 : <input type="text" name="eng" id="eng"> <button id="btn_save">전송</button> 결과 : <span id="parse_area"> </body> </html> o--------------  ajaxWriteSave.jsp ----------------o <% String eng = request.getParameter("eng"); int score = Integer.parseInt(eng); String method = request.getMethod(); if( score >= 60) {            out.print("합격 " + method); } else {            out.print("불합격"); } %>  (실습2)  JSON 형식 받기 * 생성 파일 : ajaxWrite.jsp   , ajaxWriteSave.jsp o--------------  ajaxWrite.jsp ----------------o <script> $(function(){        $("#btn_save").click(function(){                var userid = $("#userid").val();                var userpw = $("#userpw").val();               $.ajax({                      type : "POST",                      data : "userid="+userid+"&userpw="+userpw,                      url : "ajaxWriteSave.jsp",                      datatype : "json",                      success : function(obj){                                var data = JSON.parse(obj);                                var str   = "id:"+data.id + " ";                                str += "pw:"+data.pw + " ";                                str += "result:"+data.result;                                $("#parse_area").html(str);                       },                       error : function() {                               alert(‎"전송실패");                       }                });         }); }); </script> <body> 아이디 <input type="text" name="userid" id="userid">  패스워드 <input type="text" name="userpw" id="userpw">  <button id="btn_save">전송</button> 전송결과: <span id="parse_area"> </body> </html> o--------------  ajaxWriteSave.jsp ----------------o <% String userid = request.getParameter("userid"); String userpw = request.getParameter("userpw"); %> {"id":"<%=userid %>","pw":"<%=userpw %>","result":"성공"}   (실습3)  폼전송1 <script> $(function(){       $("#btn_save").click(function(){              var formData = $("#frm").serialize();                $.ajax({                        type : "POST",                        data : formData,                        url : "ajaxWriteSave.jsp",                        datatype : "json",                       success : function(obj) {                            var data = JSON.parse(obj);                            var str = "id:"+data.id + " ";                            str += "pw:"+data.pw + " ";                            str += "result:"+data.result;                           $("#parse_area").html(str);                        },                        error : function() {                             alert(‎"전송실패");                        }                 });         }); }); </script> <body> <form id="frm"> 아이디 <input type="text" name="userid" id="userid">  패스워드 <input type="text" name="userpw" id="userpw">  <button type="submit" id="btn_save" xxonclick="return false;">전송</button> </form> 전송결과: <span id="parse_area">  (실습4)  폼전송2          * 파일을 포함한 전송 <form id="form2" name="form2" method="post" enctype="multipart/form-data">    <input type="file" id="files" name="files" multiple/>    <input type="button" value="확인" xxonclick="test2(); return false;"></form> <script>    function test2(){        var form = $("form")[0];                var formData = new FormData(form);         $.ajax({            cache : false,            url : "${pageContext.request.contextPath}/testForm2", // 요기에            processData: false,            contentType: false,            type : 'POST',             data : formData,             success : function(data) {                var jsonObj = JSON.parse(data);            }, // success                 error : function(xhr, status) {                alert(‎xhr + " : " + status);            }        }); // $.ajax */    }</script>