AJAX (Asynchronous Javascript and XML)

AJAX는 웹페이지가 서버와 비동기 통신을 하는 기술들의 집합체이다.

비동기식이란 여러가지 일이 동시적으로 발생해서 서버와 통신하는 동안 다른 작업을 할 수 있다.

ajax사용법

$.ajax(settings)

settings안에 ajax 속성들을 설정한다.

ex) 아이디 중복체크 ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var query = {'userId' : $txtUserId.val()};
$.ajax({
	type: 'post',
	data: JSON.stringify(query),
	url: '/customer/idCheck_Ajax',
	contentType: 'application/json',
	success: function(data) {
		if(data == 1) {
			alert("해당 아이디가 등록 되어 있습니다.");
			idck = 0;
		} else {
			alert("사용가능한 아이디입니다.");
			idck = 1;
		}
	},
	error: function(error) {
		alert("error: " + error);
	}
});

Ajax의 속성 요약

속성 설명
url 데이터를 전송할 URL
HTTP 요청을 할 대상이 되는 URL
contentType 기본값 : application/x-www-from-urlencode
서버에 데이터를 전송할 때 콘텐츠 타입을 나타내는 값
JSON형식의 데이터를 서버로 보낼 때는 “application/json”으로 설정
type 기본값 : GET
서버로 전송하는 HTTP요청 방식 (GET, POST)
dataType 서버가 리턴하는 데이터 타입
xml = XML 문서
json = JSON형식 데이터로 평가하고 Javascript의 개체로 변환
script = JavaScript 코드를 텍스트 데이터로.
html = HTML을 텍스트 데이터로. 여기에 script 태그가 포함 된 경우 처리가 실행됨.
text = 일반 텍스트
data 서버에 전송할 데이터, key/value형식의 객체
async 기본값 : true
기본적으로 모든 Ajax요청은 비동기적으로 보내짐.
동기적으로 호출하면 요청이 진행되는 동안 페이지가 잠시 블로킹 된다.
beforeSend beforeSend에 설정된 콜백함수를 호출할 때는 두 인자를 차례로 전달함.
jqXHR : jQuery XMLHttpRequest 객체
settings : 설정항목
success HTTP 요청이 성공하면 호출되는 함수.
data : 서버에서 반환된 데이터 (dataType 설정에 따라 반환된 결과가 달라진다.)
textStatus : 요청 상태를 나타내는 문자열
jqXHR : jQuery XMLHttpRequest 객체
error HTTP 요청이 실패하면 호출되는 함수.
jqXHR : jQuery XMLHttpRequest 객체
textStatus : 에러 타입을 나타내는 문자열 (‘timeout’, ‘error’, ‘abort’, ‘parseerror’ 등)
errorThrown : HTTP 에러가 발생하는 경우 “Not Found”나 “Internal Server Error”와 같이 HTTP 상태를 나타내는 문자열
complete HTTP 요청이 끝난 후나 success, error 콜백 함수가 실행되고 나서 호출되는 함수.
jqXHR, textStatus를 인자로 전달 받음.

참고 사이트

Ajax 속성

Ajax의 Content-Type

[jQuery] Ajax 설정