[spring 09] Ajax

💡

∙ 동기 방식 : 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작 수행 가능

∙ 비동기 방식 : 신호를 보냈을때 응답상태와 상관없이 다음 동작 수행 가능

Ajax (Asynchronous JavaScript and XML)

• 비동기 방식의 JS와 XML을 말함

• Ajax 사용이유 : 화면전환 없이 클라이언트와 서버간의 XML, JSON, 텍스트, HTML 등 정보교환을 하기 위해서

Ex) 페이스북 댓글과 게시판 댓글시 페이지 변환없이 등록, 지도

Ajax 관련 메소드

☑ load() : 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 컨텐츠를 요청하여 가져올때 사용. 요청한 컨텐츠를 이용하여 선택한 요소의 내용 변경 가능

$("요소선택").load(url, data, 콜백함수)

▪ url : 외부 컨텐츠 요청할 외부 주소입력

▪ data : 전송할 데이터 (생략가능)

▪ 콜백함수 : 전송완료되면 콜백함수에 저장된 코드 실행 (생략가능)

${"#wrap").load("test.html");
// include 느낌

☑ $.ajax() : 사용자가 지정한 URL 경로에 파일 데이터 전송, 요청한 데이터를 선택한 요소에 불러옴. 불러올 수 있는 외부 데이터는 텍스트, HTML, XML, JSON 등. 통합적인 메소드( post(), get(), getJSON() )

중관호 안에 다양한 옵션입력가능, 옵션은 속성과 값으로 이루어짐

$.ajax({
	url : "요청주소",
    type : "전송방식",	// get 또는 post
	data : 전송할 데이터,
    contentType : "서버로 전송할 컨텐츠 타입",
    dataType : "요청해서 돌려받을 데이터의 타입",
    success : function(매개변수){	요청 성공시 실행될 코드	},
    error : function(매개변수){	에러발생시 실행될 코드	}
});

* 옵션들

▪ contentType : 서버로 전송할 데이터 content-type

▸defaylt 값 : applocation/x-www-form-urlencoded

▸application/json, text/plain

▪ async : 통신을 동기/비동기 방식으로 설정하는 옵션 default true 비동기방식

▪ cache : 요청한 페이지를 인터넷 캐시(저장)할지 여부 설정

▪ complete : Ajax완료시 함수 실행 이벤트 핸들러

▪ timeout : 통신시간 제한

▪ username : HTTP엑세스 할때 인증 필요한 경우 사용자 이름 지정

 

☑ 비동기방식 Ajax 전송 데이터 가공 메소드

▪ serialize() : $("form").serialize(); 📌

입력태그의 값들을

'name=value&name=value...' 와 같은 쿼리 스트링 형식으로 변환해주는 함수

▪ serializeArray() : $("form").serializeArray()

[{name:value},{name:value},...] 배열 객체 타입으로 변환해주는 함수

▪ $.param() : $.param(object)

{name:value},{name:value}

'name=value&name=value' 쿼리스트링으로 변환해주는 함수

▪ JSON.parse() : Json 형태로 작성한 '문자열'을 객체로 가공하여 리턴 📌

Json 형태 문자열 > Json 객체로 변환

'{"name":"value"}' > {"name":"value"}

▪ JSON.stringify() : Json 객체를 문자열로 가공해주는 함수 > 자바스크립트 객체를 json 형태의 문자열로 변환 📌

{"name":"value"} > '{"name":"value"}'

 

☑ $.post() : 서버에 post방식으로 요청할때 사용

☑ $.get() : 서버에 get방식으로 요청할때 사용

☑ $.getJSON() : 서버에 get방식으로 요청후 응답을 JSON으로 받을때 사용

☑ $.getScript)() : 외부 자바스크립트 불러올때

☑ $.ajaxSuccess(function(){}) : 통신 성공시

☑ $.ajaxComplete(function(){}) : 통신 완료시