[javascript] XmlHttpRequest.responseJSON에서 JSON 구문 분석

새로운 방법 I : fetch

TL; DR 동기 요청을 보내거나 이전 브라우저를 지원할 필요가없는 한이 방법을 권장합니다.

요청이 비동기 적이면 Fetch API 를 사용하여 HTTP 요청을 보낼 수 있습니다 . fetch API는 promise 와 함께 작동하며 JavaScript에서 비동기 워크 플로를 처리하는 좋은 방법입니다. 이 접근 방식 fetch()에서는 요청을 보내고 ResponseBody.json()응답을 구문 분석하는 데 사용합니다.

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonResponse) {
    // do something with jsonResponse
  });

호환성 : Fetch API는 IE11과 Edge 12 및 13에서 지원되지 않습니다 . 그러나 polyfill이 있습니다.

새로운 방법 II : responseType

Londeren 이 답변 에서 작성 했듯이 최신 브라우저에서는 responseType속성을 사용하여 예상되는 응답 형식을 정의 할 수 있습니다 . 그런 다음 response속성을 통해 구문 분석 된 응답 데이터에 액세스 할 수 있습니다 .

var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = req.response;
   // do something with jsonResponse
};
req.send(null);

호환성 : responseType = 'json'IE11에서는 지원되지 않습니다.

고전적인 방법

표준 XMLHttpRequest에는 responseJSON속성 이 없으며 responseText및 responseXML. 요청에 약간의 JSON으로 실제로 응답하는 한 responseText, JSON 코드를 텍스트로 포함해야하므로 다음을 사용하여 구문 분석하기 만하면 됩니다 JSON.parse().

var req = new XMLHttpRequest();
req.overrideMimeType("application/json");
req.open('GET', url, true);
req.onload  = function() {
   var jsonResponse = JSON.parse(req.responseText);
   // do something with jsonResponse
};
req.send(null);

호환성 :이 접근 방식은 XMLHttpRequest및 JSON.

JSONHttpRequest

을 사용하는 것을 선호 responseJSON하지만 JQuery보다 더 가벼운 솔루션을 원한다면 내 JSONHttpRequest를 확인하는 것이 좋습니다. 일반 XMLHttpRequest와 똑같이 작동하지만 responseJSON속성 도 제공합니다 . 코드에서 변경해야하는 모든 것은 첫 번째 줄입니다.

var req = new JSONHttpRequest();

JSONHttpRequest는 JavaScript 개체를 JSON으로 쉽게 보내는 기능도 제공합니다. 자세한 내용과 코드는 http://pixelsvsbytes.com/2011/12/teach-your-xmlhttprequest-some-json/ 에서 찾을 수 있습니다 .

전체 공개 : 저는 Pixels | Bytes의 소유자입니다. 내 스크립트가 문제에 대한 좋은 해결책이라고 생각하므로 여기에 게시했습니다. 링크를 제거하려면 댓글을 남겨주세요.