집 > 기사 > 웹 프론트엔드 > Ajax 요청 및 브라우저 캐싱에 대한 간략한 토론

Ajax 요청 및 브라우저 캐싱에 대한 간략한 토론

韦小宝원래의: 2018-01-13 11:42:031692검색

아래 편집기에서는 Ajax 요청 및 브라우저 캐싱에 대해 간략하게 설명합니다. 편집자는 꽤 괜찮다고 생각하므로 이제 Ajax 소스 코드를 여러분과 공유하고 참고용으로 제공하겠습니다. Ajax에 관심이 있다면 편집기를 따라 살펴보세요

최신 웹 애플리케이션에서는 프런트엔드 코드가 수많은 Ajax 요청으로 가득 차 있습니다. 브라우저 캐시를 Ajax 요청에 사용할 수 있다면 상당한 효과를 얻을 수 있습니다. 네트워크 요청을 줄이고 프로그램 응답 속도를 향상시킵니다.

1. Ajax 요청

jQueryframework를 사용하면 쉽게 Ajax 요청을 할 수 있습니다.

$.ajax({
  url : &#39;url&#39;,
  dataType : "xml",
  cache: true,
  success : function(xml, status){  
      }
});

4번째 코드에 주의하세요. 캐시: true, 표시 공식에서는 현재 요청에 대한 캐시가 있는 경우 캐시를 직접 사용해야 합니다. 속성 을 false로 설정하면 매번 서버에 요청합니다. Jquery의 설명은 다음과 같습니다.

false로 설정하면 요청한 페이지가 브라우저에 의해 캐시되지 않도록 강제됩니다. 쿼리 문자열 매개변수 "_=[TIMESTAMP]"를 URL에 추가합니다.

프론트 엔드에는 너무 많은 작업이 있습니다. 이런 식으로 Ajax 요청이 브라우저 캐시를 활용할 수 있습니까?

계속 시청하세요.

2.Http 프로토콜

HTTP 프로토콜의 헤더 부분은 클라이언트가 캐시를 수행해야 하는지 여부와 캐시를 수행하는 방법을 정의합니다. 자세한 내용은 14.9 캐시 제어 및 14.21 HTTP 헤더 필드 정의 만료를 참조하세요. 간단한 설명은 다음과 같습니다.

Cache-Control

Cache-control은 HTTP 캐시를 제어하는 데 사용됩니다(HTTP/1.0에서는 부분적으로 구현되지 않을 수 있으며 Pragma: no-cache만 구현됨). 데이터 패킷:

Cache-Control: 캐시 지시어

cache-directive는 다음과 같습니다.

요청 시 사용:

| "no-store"| -age " "=" delta-seconds

| "max-stale" [ "=" delta-seconds ]

| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if -cached "
| "cache-extension"

re
sponse가 사용됩니다:

| "public"| "private" [ "=" 9dfc9fa07ac339f3d4fe03717423126e field-name 9dfc9fa07ac339f3d4fe03717423126e ]| " no-cache" [ "=" 9dfc9fa07ac339f3d4fe03717423126e 필드 이름 9dfc9fa07ac339f3d4fe03717423126e ]

| "no-store"

-Public은 응답이 다음과 같을 수 있음을 나타냅니다. 모든 캐시 캐시에 캐시됩니다.

-비공개는 단일 사용자에 대한 전체 또는 부분 응답 메시지를 공유캐시

할 수 없음을 나타냅니다. 이를 통해 서버는 다른 사용자의 요청에 유효하지 않은 사용자의 부분 응답만 설명할 수 있습니다.

-no-cache는 요청 또는 응답 메시지를 캐시할 수 없음을 나타냅니다(HTTP/1.0은 Pragma의 no-cache로 대체됨).

-no-store는 중요한 정보가 실수로 공개되는 것을 방지하는 데 사용됩니다. 요청 메시지에 이를 보내면 요청 메시지와 응답 메시지 모두 캐싱을 사용하게 됩니다.

-max-age 클라이언트가 지정된 시간(초)보다 길지 않은 수명으로 응답을 받을 수 있음을 나타냅니다.

-min-fresh는 클라이언트가 현재 시간에 지정된 시간을 더한 것보다 짧은 응답 시간으로 응답을 받을 수 있음을 나타냅니다.

-max-stale은 클라이언트가 제한 시간 이후에 응답 메시지를 받을 수 있음을 나타냅니다. max-stale 메시지 값이 지정되면 클라이언트는 지정된 제한 시간 값을 초과하는 응답 메시지를

수신할 수 있습니다.

Expires

Expires는 캐시의 유효 시간을 나타내며 클라이언트가 이 시간 이전에 요청을 보낼 수 없도록 허용합니다. 이는 max-age의 효과와 동일합니다. 그러나 동시에 존재하는 경우 Cache-Control의 max-age에 의해 재정의됩니다.

형식: Expires = "Expires" ":" HTTP-date예: Expires: Thu, 01 Dec 1994 16:00:00 GMT

Last-Modified

Last-Modified는 문서의 마지막 끝을 나타냅니다. GMT 형식 수정 시간, 클라이언트가 이 URL을 두 번째로 요청할 때 이 시간 이후에 파일이 수정되었는지 묻는 속성이 헤더에 추가됩니다. 서버 측의 파일이 수정되지 않은 경우 반환 상태는 304이고 내용이 비어 있으므로 전송되는 데이터의 양이 절약됩니다.

3. 내 문제

요즘 웹 프론트엔드 작업을 하다가 클라이언트 측 Ajax가 서버 측에 데이터를 요청할 때마다 데이터의 즉시성이 그렇지 않은 것을 발견했습니다. 그 정도로 높으면 All이 요청될 때마다 이를 수행할 필요가 없습니다.

Ajax에 캐시를 true로 명시적으로 추가한 후에도 문제가 남아 있음을 발견했습니다. 그래서 서버 측 문제인 것으로 의심했습니다. 서버는 Jersey를 사용하여 Restful 기반 서비스를 구축했습니다.

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     return response.build();
}

添加Cache控制后，进行测试，一切OK。

最后的代码如下：

@GET
@Produces("application/xml")
public Response getProducts() {
     Response.ResponseBuilder response = Response.ok(data);
     // Expires 3 seconds from now..this would be ideally based
     // of some pre-determined non-functional requirement.
     Date expirationDate = new Date(System.currentTimeMillis() + 3000);
     response.expires(expirationDate);
     return response.build();
}

以上只是示例代码，还可以进行更精细的控制，例如使用CacheControl、Last-Modified等等。

Ajax 요청 및 브라우저 캐싱에 대한 간략한 토론

관련 기사