8 week_4 Ajax

Ajax

자바스크립트를 이용하여 서버와 웹 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 기술

 

비동기 방식 : 웹 페이지를 reload하지 않고 데이터를 불러오는 방식으로 필요한 부분만을 사용할 수 있는 장점이 있다.

 

사용 이유 : JSON이나 XML 형태로 필요한 데이터만을 가져오기 때문에 효율적이기 때문

장점 :	웹 페이지 속도 향상 및 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능(비동기)
단점 :	히스토리 관리가 안돼서 보안에 약하다

 

 

Ajax 진행 과정

1. XMLHttpRequest Object를 만든다.

• request를 보낼 준비를 브라우저에게 시키는 과정
• 이것을 위해서 필요한 method를 갖춘 object가 필요함

2. callback 함수를 만든다.

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

3. Open a request

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

4. send the request

 

 

기본 Ajax의 구조

$.ajax({
      url: www.tistory.com // $(form).attr("action")
      ,async: false // false 는 동기, true 는 비동기
      ,type: get // $(form).attr('method')
      ,data: { "param1" : "A" , "param2" : "B" } // $(form).serialize()
      ,dataType: jSon
	  ,success: function() {
       //.. 성공 시
      } 
      ,error: function(request, status, error) 
       // .. 실패 시
      {}  
    })

• url : ajax 에서 이동하여 데이터를 get/set 할 URL 주소. 폼으로 받을 경우 action의 값을 셋팅한다.
• async: true 비동기, false 동기
• type: get 인지 post 인지 셋팅한다. 폼으로 받을 경우 method의 값을 셋팅한다.
•  data: url에 파라메터로 넘겨줄 data 를 JASON 구조로 셋팅한다.
  • form 에 데이터가 있을 경우 .serialize() 를 사용 편리하다. form 데이터를 json 구조로 병렬화 시켜준다.

$value = $(form).serialize(); // ex)

• dataType: 리턴 받을 값의 데이터 구조. jSon , text 등 사용 가능
• sucess: Ajax 가 성공했을 경우 후처리 function
• error: Ajax 가 실패했을 경우 후처리 function

 

 

 

Ajax 관련 메서드

메서드	의미
load()	외부 콘텐츠를 가져올 때 사용
$.ajax()	데이터를 서버에 POST, GET 방식으로 전송이 가능하며, HTML, XML JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드
$.post()	데이터를 서버에 POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.get()	데이터를 서버에 GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.getJSON()	데이터를 서버에 GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용
.getScript()	Ajax를 이용하여 외부 자바스크립트를 불러올 때 사용
.ajaxStop(function(){ ... })	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수에 실행문이 수행
.ajaxSuccess(function(){ ... })	ajax 요청이 성공적으로 완료되면 함수에 실행문을 수행
ajaxComplete(function() { ... })	Ajax 통신이 완료되면 함수에 실행문을 실행
serializeArray()	JSON 데이터로 변환하여 액션 페이지에 전송
serialize()	쿼리 스트링 형식의 데이터로 변환하여 액션 페이지에 전송 방식

 

$.ajax() 메서드 옵션 종류

메서드	의미
async	통신을 동기 또는 비동기 방식으로 설정하는 옵션. 기본값은 true
beforeSend	요청하기 전에 함수를 실행하는 이벤트 핸들러
cache	요청한 페이지를 캐시에 저장할지 여부 설정. 기본값은 true
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러
contentType	서버로 전송시킬 데이터의 content-type을 설정
data	서버로 전송할 데이터를 지정
dataType	서버에서 요청 받아올 데이터의 형식을 지정(생략하면 요청한 자료에 맞게 자동으로 형식이 지정 됨)
error	통신에 문제가 발생했을 때 함수를 실행
success	Ajax로 통신이 정상적으로 이뤄지면 함수를 실행
timeout	통신 시간을 제한. 시간 단위는 밀리 초
type	데이터를 전송할 때 방식(get/post)를 설정
url	데이터를 전송할 페이지를 설정. 기본값은 현재 페이지
username	HTTP 엑세스를 할 때 인증이 필요할 경우 사용자 이름을 지정