[JS ajax]JS를 모르지만 이해해야하는 웹해커들을 위한 게시물

html속 Js를 뜯다가 ajax라는 메소드를 보았다.

 

필자는 js를 배우지도 않았고 웹쪽을 깊게 공부하지도 않았기에 ajax라는것이 뭔지 조차 모르고있었다.

하지만 ajax를 사용하는 웹사이트를 분석해야했기 떄문에 공부해야했고 이 게시물에서는 개발을 위한 디테일한 설명이 아닌

분석을 위한 단순한 개념을 설명하겠다.

 

아래에 정리있음!

 

먼저 ajax는 Asynchronous JavaScript and XML의 약자로, 구지 알고있을 필요는 없고 그냥 간단히 새로고침 없이 페이지의 일부데이터만 로드하는 기법이다.

(디테일과 개발에 응용하는법 등을 찾으셨다면 잘못찾아오셨습니다..)

 

$.ajax({
    url: "/rest/getid",
    data: {"name": "foo"},
    method: "GET",
    dataType: "json",
	...

이런식으로 쓰이고

url은 요청할 주소

data는 주소로 보낼 데이터

method는 메소드(GET, POST)등

dataType은 보내는 데이터의 타입

이다.

 

그 이후로는 성공/실패시 동작할 코드가 따르는데

여러방식이 있다.

$.ajax({
    url: "/rest/getid",
    data: {"name": "foo"},
    method: "GET",
    dataType: "json",
    success: fuction(data){
    ...
    },
    error: fuction(data){
    ...
    }
});

이렇게 동작할 코드를 안에 넣을때도있고

$.ajax({
    url: "/rest/getid",
    data: {"name": "foo"},
    method: "GET",
    dataType: "json",
})
.done(fuction(data){
...
})
.fail(fuction(data){
...
});

의 형태도 있다.

 

윗부분의 success와 아랫부분의 done은 둘 다 url에 요청을 성공헀을떄 모든 데이터를 data에 넣고 그 함수의 코드를 동작시킵니다.

아랫부분의 error와 fail은 요청에 실패했을때 입니다.

 

정리하자면 $.ajax로 시작

url은 요청할 주소

success, done은 성공시, 안의 함수 인자에 받은 데이터, 그리고 함수실행

error, fail은 실패시 함수실행

입니다.