아약스 이진 응답

아약스 이진 응답

안녕하세요. AJAX에서 바이너리 응답을 스트리밍할 수 있는 방법이 있는지 궁금합니다.이것이 궁극적인 해결책이 될 것입니다. 그렇지 않으면 바이너리 이미지를 파일로 구현한 후 해당 파일을 다른 URL로 사용자에게 스트리밍해야 합니다.

new Ajax.Request('/viewImage?id=123', {
  // request returns a binary image inputstream
  onSuccess: function(transport) {
      // text example
      // alert(transport.responseText)

      // QUESTION: is there a streaming binary response?
      $('imgElem').src = transport.responseBinary;
  },
  onFailure: function(transport) {
      // handle failure
  }
});

이진 데이터를 스트리밍할 수는 없지만 Ajax를 사용하여 이진 데이터를 검색할 수 있습니다.

이 방법은 Javascript Typed Arrays 또는 XMLHttpResponse overrideMimeType 해킹의 두 가지 방법 중 하나를 사용하여 가능합니다.MDN에 대한 좋은 기사를 읽어 보십시오. 여기서는 이진 데이터 전송 및 수신 예를 살펴봅니다.

Typeed Array 메서드는 다음과 같습니다.

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function (oEvent) {
  var arrayBuffer = oReq.response; // Note: not oReq.responseText
  if (arrayBuffer) {
    var byteArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteArray.byteLength; i++) {
      // do something with each byte in the array
    }
  }
};

oReq.send(null);

IE < 10, Firefox < 4, Chrome < 7, Safari < 5.1, Opera < 11.6에서 Type Array가 지원되지 않으며 모바일 지원이 불안정하지만 개선되고 있습니다.

두 번째 방법은 overrideMimeType이라는 XMLHtpRequest 메서드를 사용하여 이진 데이터를 수정되지 않은 상태로 통과시킬 수 있습니다.

var req = new XMLHttpRequest();
req.open('GET', '/myfile.png', false);
// XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
// do stuff with req.responseText;

분석되지 않은 문자열을 수 , 이에 되지 을 하면 을 하면 을 되지 var byte = filestream.charCodeAt(x) & 0xff;특정 바이트를 검색합니다.

이것은 (제가 직면하고 있는 문제에 대해 저를 올바른 방향으로 나아가게 하는데 도움을 준) Tom Ashworth의 답변의 확장입니다.이렇게 하면 파일 스트림(asp.net mvc를 사용하는 경우 FileStreamResult)을 가져와 img src로 설정할 수 있습니다.

var oReq = new XMLHttpRequest();
oReq.open("post", '/somelocation/getmypic', true );        
oReq.responseType = "blob";
oReq.onload = function ( oEvent )
{
    var blob = oReq.response;
    var imgSrc = URL.createObjectURL( blob );                        
    var $img = $( '<img/>', {                
        "alt": "test image",
        "src": imgSrc
    } ).appendTo( $( '#bb_theImageContainer' ) );
    window.URL.revokeObjectURL( imgSrc );
};
oReq.send( null );

기본적인 개념은 데이터가 변조되지 않고 반환되어 블롭에 저장된 다음 메모리에 있는 해당 개체에 URL이 생성된다는 것입니다.여기서 여기서 보세요.참고로 지원되는 브라우저.

즉시 이미지를 생성하려는 경우 할 수 있는 작업은 다음과 같습니다.

<img src="http://myurl/myfile.php?id=3" />

그러면 적절한 mim 타입으로 데이터를 전송할 수 있습니다.

정말로 이미지를 보내고 싶다면 HTML5 캔버스 태그를 보고 싶을 수도 있지만 크로스 플랫폼이기 때문에 excanvas가 어떻게 작동할지 잘 모르겠습니다.

캔버스에 쓸 수도 있지만, 그냥 img 태그를 사용하는 것이 더 효율적일 것입니다.

당신이 당신의 서비스에 전화할 때 당신은 요청해야 합니다.dataType: 'binary'대답.그러면 사용할 수 있습니다.saveAs(FileSaver.js) 다운로드를 트리거하거나 Object를 만듭니다.새 창에서 열 URL입니다.

그러나 $.ajax는 즉시 바이너리 컨텐츠를 다운로드 할 수 없습니다. UTF-8에서 바이너리 컨텐츠를 디코딩하여 손상시킵니다.jQuery 플러그인을 사용하여 이 문제를 해결하십시오.jquery.binarytransport.js

예제:

$.ajax({
    type: "POST",
    url: $("form#data").attr("action"),
    data: formData,
    dataType: 'binary',     //--> using jquery.binarytransport.js
    success: function (response) {
        // Default response type is blob
        
        saveAs(response, "test.pdf"); //--> using FileSaver.js

        let fileURL = URL.createObjectURL(blob);
        window.open(fileURL);        // open file in new window
    }
});

잘 생겼네요! :)

일반 텍스트, HTML, 이미지 등 원하는 모든 응답을 보낼 수 있습니다.무엇이든지!그것을 받았을 때 어떻게 처리할 것인지는 당신에게 달려있습니다.

그러나... 이진 이미지를 에 할당할 수 없습니다.<IMG>src 속성.URL을 이미지에 반환하고 대신 해당 URL을 지정하는 것이 좋습니다. 솔직히 SRC에 이미지를 포함하는 인코딩이 몇 가지 있지만 크로스 브라우저가 아니므로 이미지를 멀리하는 것이 좋습니다.

jQuery ajax를 사용하여 데이터가 손상되지 않고 바이너리 파일을 다운로드할 수 있었습니다.

xhrFields: {responseType: 'blob'}

언급URL : https://stackoverflow.com/questions/1645847/ajax-binary-response