아약스 응답 디코딩

이전 단어

우리가 받는 응답 본문 유형은 StringString, ArrayBuffer object, 바이너리 Blob 객체, JSON 객체, javascirpt 파일 및 XML 문서를 나타내는 Document 객체 등 다음은 다양한 주제 유형

속성

에 대해 해당 응답 디코딩을 수행합니다. 먼저 XHR 객체의 속성을 이해하세요. 일반적으로 수신된 데이터가 문자열인 경우 데이터 수신에 가장 일반적으로 사용되는 속성이기도 한 response

seText를 사용하면 됩니다. 하지만 다른 형태의 데이터를 얻는 경우에는 responseText[responseText]

　를 사용하는 것이 적절하지 않을 수 있습니다. responseText 속성은

service

서버에서 받은 문자열을 반환하며, 이 속성은 읽기 전용입니다. 이 요청이 실패하거나 데이터가 불완전한 경우 이 속성은

null과 같습니다. 서버에서 반환된 데이터 형식이 JSON, 문자열, javascript

또는 XML인 경우 responseText 속성

[response]

을 사용할 수 있습니다. 응답 속성은 읽기 전용이며 수신된 데이터 본문을 반환합니다. 해당 유형은 ArrayBuffer, Blob, Document, JSON 객체 또는 XMLHttpRequest.responseType 속성

의 값에 따라 결정되는 문자열일 수 있습니다. 이 요청이 실패하거나 데이터가 불완전한 경우 이 속성은 다음과 같습니다. null과 동일

　[참고] IE9-browser는

[responseType]

　을 지원하지 않습니다. responseType 속성은 반환되는 데이터 유형(xhr.response)을 지정하는 데 사용됩니다. 서버

“”：字符串(默认值)
“arraybuffer”：ArrayBuffer对象
“blob”：Blob对象
“document”：Document对象
“json”：JSON对象
“text”：字符串

[responseXML]

　responseXML 속성은 서버에서 받은 Document 개체를 반환합니다. 이 속성은 읽기 전용입니다. 이 요청이 실패하거나 데이터가 불완전하거나 XML 또는 HTML로 구문 분석할 수 없는 경우 이 속성은 null

[overrideMimeType()]

과 같습니다. 이 메서드는 다음을 지정하는 데 사용됩니다. 서버 MIME 유형에 의해 반환된 데이터입니다. 이 메소드는 s

end

() 이전에

호출되어야 합니다. 전통적으로 서버에서 바이너리 데이터를 검색하려면 이 메소드를 사용하고 데이터를 인위적으로 변경해야 합니다.

텍스트 데이터로 위장

하지만 이 방법은 매우 번거로운 작업입니다. XMLHttpRequest 버전이 업그레이드된 후에는 responseType을 지정하는 방법이 일반적으로 사용됩니다.

String

서버에서 반환한 결과가 문자열인 경우 responseText 속성

을 사용하여 직접 구문 분석할 수 있습니다. ajax()

함수

의 캡슐화에 대해서는 이전 블로그에서 자세히 소개했으니 여기서는 자세히 다루지 않겠습니다. ajax를 사용하는 가장 일반적인 전송 방법은 JSON을 사용하는 것입니다. 문자 문자열인 경우 responseText 속성을 사용하여 직접 구문 분석하세요.

<button id="btn">取得响应</button><p id="result"></p><script>btn.onclick = function(){
    ajax({
        url:'p1.php',
        callback:function(data){
            result.innerHTML = data;
        }
    })
}</script>

<?php    //设置页面内容的html编码格式是utf-8，内容是纯文本
    header("Content-Type:text/plain;charset=utf-8");    
    echo &#39;你好，世界&#39;;?>

XML

JSON이 등장하기 전에는 XML 네트워크는 일반적으로 사용되는 데이터 전송 형식이지만 형식이 번거로워 거의 사용되지 않습니다

XML 문서를 수신할 때 responseXML을 사용하여 데이터를 구문 분석합니다

<button id="btn">取得响应</button><p id="result"></p><script>btn.onclick = function(){
    ajax({
        url:'p2.php',
        callback:function(data){            var obj = JSON.parse(data);            var html = '';            for(var i = 0; i < obj.length; i++){
                html+= &#39;<p>' + obj[i].title + ':' + obj[i].data + '</p>';
            }
            result.innerHTML = html;
            html = null;
        }
    })
}</script>

<?php    header("Content-Type:application/json;charset=utf-8");    
    $arr = [[&#39;title&#39;=>'颜色','data'=>'红色'],['title'=>'尺寸','data'=>'英寸'],['title'=>'重量','data'=>'公斤']];    echo json_encode($arr);?>

js

　JS 파일은 ajax를 통해서도 받을 수 있습니다. 여전히 responseText를 사용하여 데이터를 수신하지만 eval()을 사용하여 JavaScript에서

<button id="btn">取得响应</button><p id="result"></p><script>btn.onclick = function(){
    ajax({
        url:'p3.xml',
        callback:function(data){           var obj = data.getElementsByTagName('CD');           var html = '';           for(var i = 0; i < obj.length; i++){
                html += &#39;<p>唱片：' + obj[i].getElementsByTagName('TITLE')[0].innerHTML + '；歌手：' + obj[i].getElementsByTagName('ARTIST')[0].innerHTML  + '</p>';
           }
           result.innerHTML = html;
           html = null;
        }
    })
}function ajax(obj){    //method为ajax提交的方式，默认为'get'方法    obj.method = obj.method || 'get';    //创建xhr对象
    var xhr;    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }    //异步接受响应    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                //callback为回调函数，如果不设置则无回调                obj.callback && obj.callback(xhr.responseXML);
            }
        }
    }    //创建数据字符串，用来保存要提交的数据
    var strData = '';
    obj.data = true;    if(obj.method == 'post'){        for(var key in obj.data){
            strData += '&' + key + "=" + obj.data[key];
        }    
        //去掉多余的'&'        strData = strData.substring(1); 
        xhr.open('post',obj.url,true);        //设置请求头        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");        //发送请求        xhr.send(strData);    
    }else{        //如果是get方式，则对字符进行编成
        for(var key in obj.data){
            strData += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(obj.data[key]);
        }    
        //去掉多余的'&'，并增加随机数，防止缓存        strData = strData.substring(1) + '&'+Number(new Date());   
        xhr.open('get',obj.url+'?'+strData,true);        //发送请求        xhr.send();    
    }
}</script>

<CATALOG data-livestyle-extension="available"><CD>
    <TITLE>迷迭香</TITLE>
    <ARTIST>周杰伦</ARTIST></CD><CD>
    <TITLE>成都</TITLE>
    <ARTIST>赵雷</ARTIST></CD><CD>
    <TITLE>是时候</TITLE>
    <ARTIST>孙燕姿</ARTIST></CD></CATALOG>

blob

코드를 실행합니다. , Blob은 일반적으로 이진 데이터를 나타냅니다. 그러나 실제 웹

애플리케이션

에서 Blob은

이미지

바이너리 형식

업로드
및 다운로드에 가깝지만 거의 모든 파일의 바이너리 전송이 가능합니다

ajax를 사용하여 blob 데이터를 수신하려면 response를 사용하여 수신해야 하며 responseType을 'blob'로 설정해야 합니다.

[참고] IE10+ 브라우저와 완벽하게 호환하려면 xhr을 설정해야 합니다. xhr.open( ) 및 xhr.send() 메소드의 responseType

<button id="btn">取得响应</button><p id="result"></p><script>btn.onclick = function(){
    ajax({
        url:'p4.js',
        callback:function(data){
            eval(data);            var html = '';            for(var key in obj){
                html += '<p>' + key + ':' + obj[key] + '</p>';
            }
            result.innerHTML = html;
            html = null;
        }
    })
}</script>

arraybuffer

　　arraybuffer代表储存二进制数据的一段内存，而blob则用于表示二进制数据。通过ajax接收arraybuffer，然后将其转换为blob数据，从而进行进一步的操作

　　responseType设置为arraybuffer，然后将response作为new Blob()构造函数的参数传递，生成blob对象

<button id="btn">取得响应</button><p id="result"></p><script>btn.onclick = function(){
    ajax({
        url:'p5.gif',
        callback:function(data){            var img = document.createElement('img');
            img.onload = function(){
                URL.revokeObjectURL(img.src);
            }
            img.src = URL.createObjectURL(new Blob([data]));            if(!result.innerHTML){
                result.appendChild(img);
            }
            
       }
    })
}function ajax(obj){    //method为ajax提交的方式，默认为'get'方法    obj.method = obj.method || 'get';    //创建xhr对象
    var xhr;    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }    //异步接受响应    xhr.onreadystatechange = function(){        if(xhr.readyState == 4){            if(xhr.status == 200){                //callback为回调函数，如果不设置则无回调                obj.callback && obj.callback(xhr.response);
            }
        }
    }    //创建数据字符串，用来保存要提交的数据
    var strData = '';
    obj.data = true;    if(obj.method == 'post'){        for(var key in obj.data){
            strData += '&' + key + "=" + obj.data[key];
        }    
        //去掉多余的'&'        strData = strData.substring(1); 
        xhr.open('post',obj.url,true);        //设置请求头        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.responseType = 'arraybuffer';        //发送请求        xhr.send(strData);    
    }else{        //如果是get方式，则对字符进行编成
        for(var key in obj.data){
            strData += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(obj.data[key]);
        }    
        //去掉多余的'&'，并增加随机数，防止缓存        strData = strData.substring(1) + '&'+Number(new Date());   
        xhr.open('get',obj.url+'?'+strData,true);
        xhr.responseType = 'arraybuffer';        //发送请求        xhr.send();    
    }
}</script>

 

위 내용은 아약스 응답 디코딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!