programing

AJAX 요청과 일반 브라우저 요청의 차이점

jooyons 2023. 3. 16. 21:19
반응형

AJAX 요청과 일반 브라우저 요청의 차이점

AJAX 요구와 다이렉트브라우저 요구는 (웹 페이지 호출 및 로드 방법에 따라) 차이가 있습니까?

즉, 다이렉트 서버측 요구는 클라이언트측 요구(브라우저에 의해 개시됨)와는 다른 방법으로 처리됩니까?

헤더에 약간의 차이가 있을 수 있지만 주요 동작의 차이는 클라이언트에 있습니다.

브라우저가 다음과 같이 정기적으로 요청을 하는 경우window.location.href = "index.html"현재 창을 지우고 서버 응답을 창에 로드합니다.

ajax 요청을 사용하면 현재 창/문서는 영향을 받지 않으며 javascript 코드는 요청 결과를 검사하고 원하는 결과를 수행할 수 있습니다(HTML을 페이지에 동적으로 삽입하거나 JSON을 해석하거나 페이지 로직을 사용하거나 XML을 해석하는 등).

서버는 다른 작업을 하지 않습니다.단, 클라이언트가 두 요청의 응답을 처리하는 방식일 뿐입니다.

AJAX 요청은 HTTP 헤더가 약간 다를 수 있는 경우를 제외하고 서버에 관한 한 "일반" 브라우저 요청과 동일합니다. 예를 들어 크롬은 다음을 전송합니다.

X-Requested-With:XMLHttpRequest

헤더가 표준화 되어 있는지, 브라우저마다 다른지, 브라우저마다 포함되어 있는지조차 알 수 없습니다.


편집: 그 헤더는 브라우저가 아닌 jQuery(및 다른 JS 라이브러리)에 의해 전송됩니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.send();

송신:

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie: ....
Host:stackoverflow.com
If-Modified-Since:Sat, 31 Dec 2011 01:57:24 GMT
Referer:http://stackoverflow.com/questions/8685750/how-does-an-ajax-request-differ-from-a-normal-browser-request/8685758
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Safari/535.11

디폴트로는 전혀 차이가 없다는 결론으로 이어집니다.

jQuery와 같은 일반적인 클라이언트 측 라이브러리에는X-Requested-Withheader in the requests 및 set to 로 설정합니다.XMLHttpRequestAJAX로 표시해 주세요.

이는 몇 년 전만 해도 충분히 표준으로 여겨져 온 것 같습니다(아마 jQuery의 대인기와 거의 모든 웹사이트에서 jQuery가 존재하기 때문일 것입니다).많은 서버 측 프레임워크는 수신된 요청에서 이 헤더를 체크하는 도우미까지 갖추고 있습니다.

ASP.NET MVC 5:

HttpRequestBase.IsAjaxRequest()

장고:

HttpRequest.is_ajax()

플라스크:

flask.Request.is_xhr

하지만, 프런트 엔드 세계에서의 jQuery의 통치의 끝과 표준화와 함께fetchAPI와 기본적으로는 이 목적을 위해 헤더를 추가하지 않는 다른 최신 클라이언트 측 라이브러리의 출현은 백엔드에서도 ASP와 함께 구식화되었습니다.NET MVC는 새로운 버전의 도우미를 포함하지 않으며 플라스크에는 사용되지 않는 것으로 표시된다.

사실 그렇지 않아요.가 Ajax를 합니다.X-Requested-With=XMLHttpRequestHTTP 더

브라우저는 항상 "text/html"이 요청의 "최적의" mimtype 수락인지 확인합니다.

파이어폭스의 예:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

물론 이것은 여전히 Accept mimtype으로 text/html을 사용하는 ajax 요청일 수 있지만, 어떤 클라이언트가 백엔드 api를 사용할지 알고 있을 때 신뢰할 수 있다는 것을 알게 되었습니다.

Blink 및 Gecko 탑재 브라우저(Firefox, Chrome, Edge 등)의 AJAX 요청은 AJAX 요청과 함께 다음 헤더를 전송합니다.

Sec-Fetch-Dest: empty

즉, 다음과 같습니다.

수신처는 빈 문자열입니다.이것은, 독자적인 값이 없는 행선지에 사용됩니다.예를 들어 fetch(), navigator.sendBeacon(), EventSource, XMLHttpRequest, WebSocket 등입니다.

Safari는 이 헤더를 기입시에 송신하지 않습니다(IE는 송신한 적이 없고, 송신할 예정도 없습니다만, IE는 전혀 관계가 없는 것이 됩니다).

사용자 에이전트(브라우저)는 XHR 헤더를 전송합니다.이 헤더는 다음과 같이 php에서 취득할 수 있습니다.

$_SERVER['HTTP_X_REQUESTED_WITH']

언급URL : https://stackoverflow.com/questions/8685750/difference-between-ajax-request-and-a-regular-browser-request

반응형