jQuery가없는 바닐라 ajax에 대한 가이드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery가없는 바닐라 ajax에 대한 가이드

Christopher Nolan

Feb 19, 2025 am 11:58 AM

jQuery가없는 바닐라 ajax에 대한 가이드 키 테이크 아웃

비동기 JavaScript 및 XML의 경우 짧은 Ajax는 부분 페이지 업데이트를 허용하여 전체 페이지 새로 고침의 필요성을 줄이고 더 많은 유동적 인 사용자 경험을 가능하게합니다. AJAX 요청의 기본 해부학에는 HTTP 요청에 필요한 클래스의 인스턴스를 작성하고 HTTP 요청 메소드 및 페이지의 URL을 지정하고 요청을 보냅니다. jQuery는 AJAX 요청을 단순화 할 수 있지만 항상 필요하지는 않습니다. 바닐라 JavaScript의 Ajax API는 상당한 개선을 거쳤으며 XMLHTTPREQUEST 사양은 이제 표준 관점에서 단일 엔터티로 취급되어 커뮤니티가 하나의 표준을 고수하겠다는 약속을 나타냅니다.

. 바닐라 Ajax는 유연하고 현대적인 프론트 엔드 API를 제공합니다. 요청 헤더를 설정하고 서버에서 예상되는 응답 유형을 지정하고 브라우저 캐시를 파열시킬 수 있습니다. Ajax는 한때 복잡한 프로세스 였지만 더 간단하고 사용자 친화적이되었습니다.

비동기 JavaScript 및 XML의 경우 Ajax는 부분 페이지 업데이트를 만드는 메커니즘입니다. 이를 통해 서버에서 나오는 데이터로 페이지 섹션을 업데이트 할 수 있으며 전체 새로 고침이 필요하지 않습니다. 이러한 방식으로 부분 업데이트를 만드는 것은 유체 사용자 경험을 만드는 데 효과적 일 수 있으며 서버에 부하를 줄일 수 있습니다.

이것은 기본 ajax 요청의 해부학입니다

여기서, 우리는 서버에 HTTP 요청을하기 위해 필요한 클래스의 인스턴스를 만들고 있습니다. 그런 다음 HTTP 요청 메소드를 첫 번째 매개 변수로 지정하여 두 번째로 요청하는 페이지의 URL을 지정합니다. 마지막으로, 우리는 NULL을 전달하는 Send 메소드를 매개 변수로 호출합니다. 요청을 게시하는 경우 (여기서 GET를 사용하고 있음)이 매개 변수는 요청과 함께 보내려는 데이터가 포함되어야합니다. 그리고 이것이 서버의 응답을 다루는 방법입니다.

OnreadyStateChange는 비동기식이므로 언제든지 호출됩니다. 이러한 유형의 기능은 콜백입니다. 일부 처리가 완료되면 호출됩니다. 이 경우 처리가 서버에서 발생합니다.

Ajax의 기본 사항에 대해 더 많이 배우고 자하는 사람들을 위해 MDN 네트워크에는 좋은 안내서가 있습니다. jQuery에게 jQuery가 아닌가? 그래서 좋은 소식은 위의 코드가 모든 최신 주요 브라우저에서 작동한다는 것입니다. 나쁜 소식은 꽤 복잡하다는 것입니다. 왝! 나는 이미 우아한 솔루션을 고정시키고 있습니다.

jQuery를 사용하면 전체 스 니펫을 다음과 같이 압축 할 수 있습니다

<.> 좋은. 그리고 실제로 당신을 포함하여 많은 사람들에게 jQuery는 Ajax와 관련하여 사실상의 표준이되었습니다. 그러나, 당신은 무엇을합니까? 이것은 사실 일 필요가 없습니다. jQuery는 못생긴 DOM API를 돌아 다니기 위해 존재합니다. 그러나 그것은 정말로 추악한가? 아니면 이해할 수 없습니까?

이 기사의 나머지 부분에서는 바닐라 JavaScript의 Ajax API의 개선 사항을 조사하고 싶습니다. 전체 사양은 W3C에서 찾을 수 있습니다. 이 사양에 대해 저를 놀라게하는 것은 이름입니다. 더 이상 "xmlhttprequest 레벨 2"가 아니라 "xmlhttprequest Level 1" - 두 사양 간의 2011 합병 결과입니다. 앞으로 표준 관점에서 단일 엔티티로 취급 될 것이며 생활 표준을 XMLHTTPREQUEST라고합니다. 이것은 커뮤니티가 하나의 표준을 고수하겠다는 약속이 있음을 보여줍니다. 이는 jQuery에서 벗어나려는 개발자에게 좋은 소식을 의미 할 수 있습니다.

. 그래서 시작하자…

설정 이 기사에서는 백엔드에서 node.js를 사용하고 있습니다. 예, 브라우저와 서버에 JavaScript가 있습니다. Node.js 백엔드는 Lean입니다. Github에서 전체 데모를 다운로드하고 따라가는 것이 좋습니다. 서버의 고기와 감자는 다음과 같습니다.

이것은 요청 URL을 확인하여 앱의 응답 방법을 결정합니다. 요청이 스크립트 디렉토리에서 온 경우 적절한 파일은 콘텐츠 유형의 응용 프로그램/javaScript와 함께 제공됩니다. 그렇지 않으면, 요청의 x- 요청과 헤더가 xmlhttprequest로 설정된 경우, 우리는 Ajax 요청을 처리하고 있으며 적절하게 응답 할 수 있습니다. 이 중 어느 것도 그렇지 않은 경우 파일보기/index.html이 제공됩니다. 우리는 서버에서 Ajax 응답으로 다이빙 할 때 주석 구조 섹션을 확장 할 것입니다. Node.js에서는 렌더와 httphandler로 약간의 리프팅을해야했습니다.

렌더링 함수는 요청 된 파일의 내용을 비동기로 읽습니다. Httphandler 함수에 대한 참조가 전달되어 콜백으로 실행됩니다. httphandler 함수는 오류 객체가 있는지 확인합니다 (예 : 요청 된 파일을 열 수없는 경우). 모든 것을 제공하는 것이 좋습니다. 그런 다음 적절한 HTTP 상태 코드 및 콘텐츠 유형으로 파일의 내용을 제공합니다. api 테스트 사운드 백엔드 API와 같은 경우 몇 가지 단위 테스트를 작성하여 작동하는지 확인해 봅시다. 이 테스트를 위해, 나는 Supertest와 Mocha를 도와주기 위해 전화를 걸고 있습니다 :

이 앱은 올바른 컨텐츠 유형 및 HTTP 상태 코드로 다른 요청에 응답하도록합니다. 종속성을 설치 한 후에는 NPM 테스트를 사용하여 명령 에서이 테스트를 실행할 수 있습니다. 인터페이스 이제 html에서 구축하는 사용자 인터페이스를 살펴 보겠습니다 :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

HTML은 멋지고 깔끔해 보입니다. 보시다시피, 모든 흥분은 JavaScript에서 일어나고 있습니다.

Onreadystate vs onload 표준 Ajax 책을 살펴보면 어디에서나 onreadystate를 찾을 수 있습니다. 이 콜백 기능에는 중첩 된 IFS와 많은 보풀이있어 머리 꼭대기에서 기억하기가 어렵습니다. OnreadyState 및 Onload Events를 헤드로 올리 봅시다.

이것은 콘솔의 출력입니다 :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

OnreadyState 이벤트가 사방에 해고됩니다. 그것은 각 요청의 시작 부분에, 마지막에 발사되며, 때로는 해고를 좋아하기 때문에 때로는 발사됩니다. 그러나 사양에 따르면, onload 이벤트는

가 에 성공할 때만 발생합니다. 따라서 OnLoad 이벤트는 몇 초 만에 잘 활용할 수있는 최신 API입니다. OnreadyState 이벤트는 거꾸로 호환됩니다. 그러나 Onload 이벤트는 선택 도구 여야합니다. Onload 이벤트는 jQuery의 성공 콜백처럼 보입니다. 이제 5 파운드의 아령을 제쳐두고 팔 컬로 이동할 때입니다.

요청 헤더 설정 jQuery는 커버 아래에 헤더를 요청하여 백엔드 기술이 AJAX 요청임을 알 수 있습니다. 일반적으로 백엔드는 적절한 응답을 보내는 한 GET 요청이 어디에서 오는지 신경 쓰지 않습니다. 동일한 웹 API로 Ajax 및 HTML을 지원하려면 편리합니다. 바닐라 ajax에서 요청 헤더를 설정하는 방법을 살펴 보겠습니다.

이를 통해 node.js : 에서 확인할 수 있습니다 jQuery가없는 바닐라 ajax에 대한 가이드 보시다시피 바닐라 Ajax는 유연하고 현대적인 프론트 엔드 API입니다. 요청 헤더를 사용할 수있는 많은 아이디어가 있으며 그 중 하나는 버전화입니다. 예를 들어,이 웹 API의 하나 이상의 버전을 지원하고 싶다고 가정 해 봅시다. 이것은 URL을 깨고 싶지 않고 클라이언트가 원하는 버전을 선택할 수있는 메커니즘을 제공 할 때 유용합니다. 요청 헤더를 다음과 같이 설정할 수 있습니다

그리고 백엔드에서 시도 :

우리는 가정 스트레치에 있고 땀을 끊지 않았습니다! Ajax에 대해 알아야 할 것이 무엇입니까? 글쎄, 몇 가지 깔끔한 속임수는 어떻습니까?

응답 유형 내가 작업하는 모든 것이 평범한 오래된 JSON 일 때 responeetext에 서버 응답이 포함되어 있는지 궁금 할 것입니다. 결과적으로 적절한 reponsetype을 설정하지 않았기 때문입니다. 이 Ajax 속성은 프론트 엔드 API에 서버에서 기대할 수있는 응답 유형을 알려주는 데 좋습니다. 자, 이것을 잘 활용합시다 :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

굉장합니다. JSON으로 구문 분석 해야하는 일반 텍스트를 돌려 보내는 대신 API에 기대할 사항을 알 수 있습니다. 이 기능은 거의 모든 최신 주요 브라우저에서 사용할 수 있습니다. 물론 jQuery는 이러한 유형의 변환을 자동으로 수행합니다. 그러나 우리가 이제 평범한 JavaScript에서 똑같이하는 편리한 방법을 가지고 있다는 것이 좋지 않습니까? Vanilla Ajax는 XML을 포함한 다른 많은 응답 유형을 지원합니다. 슬프게도, 인터넷 익스플로러에서 이야기는 그다지 훌륭하지 않습니다. IE 11 기준으로 팀은 아직 xhr.responsetype =‘json’에 대한 지원을 추가하지 않았습니다. 이 기능은 Microsoft Edge에 도착하는 것입니다. 그러나이 버그는 글을 쓰는 시점에서 거의 2 년 동안 탁월했습니다. 내 생각에 Microsoft의 사람들은 브라우저를 개선하기 위해 열심히 일했습니다. Spartan 프로젝트 일명 Microsoft Edge가 약속을 전달하기를 바랍니다. 아아,이 문제를 해결해야한다면 :

캐시 파열 사람들이 잊어 버리는 경향이있는 브라우저 기능 중 하나는 Ajax 요청을 캐싱하는 기능입니다. 예를 들어, Internet Explorer는 기본적으로이를 수행합니다. 나는 한 번 몇 시간 동안 이로 인해 왜 내 Ajax가 작동하지 않는지 알아 내려고 노력했습니다. 운 좋게도 jQuery는 기본적으로 브라우저 캐시를 파열시킵니다. 글쎄, 당신도 평범한 Ajax에서도 할 수 있고 그것은 매우 간단합니다 :

jQuery 문서에 따라 요청 끝에 타임 스탬프 쿼리 문자열을 추가하면됩니다. 이렇게하면 요청이 다소 고유하고 브라우저 캐시가 파열됩니다. http ajax 요청을 해고 할 때 이것이 어떻게 생겼는지 알 수 있습니다 :

타다! 드라마가없는 모든 것.

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

결론 300lb 벤치 프레스 바닐라 아즈 락스를 즐겼기를 바랍니다. 한 번에, Ajax는 끔찍한 짐승 이었지만 더 이상은 아닙니다. 실제로, 우리는 jQuery의 목발, ahem 족쇄없이 Ajax의 모든 기본 사항을 다루었습니다. 나는 Ajax를 불러 일으키는 간결한 방법으로 당신을 떠날 것입니다 :

그리고 이것은 응답의 모습입니다 :

잊지 마십시오. Github에서 전체 데모를 찾을 수 있습니다. 의견에 jQuery의 유무에 관계없이 Ajax의 생각을 듣는 것을 환영합니다.

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

jquery 없이 바닐라 ajax에 대한 자주 묻는 질문 (FAQ) 바닐라 ajax 란 무엇이며 jQuery ajax와 어떻게 다릅니 까?

바닐라 ajax는 jQuery 라이브러리에 의존하지 않고 비동기 웹 애플리케이션을 생성하기 위해 기본 JavaScript를 사용하는 것을 말합니다. JQuery Ajax는 Ajax를 처리하기위한 단순화 된 크로스 브라우저 호환 방법을 제공하지만 Vanilla Ajax는 기본 프로세스에 대한 더 많은 제어 및 이해를 제공합니다. jQuery와 같은 외부 라이브러리의 종속성을 줄이려면 훌륭한 옵션입니다. 바닐라 JavaScript를 사용하여 기본 Ajax 요청을 만드는 방법?

바닐라 JavaScript를 사용하여 기본 ajax 요청을 만드는 것은 xmlhttprequest 객체를 사용하는 것과 관련이 있습니다. 이 개체를 사용하면 HTTP 또는 HTTPS 요청을 웹 서버로 보내고 서버 응답 데이터를 스크립트에 다시로드 할 수 있습니다. 간단한 예는 다음과 같습니다.

var xhr = new xmlhttprequest (); xhr.onreadyStateChange = function () {
if (xhr.readystate == 4 && xhr.status == 200) console.log (json.parse (xhr.responsetext));
}
바닐라 ajax에서 오류를 어떻게 처리 할 수 있습니까? XMLHTTPREQUEST 객체의 ONERROR 이벤트 핸들러를 사용하여 바닐라 Ajax의 오류 처리를 수행 할 수 있습니다. 이 이벤트는 AJAX 요청을하는 동안 오류가 발생하면 트리거됩니다. 예는 다음과 같습니다.
var xhr = new xmlhttprequest (); xhr .onerRor = function () {
console.log ( "request 실패 "); };
xhr.send ();

게시물 요청에 바닐라 ajax를 사용할 수 있습니까?

예, 사후 요청에 바닐라 ajax를 사용할 수 있습니다. xmlhttprequest 객체의 열린 메소드는 HTTP 메소드를 첫 번째 인수로 받아들입니다. 따라서 "Get"을 "Post"로 바꿀 수 있습니다. 요청을 보내기 전에 setRequestheader 메소드를 사용하여 컨텐츠 유형 헤더를 설정하는 것을 잊지 마십시오.

게시물에서 JSON 데이터를 보내려면 Vanilla Ajax를 사용하여 게시물 요청에서 JSON 데이터를 보낼 수 있습니까? 요청에 따라 JSON 객체를 stringifor하고 요청 본문으로 보내야합니다. 또한 컨텐츠 유형 헤더를 Application/JSON으로 설정하십시오. 예는 다음과 같습니다.
var xhr = new xmlhttprequest (); xhr .SetRequestHeader ( "Content-Type", "application/json"); xhr.send (json.stringify ({key : "value"}));
바닐라 JavaScript에서 Ajax 요청을 어떻게 취소 할 수 있습니까?

XMLHTTPREQUEST 객체의 ABORT 메소드를 호출하여 AJAX 요청을 취소 할 수 있습니다. 이것은 즉시 요청이 종료됩니다.
바닐라 JavaScript를 사용하여 동기식 Ajax 요청을 만들 수 있습니까?
예, 스크립트 실행을 차단하고 웹 페이지를 응답하지 않도록 권장하지 않습니다. . 동기식 요청을하려면 열린 메소드에 세 번째 인수로 False를 전달하십시오.

Ajax 요청의 진행 상황을 모니터링하는 방법