<jQuery> 7. Ajax
by BFine반응형
1. Ajax
Http는 동기 방식 [요청->처리->응답->다음요청] , 응답을 받고 난 후에 요청을 할 수 있다.
Ajax는 Asychronous javascript and xml 로 비동기방식 : 동적인 웹구현이 가능하다. (클라이언트가 처리)
DOM이 XMLHttpReqeust 객체를 생성해서 서버에 요청, 응답
var obj={ 변수명 : 변수값, 변수명 : 변수값, 함수명 : function(){ }} -> JSON 형식( 이 형태로만 처리가능)
Ajax jquery 형태
1 2 3 4 5 6 7 8 9 10 | $.ajax({ url : //요청을 처리하는 파일(.jsp, .json) type : //POST, GET data : //요청데이터 { '태그명' : 값( $().val(), javascript 객체 ) } dataType : //요청처리 후 받는 데이터의 type text[parse 필요], json success : function(){ // 요청처리 되었을시 } error : function(){ }, complete : function(){} // 완료시 }); | cs |
※ data에 $( form id 값 ).serializeArray() 사용시 한번에 처리가능
<예제> HelloWorld 출력
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | ==========html============= <script type="text/javascript"> $(document).ready(function(){ $("#btn").on('click', function () { $.ajax({ url:'NewFile.jsp', type:'GET', data:{'str1' : 'Hello', 'str2' : 'World' }, dataType:'text', success: function (server) { var server_response=JSON.parse(server); $("div").html(server_response.str); }, error: function(e) { e.getMessage(); }, complete: function() { } }); }); }); </script> </head> <body> <input type="button" id="btn" value="click"> <div></div> ===========jsp======================= <% String str1=request.getParameter("str1"); String str2=request.getParameter("str2"); String pul=str1+str2; String str="{\"str\":"+"\""+pul+"\""+"}"; %> <%=str%> | cs |
$("div").on("click",'a'[새롭게 추가된 코드], function) 부모태그로 접근해야 한다.
실행
AW92_Ajax.zip반응형
'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글
| <Javascript> 11. Closer (0) | 2019.05.28 |
|---|---|
| <Javascript> 10. Promise (0) | 2019.05.27 |
| <jQuery> 6. MAP (0) | 2018.04.12 |
| <jQuery> 5. Event object (0) | 2018.04.11 |
| <jQuery> 4. Selector, Event (0) | 2018.04.10 |
블로그의 정보
57개월 BackEnd
BFine