ajax 요청인지 판단

AJAX(Asynchronous JavaScript and XML) 요청을 판단하는 방법은 여러 가지가 있습니다. 

아래는 몇 가지 방법들입니다.

반응형

1. HTTP 헤더 확인:
   - 대부분의 AJAX 요청은 `XMLHttpRequest` 객체를 사용합니다. 이 객체로 보내는 요청은 HTTP 헤더 중 `X-Requested-With` 헤더에 `XMLHttpRequest` 값이 설정됩니다. 서버 측에서 이 헤더를 확인하여 요청이 AJAX인지 판단할 수 있습니다.

      if (request.getHeader("X-Requested-With") != null
          && request.getHeader("X-Requested-With").equals("XMLHttpRequest")) {
          // AJAX 요청
      }

     

728x90

2. Content-Type 확인
   - AJAX 요청은 대부분 JSON이나 XML과 같은 데이터를 주고받기 때문에 `Content-Type` 헤더를 확인하여 요청이 JSON이나 XML 데이터를 전송하는지 확인할 수 있습니다.

      if (request.getContentType() != null 
          && request.getContentType().startsWith("application/json")) {
          // JSON 데이터를 전송하는 AJAX 요청
      }

    

3. URL 경로나 매개변수 확인:
   - AJAX 요청을 구분하기 위해 URL 경로나 매개변수에 특정 키워드를 추가하여 확인할 수도 있습니다.

      // URL 경로에 ajax 키워드가 있는지 확인
      if (request.getRequestURI().contains("ajax")) {
          // AJAX 요청
      }

      // 매개변수에 ajax=true가 있는지 확인
      if ("true".equals(request.getParameter("ajax"))) {
          // AJAX 요청
      }

   

4. JS 라이브러리 활용:
   - 특정 JavaScript 라이브러리(jQuery 등)를 사용할 경우, 해당 라이브러리가 추가하는 헤더나 매개변수를 확인하여 AJAX 요청을 판단할 수 있습니다.

   위 방법 중 하나 또는 여러 가지를 조합하여 사용하여 서버 측에서 AJAX 요청을 판단할 수 있습니다.

---

# 원문 삭제되는 경우가 종종 있어서 컨텐츠를 복사하며, 출처를 밝힙니다.출처 : 

http://mohwaproject.tistory.com/112

기존 Form 방식과

 Ajax 통신 방식을 서버에서 구분하는 방법은 존재하지 않습니다.(HTML5 명세를 제외)

하지만 트위터와 같은 몇몇 서비스의 HTTP 요청헤더를 살펴보면 

X-Requested-With 필드에 "XMLHttpRequest" 값이 포함된 

것을 종종 볼 수 있습니다.

 

- 여기서 헤더의, 접두사 "X"는 표준이 아님을 의미합니다. (Non-standard)

 

 

또한, 이 X-Requested-With 헤더는 커스텀(사용자 정의)헤더이며, 표준이 아닙니다.

 

하지만 다행히도 JQuery와 Prototype 같은 대중성 있는 라이브러리들이 이 헤더를 Ajax 전송 시 기본으로 추가하여 전송하고 있습니다.

 

또한, HTML5 명세로 넘어와서는 Origin 헤더의 유/무 로 판별이 가능해 졌지만, 이 방법 또한 IE 브라우저에서는 8+ 이상 부터 지원하고 있기 때문에 아직까지는 사용상 무리가 따르는 것이 사실입니다.

 

즉, 이를 완벽히 구현하기 위해서는 각 브라우저 환경에 맞도록 클라이언트와 서버 프로그램을 설계해야 하는 추가적인 작업이 들어갑니다.

 

- 이 방법에 대해서는 다음 포스트인 "CORS" 에서 더 자세히 다루도록 하겠습니다.(클라이언트 및 서버 구현)

 

 

 

 

아래 코드는 위에서 설명해 드린 "X-Requested-With"와 "Origin" 헤더 유/무를 통해 서버에서 Ajax 전송을 판별하는 과정입니다.

 

 

 

1. 동일 도메인일 경우:

 

서버측 코드:

 

 

1. if ((Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "xmlhttprequest")
2.     || Request.Headers["ORIGIN"] != null)
3. {
4.     Response.Write("ajax");
5.     Response.End();
6. }

 

 

GET 방식 실행결과:

 

위에서 언급한 바와같이 커스텀헤더인 "X-Requested-With" 헤더가 클라이언트 전송 시 포함되어있다.

 

 

 

 

 

POST 방식 실행결과:

 

위에서 언급한 바와같이 커스텀헤더인 "X-Requested-With" 헤더가 클라이언트 전송 시 포함되어있다.

 

 

 

 

 

 

 

 

 

2. 타 도메인일 경우:

 

서버측 코드:

 

 

1. Response.AddHeader("Access-Control-Allow-Origin", "*");
2. //Response.AddHeader("Access-Control-Allow-Origin", "http://m.fpscamp.com");
3.              
4. if (Request.HttpMethod.ToLower() == "options")
5. {
6.     //Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE, TRACE");
       //클라보고 Header나 Cookie등 믿고 보내라고 하는 뜻
7.     Response.AddHeader("Access-Control-Allow-Credentials", "true");
8.     //Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, charset, *");
       //이걸해야 OPTIONS를 해당 초동안 안올린다. (86400 = 하루로 해놔봤음)
          //이걸 안내려주면 계속 OPTIONS를 때려댄다.
9.     Response.AddHeader("Access-Control-Max-Age", "1728000");
10. }
11.  
12. if ((Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "xmlhttprequest")
13.     || Request.Headers["ORIGIN"] != null)
14. {
15.     Response.Write("ajax");
16.     Response.End();
17. }

 

 

 

GET 방식 실행결과:

 

위에서 언급한 바와같이 HTML5 명세부터 적용된 Origin 헤더가 클라이언트 전송 시 포함되어있다.

 

 

 

 

 

 

POST 방식 실행결과:

 

위에서 언급한 바와같이 HTML5 명세부터 적용된 Origin 헤더가 클라이언트 전송 시 포함되어있다.

 

 

 

 

 

 

참고 사이트:

 

http://parkmo.egloos.com/4155695