[Ajax]jQuery를 활용한 Ajax

hwa.haha·2022년 9월 8일
0

Ajax

목록 보기
2/2
post-thumbnail

📖Ajax 동작원리

javascrpit 이벤트에서 시작하여 서버에서 어떤 데이터포멧으로 전달하는지만 확인하고 거기에 맞는 함수를 사용하고 ,결과값 도착하면 콜백함수를 호출해서 html로 변환해서 화면으로 출력해준다.

📖Ajax에 관련된 jQuery 커맨드

load(url, prameters, callback)
URL과 매개변수로 Ajax요청을 젂송, callback 함수는 요청 완료시 호출, 응답
텍스트는 읷치하는 엘리먼트의 컨텐츠를 대체, HTML결과값읷 경우 사용 용이

  • url : 요청이 젂송되는 서버측 URL
  • parameters: URL에 젂달하고자 하는 data
  • callback : 응답 결과 데이터가 읷치하는 엘리먼트로 로드 된 이후 호출되는 함수

$ get(url, prameters, callback)
$post(url, prameters, callback)
URL을 사용하여 서버에 대한 GET/POST 요청을 전송
매개변수는 쿼리 문자열로 전달

GET 은 서버의 데이터를 가져오는(SELECT)데에 적합하고
POST 는 게시판의 글을 등록/수정하는 것과 같은 작업에 적합하다.

$.getJSON(url, prameters, callback)
URL을 사용하여 서버에 대한 GET 요청을 전송
매개변수는 쿼리 문자열로 젂달
응답은 JSON 문자열로 해석되며 결과는 callback함수에 젂달

Ajax(options) : options를 통해 Ajax 요청을 전송
options : 요청에 대한 매개변수를 정의 하는 프로퍼티 객체
이름 타입 설명

이름타입설명
urlString요청URL
typeString사용 할 HTTP메서드.(생략시GET)
dataObject요청에 전달될 프로퍼티를 가진 객체
dataTypeString응답의 결과로 반환 되는 데이터의 종류

dataType
•xml: 응답 텍스트는 xml로 파싱, XML DOM을 전달
•html: callbak함수로 텍스트 그대로 전송,html코드 평가
•json: JSON문자열로 평가,생성된 객체 전달
•jsonp: json타입과 유사, 원격스크립트 허용
•script:콜백 호출보다 우선하여 스크립트 구문으로 처리

이름타입설명
timeoutNumberAjax요청의 제한시간, 제한시간초과시 error callback호출 되거나 요청이 취소
globalBooleanTrue:전역함수활성, false:전역함수비활 contentType String 요청에 지시되는 contentType기본값은“application/x-www-form-urlencoded”
successFunction 응답이 성공시 호출 되는 함수
errorFunction응답이 에러상태 코드 반한하면 호출 되는 함수
completeFunction요청이 완료되면 호출되는함수(successorerror이후실행)
beforeSendFunction요청 전송이전 호출함수
asyncBooleantrue:비동기호출, false:동기호출
processDataBooleanFalse시 URL인코딩 형태로 처리 되어 전달 되는 데이터를 금지
ifModifiedBooleanTrue시 헤더정보 확인하여 미변경시 요청 성공

📖폼에서 요청 매개변수 얻기

serialize()

  • 확장집합에 있는 전송할 수 있는 상태인 폼 엘리먼트에서 인코딩된 쿼리문자열을 생성.
  • 선택되지 않은 체크박스나 라디오 버튺, 선택된 옵션이 없는 드랍다운, 비활성화 된 컨트롤은 변회시 무시.

serializeArray()

  • serialize()과 유사하나 확장집합의 폼 엘리먼트의 값을 name, value
    로 구성된 배열로 리턴한다.

✍예제1

//step.1 html
$(function(){
	$('#letter-a a').click(function(){
		$('#dictionary').hide().load('a.html', function(){
			$(this).fadeIn();
		});
		return false;
	});	
});


//step.2 json
/*$(function(){
	$('#letter-b a').click(function(){//팩토리객체가 제이쿼리
	   $.getJSON('b.json',function(data){//data값은 배열
	//제이쿼리함수없이 사용할떄 ($.)전역함수처럼 사용   
		   $('#dictionary').empty();//안에 가진 내용 비워줌.
	//결과값:배열[{},{}]=> HTML
	       $.each(data, function(index, item){//item은 객체
		     var html =  '<div class ="entry">';
		    	 html += '<h3 class ="term">'+ item.term +'</h3>'
		    	 html += '<div class ="part">'+ item.part +'</div>';
		    	 html += '<div class ="definition">'+ item.definition +'</div>';
		    	 html += '</div>';    	    	   
		       
		      $('#dictionary').append(html);       
            });
	   });			
		return false;
	});	
});
*/

//Step.2-1 get.json=>ajax변환
$(function(){
	$('#letter-b a').click(function(){
	  $.ajax({
		url:'b.json',
		type:'get',
		dataType:'json',
		success:function(data){
		    $('#dictionary').empty();
		    
		    data.sort(function(a,b){//내림차순정렬 추가
		    	if(a.term<b.term){
		    	 return 1;
		    	}else if(a.term,b.term){
		    	 return -1;
		    	}else{
		    	 return 0;
		    	}		    	
		    });
		    
			$.each(data, function(index, item){
			     var html =  '<div class ="entry">';
		    	 html += '<h3 class ="term">'+ item.term +'</h3>'
		    	 html += '<div class ="part">'+ item.part +'</div>';
		    	 html += '<div class ="definition">'+ item.definition +'</div>';
		    	 html += '</div>';    	    	   
		       
		      $('#dictionary').append(html);  
		      });	      
            },
	   });			
		return false;
	});	
});


//step.3 java script
$(function(){
	$('#letter-c a').click(function(){
		$.getScript('c.js');//자바스크립트가 실행되고 있는데 
                          //c 눌럿을때  호출되면 좋겟다.
		return false;
	});	
});

//step.4 xml
/*$(function(){
	$('#letter-d a').click(function(){
	//xml => html변환 => 화면출력 .파라미터값 없음 get으로 
		$.get('d.xml',function(data){//콜백함수. 
     //data(자바스크립트객체임):entries전체=>entry들을 가져와야함.
		  $('#dictionary').empty();
		  
			$(data).find('entry').each(function(index){ 
            //find,each 사용할려면 제이쿼리함수(팩토리화)해주어야 함.
				 $entry =$(this); 
				 var html =  '<div class ="entry">';
		    	 html += '<h3 class ="term">'+ $entry.attr('term') +'</h3>'
		    	 html += '<div class ="part">'+ $entry.attr('part') +'</div>';
		    	 html += '<div class ="definition">'+ $entry.find('definition').text() +'</div>';
		    	 html += '</div>';   
                     
		           
		    	$('#dictionary').append(html);
		   });	
		});
		return false;
	});	
});*/

//step.4-1get() =>ajax()변환

$(function(){
	$('#letter-d a').click(function(){
		$.ajax({
			url:'d.xml',
			type:'get',
			dataType:'xml',
			success:function(data){
				$('#dictionary').empty();
				$(data).find('entry').each(function(index){ 
                //find,each 사용할려면 제이쿼리함수(팩토리화)해주어야 함.
				 $entry =$(this); 
				 var html =  '<div class ="entry">';
		    	 html += '<h3 class ="term">'+ $entry.attr('term') +'</h3>'
		    	 html += '<div class ="part">'+ $entry.attr('part') +'</div>';
		    	 html += '<div class ="definition">'+ $entry.find('definition').text() +'</div>';
		    	 html += '</div>';   
                     	           
		    	$('#dictionary').append(html);
		    });	
		  }	,
	  });	
		return false;
	});	
});


//step.5 

$(function(){
	$('#letter-e a').click(function(){
		$.get('server3.jsp',{'term':$(this).text(),/*'a':b 이렇게 두개도 가능*/}
				         ,function(data){//파라미터값을 key:value 방식으로 전달.
		  $('#dictionary').text(data);		
			
		});		
		return false;
	});	
});

//step.6 form형식 ajax

$(function(){
	$('#letter-f form').submit(function(){
		$.ajax({
		url:'server3.jsp',
		type:'post',
		data:$(this).serialize(),
		//this는 form이고 serialize()는form-submit일때만 사용됨.
		dataType:'text',
		success:function(data){
			 $('#dictionary').text(data);
		  }	
		});	
		return false;
	});
});

✍예제2


$.getJSON('ajax01.jsp',function(data){
	  $('#treeData').append('<tr><th>이름</th><th>주소</th></tr>');  
	  $.each(data, function(index,m){
	  $('#treeData').append('<tr><td>'+m.name+'</td><td>'+m.address+'</td></tr>');  
	  
	  });  
  });
 
 $(function(){
		$.ajax({
			
			url:'ajax01.jsp',
			type:'get',
			dataType:'json',
			success:function(data){	
var html = '<tr><th>'+'이름'+'</th><th>'+'주소'+'</th></tr>';
				$.each(data, function(index){
					
			     html += '<tr>';
			     html += '<td>'+ this.name + '</td>';
			     html += '<td>'+ this.address+'</td>';
			     html += '</tr>';			       
			      

				});
				$('#treeData').append(html);  
			}
		});
		
 });

✍예제3


/*
 success: successHandler로 호출해서 할 경우.
function successHandler (data){
	$('#list'.empty());
	$each(data,function(index,blog){
		var html ='<div>';
		html += '<h3>'+ blog.title+'</h3>';
		html += '<div>'+blog.write+'</div>';
		html += '<div>'+blog.contents+'</div>';
		html += '</div>';
		
		$('#list').append(html);
	});
 }
 
 });
*/

$(function() {// json 값 받아오는거 html로 출력하는것
	$(window).on('load', function() {
		$.ajax({
			url : 'server.jsp',
			type : 'get',
			dataType : 'json',
			success : function(data) {

				$.each(data, function(index) {
					var html = '<div class = "test">';
					html += '<p>tilte : ' + this.title +', write : '+  this.writer+ ', contents : '+this.contents+'</p>';
					html += '</div>';

					$('#list').append(html);
				});
			}
		});
	});
});

$(function() { // 댓글을 쓰면 ajax를 통해서 가져가야함. serialize() 보내고 다시 가져오는것.
	$('form').submit(function(e) {
		e.preventDefault();	
		$('#list').empty();
		
		$.ajax({
			url : 'server.jsp',
			type : 'post',
			data : $(this).serialize(),//데이타를 다 만들어준다.
			dataType : 'json',
			success : function(data) {
				$.each(data, function(index) {
					var html = '<div class = "test">';
					html += '<p>tilte : ' + this.title +', write : '+  this.writer+ ', contents : '+this.contents+'</p>';
					html += '</div>';
					
					$('#list').append(html);
			
				});
				
			}

		});
		$('form input').not('form input:last').val('');

	});
});
profile
hwa.haha
개발자로 차근차근
이전 포스트

[Ajax] Ajax란?

0개의 댓글