xmlhttprequest vs ajax의 Fetch API

코어 포인트

JavaScript에서 Fetch API와 XMLHTTPREQUEST는 모두 HTTP 요청을하는 데 사용되지만 Fetch API는 일반적으로 약속을 사용하기 때문에 더 강력하고 유연한 것으로 간주되므로 코드 및 오류 처리를 단순화합니다. 그러나 모든 브라우저가 Fetch API, 특히 이전 브라우저를 지원하는 것은 아닙니다.

xmlhttprequest 약속 부족으로 인해 더 오래되고 복잡하지만 모든 브라우저에서 널리 지원되며 기본적으로 쿠키를 보냅니다. 이는 쿠키가 인증 해야하는 서버 요청에 유용합니다.

Fetch API는 모든 XHR 기능을 지원하지 않으며 일부 옵션이 번거롭기 때문에 Ajax 기술을 완전히 대체하지는 않습니다. 또한 시간 초과를 지원하지 않으므로 오류 캡처 구현이 더 복잡합니다.
• Fetch API에는 한계가 있지만 JavaScript에서 HTTP 요청을하는 미래 방향입니다. 그러나 비교적 새롭고 끊임없이 변화하기 때문에 개발자는 향후 몇 년 동안주의해서 사용해야합니다.
• xmlhttprequest와 fetch api
xmlhttprequest는 2006 년까지 웹 표준이 아니었지만 대부분의 브라우저에서 구현되었습니다. Gmail (2004)과 Google Maps (2005)에서의 채택은 2005 년 Jesse James Garrett의 기사 "Ajax : 웹 응용 프로그램에 대한 새로운 접근 방식"으로 이어졌습니다. 이 새로운 용어는 개발자가 더 집중할 수있게 해줍니다. Ajax에서 Ajax에서
• > ajax는 비동기 JavaScript 및 XML의 약어입니다. "Async"는 확실히 정확하지만 :

vbscript와 flash도 선택 사항이지만 아마 JavaScript 일 것입니다.

XML은 당시에 매우 인기가 있었지만 페이로드는 XML 일 필요는 없습니다. 모든 데이터 형식을 사용할 수 있으며 오늘날 JSON은 일반적으로 선호됩니다. 우리는 이제"Ajax "를 일반적으로 서버에서 데이터를 가져오고 전체 페이지 새로 고침을 수행하지 않고도 DOM을 동적으로 업데이트하는 클라이언트 프로세스를 참조하는 모든 클라이언트 프로세스의 일반적인 용어로"ajax "를 사용합니다. AJAX는 대부분의 웹 응용 프로그램 및 SPA (Single Page Applications)의 핵심 기술입니다.

xmlhttprequest에 대한 심층적 인 이해

다음 JavaScript 코드는 XMLHTTPREQUEST (일반적으로 XHR로 약어)를 사용하여

https://www.php.cn/link/f589A241141007EB225CD68EED7BC06C :

에 대한 기본 HTTP GET 요청을 발행합니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

xmlhttprequest 객체에는 다른 많은 옵션, 이벤트 및 응답 속성이 있습니다. 예를 들어, 밀리 초의 시간 초과를 설정하고 감지 할 수 있습니다.

진행 이벤트는 장기 실행 파일 업로드를보고 할 수 있습니다

의 옵션 수는 눈부신 일 수 있으며 이전 버전의 XMLHTTPREQUEST에는 크로스 브라우저 불일치가 있습니다. 따라서 대부분의 라이브러리 및 프레임 워크는 jQuery.ajax () 메소드와 같은 복잡성을 처리하기위한 Ajax 래퍼 기능을 제공합니다.

// 设置超时
xhr.timeout = 3000; // 3 秒
xhr.ontimeout = () => console.log('timeout', xhr.responseURL);

<<> 빠른 Fetch에 대해 배우십시오 Fetch API는 XMLHTTPREQUEST의 현대적인 대안입니다. 공통 헤더, 요청 및 응답 인터페이스는 일관성을 제공하는 반면, Promise는 콜백없이 더 쉽게 체인 및 비동기/대기 할 수 있습니다. 위의 XHR 예제는 더 간단한 페치 기반 코드로 변환 될 수 있으며, 이는 반환 된 JSON을 구문 분석 할 수도 있습니다.

Fetch는 간단하고 우아하며 이해하기 쉽고 PWA 서비스 작업자에게 널리 사용됩니다. 고대 xmlhttprequest 대신 사용하지 않는 이유는 무엇입니까?

// 上传进度
xhr.upload.onprogress = p => {
  console.log( Math.round((p.loaded / p.total) * 100) + '%') ;
};

<<> 불행히도 웹 개발은 결코 그렇게 간단하지 않습니다. Fetch는 Ajax 기술을 완전히 대체하지 않았습니다 <🎜 🎜> <<> 브라우저 지원

<🎜 🎜> Fetch API는 꽤 잘 지원되지만 모든 버전의 Internet Explorer에서는 실패합니다. 2017 년 이전에 Chrome, Firefox 및 Safari 버전을 사용하는 사용자도 문제를 경험할 수 있습니다. 이 사용자는 사용자 기반의 작은 부분 만 구성하거나 주요 고객 일 수 있습니다. 코딩을 시작하기 전에 확인하십시오!

<<> 또한, 페치 API는 비교적 새롭고 성숙한 XHR 객체보다 더 연속적인 변화를받습니다. 이러한 업데이트는 코드를 중단하지는 않지만 향후 몇 년 동안 일부 유지 보수가 필요할 것으로 예상됩니다.

// jQuery Ajax
$.ajax('https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c')
  .done(data => console.log(data))
  .fail((xhr, status) => console.log('error:', status));

<<> 쿠키는 기본적으로 포함되지 않습니다 xmlhttprequest와 달리 모든 페치 구현이 쿠키를 보내는 것은 아니므로 응용 프로그램의 인증이 실패 할 수 있습니다. 이 문제는 두 번째 매개 변수에 전달 된 초기화 옵션을 변경하여 해결할 수 있습니다.

<<> 오류는 거부되지 않습니다 <🎜 🎜>

<,> 놀랍게도, HTTP 오류 (예 : 404 페이지 또는 500 내부 서버 오류)는 페치 약속이 거부되지 않습니다. 일반적으로 응답을 구문 분석하고 설정합니다. OK 상태를 False로 설정합니다.

할인은 요청을 완료 할 수없는 경우에만 발생합니다 (예 : 네트워크 고장). 이렇게하면 오류 캡처 구현이 더욱 복잡해집니다.

<🎜 🎜> <<> 타임 아웃은 지원되지 않습니다

fetch(
    'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c',
    { method: 'GET' }
  )
  .then( response => response.json() )
  .then( json => console.log(json) )
  .catch( error => console.error('error:', error) );

페치는 타임 아웃을 지원하지 않으며 요청은 선택한 브라우저가 지속됩니다. 예를 들어 다른 약속으로 페치를 래핑하려면 추가 코드가 필요합니다. … <🎜 🎜> <<> 중단 페치

xhr 요청은 xhr.abort ()를 사용하여 쉽게 종료 할 수 있으며 필요한 경우 xhr.onabort 함수를 사용하여 이러한 이벤트를 감지 할 수 있습니다.

몇 년 동안, 페치 중단은 불가능했지만 이제는 AbortController API를 구현하는 브라우저에서 지원됩니다. 이렇게하면 페치 초기화 객체로 전달 될 수있는 신호가 트리거됩니다.

페치는 컨트롤러를 호출하여 중단 될 수 있습니다. abort (); 약속은 거부되므로 .catch () 함수가 호출됩니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.php.cn/link/f589a241141007eb225cd68eed7bc06c');

// 请求状态更改事件
xhr.onreadystatechange = function() {

  // 请求完成？
  if (xhr.readyState !== 4) return;

  if (xhr.status === 200) {
    // 请求成功 - 显示响应
    console.log(xhr.responseText);
  }
  else {
    // 请求错误
    console.log('HTTP error', xhr.status, xhr.statusText);
  }
};

// 开始请求
xhr.send();

진보 없음

글을 쓰는 시점에서 Fetch는 진행 상황을 지원하지 않습니다. 따라서 파일 업로드 또는 유사한 큰 형태 제출 상태를보고 할 수 없습니다.

Fetch API를 사용한 xmlhttprequest?

시간 종료, 선택은 당신에게 있습니다 ...

응용 프로그램에 진행률 표시 줄을 업로드 해야하는 IE 클라이언트가없는 한. 더 간단한 Ajax 호출의 경우 xmlhttprequest는 더 낮고 복잡하며 함수를 랩핑해야합니다. 불행히도, 시간 초과의 복잡성에 대해 생각하기 시작하고, aborts 호출 및 오류 캡처에 대해서도 Fetch는 함수를 랩핑해야합니다.

Promise PolyFill과 함께 사용되는 Fetch Polyfill을 선택할 수 있으므로 IE에서 Fetch 코드를 작성할 수 있습니다. 그러나 XHR은 폴백으로 사용됩니다. 예를 들어 모든 옵션이 설정에 관계없이 전송되는 것은 아닙니다.

Fetch는 미래입니다. 그러나 API는 비교적 새롭고 모든 XHR 기능을 제공하지는 않으며 일부 옵션은 번거 롭습니다. 앞으로 몇 년 동안주의해서 사용하십시오.

xmlhttprequest에 대한 FAQS (FAQS) 및 Fetch Apis

xmlhttprequest와 Fetch API의 주요 차이점은 무엇입니까? xmlhttprequest 및 Fetch API는 모두 JavaScript에서 HTTP 요청을하는 데 사용됩니다. 그러나 그들은 여러 가지 방법으로 다릅니다. Fetch API는 더 강력하고 유연한 것으로 간주되는 새로운 기술입니다. 그것은 성공 여부에 관계없이 요청에 대한 약속을 반환합니다. Fetch는 또한 요청 및 응답 개체의 공통 정의를 제공합니다. 반면에 Xmlhttprequest는 나이가 많고 약속을 사용하지 않으므로 코드를 더욱 복잡하고 유지 관리하기가 어려울 수 있습니다. 요청 및 응답 개체에 대한 일반적인 정의는 없습니다.

Fetch API가 XMLHTTPREQUEST보다 낫습니까? Fetch API는 종종 약속 사용으로 인해 JavaScript로 HTTP 요청을하는 데 더 나은 선택으로 간주됩니다. 약속은 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API의 기능은 XMLHTTPrequest보다 강력하고 유연합니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.

Fetch API가 xmlhttprequest를 대체 할 수 있습니까?

예, 페치 API는 http 요청을하는 데 사용되는 javaScript의 XMLHTTPREQUEST를 대체 할 수 있습니다. Fetch API는 새로운 기술이며보다 강력하고 유연한 기능 세트를 보유하고 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. 그러나 XMLHTTPREQUEST는 여전히 널리 사용되고 지원되며 일부 경우 Fetch API를 지원하지 않는 이전 브라우저를 지원해야 할 때와 같이 더 나은 선택이 될 수 있습니다.

Fetch API를 사용하는 장점은 무엇입니까?

Fetch API는 XMLHTTPREQUEST에 비해 몇 가지 장점이 있습니다. 약속을 사용하여 코드를보다 간결하고 읽기 쉽고 오류 처리가 더 쉬워집니다. Fetch API에는 요청 및 응답 개체의 일반적인 정의를 포함하여보다 강력하고 유연한 기능 세트도 있습니다. 또한 XMLHTTPREQUEST는 그렇지 않지만 다른 소스에 대한 요청을 할 수 있습니다.

Fetch API 사용의 단점은 무엇입니까?

Fetch API 사용의 주요 단점 중 하나는 모든 브라우저가이를 지원하는 것은 아니라는 것입니다. 특히, 이전 브라우저는 Fetch API를 지원하지 않을 수 있습니다. 이 경우 xmlhttprequest 또는 polyfill을 사용해야 할 수도 있습니다. 또 다른 단점은 Fetch API가 기본적으로 쿠키를 보내지 않으므로 쿠키를 보내려면 "포함"에 대한 자격 증명 옵션을 수동으로 설정해야합니다.

xmlhttprequest를 사용하는 장점은 무엇입니까?

xmlhttprequest는 JavaScript로 HTTP 요청을하는 입증 된 기술입니다. 널리 지원되며 모든 브라우저에서 사용할 수 있습니다. Fetch API와 달리 Xmlhttprequest는 기본적으로 쿠키를 보냅니다. 쿠키가 인증 해야하는 서버에 요청할 때와 같은 경우와 같은 일부 경우 이점이 될 수 있습니다.

xmlhttprequest 사용의 단점은 무엇입니까?

xmlhttprequest는 약속을 사용하지 않으므로 코드를보다 복잡하고 유지 관리하기가 어려울 수 있습니다. 또한 요청 및 응답 개체에 대한 일반적인 정의가 없으며 다른 소스를 요청할 수 없습니다. XMLHTTPREQUEST는 Fetch API와 같은 새로운 기술에 비해 약간 구식으로 간주됩니다.

xmlhttprequest 및 fetch api를 선택하는 방법은 무엇입니까?

xmlhttprequest 및 fetch apis 선택은 특정 요구 사항과 지원 해야하는 브라우저에 따라 다릅니다. Fetch API를 지원하지 않는 이전 브라우저를 지원 해야하는 경우 XMLHTTPREQUEST가 더 나은 선택 일 수 있습니다. 그러나 최신 브라우저를 사용하고 있고 Fetch API의 클리너,보다 현대적인 구문 및보다 강력하고 유연한 기능 세트를 활용하려면 Fetch API가 더 나은 선택이 될 것입니다.

같은 프로젝트에서 XMLHTTPREQUEST와 FCTE API를 모두 사용할 수 있습니까?

예, 같은 프로젝트에서 xmlhttprequest와 fetch apis를 모두 사용할 수 있습니다. 특정 작업에 XMLHTTPREQUEST를 사용하고 특정 요구 사항과 지원 해야하는 브라우저를 기반으로 다른 작업에 대해 API를 가져올 수 있습니다. 그러나 일관성과 유지 보수의 용이성을 위해 이들 중 하나를 고수하는 것이 좋습니다.

JavaScript로 HTTP 요청을하기 위해 대체 XMLHTTPREQUEST 및 FCTE API가 있습니까? 예, XMLHTTPREQUEST 및 JavaScript에서 HTTP 요청을위한 API에 대한 몇 가지 대안이 있습니다. 여기에는 Axios, JQuery 's $ .Ajax 및 SuperAgent와 같은 라이브러리가 포함됩니다. 이 라이브러리는 XMLHTTPrequest 및 Fetch API에 비해 HTTP 요청을하고 추가 기능과 편의성을 제공하기 위해 더 높은 수준의 인터페이스를 제공합니다.

위 내용은 xmlhttprequest vs ajax의 Fetch API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!