집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 및 브라우저 캐시 사용에 대한 자세한 설명

Ajax 및 브라우저 캐시 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-04 09:34:121361검색

이번에는 Ajax 및 브라우저 캐시 사용에 대해 자세히 설명하겠습니다. Ajax 및 브라우저 캐시 사용 시 주의사항은 무엇인가요?

최신 웹 애플리케이션에서는 프런트엔드 코드가 수많은 Ajax 요청으로 넘쳐납니다. 브라우저 캐시를 Ajax 요청에 사용할 수 있다면 네트워크 요청이 크게 줄어들고 프로그램 응답 속도가 향상될 수 있습니다.

1. Ajax 요청

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

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

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

false로 설정하면 요청한 페이지가 브라우저에 의해 캐시되지 않습니다. 캐시를 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" [ "=" <"> field-name <"> ]| " no-cache" [ "=" <"> 필드 이름 <"> ]

| "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로 덮어쓰게 됩니다.

형식: 만료 = "만료" ":" HTTP 날짜예: 만료: 1994년 12월 1일 목요일 16:00:00 GMT

마지막 수정

Last-Modified用GMT格式表明了文档的最后修改时间，客户端第二次请求此URL时，会在头部加入一个属性，询问该时间之后文件是否有被修改过。如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。

3. 我的问题

这几天在做Web前端的时候，发现客户端的每次Ajax都会从服务器端请求数据，而这些数据的即时性没有那么高，没必要每次都请求。

在显式的给Ajax加上cache为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等等。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Ajax 및 브라우저 캐시 사용에 대한 자세한 설명

관련 기사