웹 개발을 하다보면

버튼을 a태그로 해서 css를 입혀 만드는 경우가 많다.

그럴 경우에 this라는 놈을 쓰고 싶은 경우가 있는데

a태그에서 href에 javascript:함수명(this)를 쓰면.. 내가 원하는 결과를 얻을 수가 없습니다!!

onlick 속성을 써야만 함수명(this)에서 내가 원하는 this 값을 가져오는 것을 알 수 있습니다.

그래서 a태그에 onclick을 두면 href 때문에 고민을 하는 경우가 있습니다.

그럴때 다음과 같이 href을 막고 onclick을 사용하면 해결할 수가 있습니다.

href가 동작은 하지만 void(0)으로 사실상 동작이 안하는 식이 되고 onlcick이 실행되는 것을 볼 수 있습니다.

시간이 되면, 캡쳐까지 했을텐데, 시간이 부족하여, 글로만 남깁니다.

내용이 알차진 않지만 이 포스팅을 보시고 잘 해결되셨으면 좋겠습니다.

(추후에.. interceptor 관련해서는 좀 더 정리해서 포스팅 해보도록 하겠습니다!)

그래서 이를 해결하기위해서는..

내가 요청받은 놈이 ajax인지 아닌지를 확인해야 겠다는 생각이 들었다.

알아본 걸로는 2가지 정도가 있다.

첫번째 방법으로는,

ajax 요청은 헤더에

x-requested-with 라는 키로 XMLHttpRequest 값을 가지고 있다고 합니다.

그렇기에 자바단에서 HttpServletRequest reuqest 에서 다음과 같이 헤더를 확인해보면,

ajax 요청인지 아닌지 알수 있습니다.

간략하게 설명드리면 request 헤더에서 x-requested-with 라는 키를 가지는 놈의 값이

XMLHttpRequest 이냐 인지를 물어 맞으면 ajax 아니면 ajax 요청이 아니라고 보시면 될 것 같습니다.

두번째 방법으로는,

마찬가지로 ajax요청의 헤더를 이용하는 것인데,

위에 있는 ajax요청이 헤더에 갖고 있는 x-requested-with 이 녀석을 모른다면,

임의로 ajax요청시에 헤더에 키, 값을 넣어서 요청을 보내는 것입니다.

ajax 요청하는 jquery를 보면 다음과 같습니다.

그 중에서 beforeSend라는 함수가 있습니다.

이녀석은 이제 요청 보내기 직전에 사용 되는 함수 인데,

위에 처럼 setReuqestHeader 함수를 통해 AJAX 라는 키에 true라는 값을 주었습니다.

그 다음 자바단에서 위에서 헤더를 확인것과 같이,

이렇게 ajax요청이신지 확인하실 수 있습니다.

두번째 방법은 내가 원하는 대로 키, 값을 주어 내가 알기 쉽게 할 수 있다는 장점이 있는 것 같습니다.

쨋든!!

이와 같이 둘 중에 한가지 방법으로 ajax요청인지 아닌지 사용하셔서 도움이 되셨으면 좋겠습니다!ㅎ