예, CSS는 AJAX를 할 수 있습니다.다음은 방법.

좋아, 내가 제목에 거짓말을 좀 했어.AJAX는 비동기적인 자바스크립트와 XML의 줄임말로 CSS에서는 실현할 수 없다. 왜냐하면 자바스크립트는 CSS가 아니기 때문이다.나는 XML을 사용하여 데이터를 전송하지 않았다.그러나'AJAX'는 일반적으로 웹 사이트에서 데이터를 불러오고 발송하고 처리하는 것을 가리키며 전체 페이지를 다시 불러오지 않아도 서버에 내용을 나타낼 수 있다.이것은 HTML의 도움말만 있으면 CSS에서 가능합니다.다시 로드할 필요가 없습니다.다음은 방법.

HTML/CSS의 스토리지 및 논리

DOM을 사용하여 모르는 사이에 정보를 저장했을 수 있습니다.나는 어떻게 한 줄의 JS가 없는 상황에서 CSS/HTML로 옵션 카드를 실현하는지에 관한 좋은 방법을 보았다. <label>s, <input>s와 :checked 위선기를 사용하는 것이다.
기본적으로 다음과 같습니다. 각 옵션에 선택 단추를 만들고 숨긴 다음, .radio:not(checked)+.tab과 같은 선택기를 사용하여 선택하지 않은 옵션을 숨깁니다.이를 사용하여 다음과 같이 부울 값 또는 열거를 저장하고 확인할 수 있습니다.

<button><label for=myBoolean>Click to toggle</label></button>
<input type=checkbox class=hidden id=myBoolean>
The box is currently <span id=display />

<style>
#myBoolean:checked+#display::before {
  content: "checked"
}
#myBoolean:not(:checked)+#display::before {
  content: "unchecked"
}
.hidden {
  display: none
}
</style>

바이너리 변수와 이 변수를 바꾸는 단추가 있습니다.우리는 논리가 있다!하지만 꼬리표만 하는 것이 아니라면 혼란스러워질 것이다.

서버에 데이터 전송

HTML과 CSS는 어떤 일이 발생할 때 내용을 서버에 보낼 수 있는 방법이 없기 때문에 페이지를 다시 불러올 필요가 없다.물론 해커가 우리로 하여금 이 점을 할 수 있게 할 수 있다. 바로 이미지다.
HTML 파일에 이미지가 포함되어 있으면 미리 로드되므로 각 이미지 요청은 페이지를 로드할 때 수행되므로 비동기적으로 사용할 수 없습니다.다른 한편, CSS는 어떤 조건이나 선택기가 진짜일 때 이미지를 불러올 수 있다.매우 간단합니다.

:root {
  --request0: url(/ajax/request0);
  --request1: url(/ajax/request1);
  --request2: url(/ajax/request2);
}

button0:checked {
  background: var(--request0)
}
button1:checked {
  background: var(--request1)
}
button2:checked {
  background: var(--request2)
}

브라우저는 특정 시점에 이미지가 사용되는지 사전에 알지 못하므로 CSS는 조건에 따라 작동할 수 있으므로 이미지를 미리 로드하지 않습니다.그래서 저희가 이걸로 부탁을 할 수 있어요!

서버에서 데이터를 얻는 것은 간단한 방법이다

이렇게 하는 것은 매우 직접적이다.서버에서 텍스트가 있는 이미지를 렌더링하고 HTML에 포함할 수 있습니다.문제는 CSS에서 사용할 수 없다는 것입니다.결과는 사용자에게는 표시되지만 CSS에는 표시되지 않습니다.

<audio> 방식으로 서버에서 데이터 가져오기

나는 연구할 때 간결한 위조 선택기를 발견했다. :playing.그것은 완전히 자기가 말한 대로 한다. 재생 요소를 선택한다.따라서 오디오 파일을 true으로 전송하고 오디오 파일을 false으로 전송하지 않아도 됩니다.그러나 두 가지 경고가 있는데, 하나는 나쁜 것이고, 하나는 매우 나쁜 것이다.사용자는 반드시 오디오 플레이어를 클릭해야 한다. 이것은 매우 엉망이다.또 다른 일은 :playing 위조 선택기가 아직 어떤 브라우저에서도 실현되지 않았다는 것이다.그래서 그럴 리가 없어요.

서버에서 데이터를 얻는 것은 믿을 수 없는 저주 방식이다

하지만 다른 방법이 있습니다.Internet Explorer 8과 함께 사용할 수도 있습니다.네.
CSS의 content 속성은 <div>을 <img>으로 효과적으로 변환할 수 있습니다.당신은 그것을 이렇게 사용합니다:

div#myImage {
  content: url("https://path.to/image");
}

그러나 가장 큰 차이점은 선택기가 활성 상태일 때만 이미지를 불러올 수 있기 때문에 다른 방식으로 사용할 수 있다는 것이다.이것은 사용자만 데이터를 볼 수 있는 것입니까?잘못했어요.
다음은 서버에서 두 개의 그림을 불러오는 HTML 요소에 데이터를 넣는 엉터리 방법입니다.1x1 픽셀 이미지(false이라고 함)와 1x1 또는 1x0 픽셀 이미지(true이라고 함)는 전송하려는 내용에 따라 달라집니다.이제 HTML로 로드됩니다.

<input type=checkbox id=true >
<input type=checkbox id=false>

<button><label for=load>Do AJAX request</label></button>
<input type=checkbox id=load>
<div class=relative>
  <label for=false><div id=false></div></label>
  <label for=true ><div id=true ></div></label>
</div>
Click on the square above!

<style>
.relative { position: relative; height: 20px }
.relative > label { position: absolute }
.relative > label > div { width: 20px }
:checked + div #true  { content: url("/true");  z-index: 2 }
:checked + div #false { content: url("/false"); z-index: 1 }
</style>

현재 검은색 네모난 상자를 누르라고 알려 줍니다. true 이미지와 요소의 높이가 20px인지 0px인지에 따라 정확한 체크 상자의 라벨을 누르십시오.현재 우리는 더 많은 CSS 선택기로 복선상자를 읽을 수 있습니다. 가장 좋은 것은 IE8과 호환되는 것입니다.실제로 0x0 그림을 사용할 수 없습니다. 그래서 1000x1px 그림을 사용했습니다. 그러나 이것은 기본적으로 같습니다.
이것은 또 하나의 멋진 부작용이 있다. 당신이 원하는 시간을 기다리게 할 수 있다.서버에서 시간이 걸리는 일을 하려면 작업이 끝난 후에 true 이미지만 보낼 수 있습니다.
갈게요!저희 이제 AJAX가 생겼어요!

CSS-AJAX를 사용하여 예제 응용 프로그램 작성

이제 우리가 저주받은 창조물을 실제로 사용하자.나는 CSS AJAX와 충분한 상품이 있는지 확인하기 위해 아주 간단한 온라인 상점을 썼다.나는 이미 (어떤 이유로 영상이 고장 삽입에 작용하지 않는다. 미안하다: (), 또는 코드를 직접 시험해 보고 싶다면 this Glitch을 믹스할 수 있다.
읽어주셔서 감사합니다!