Ajax-Antwortdekodierung

Die vorherigen Wörter

Der Antworttexttyp, den wir erhalten, kann in vielen Formen vorliegen, einschließlich StringString, ArrayPuffer Objekt, binäres Blob-Objekt, JSON-Objekt, Javascript-Datei und Dokument-Objekt, das ein XML-Dokument darstellt usw. Im Folgenden wird die entsprechende Antwortdekodierung für verschiedene Betrefftypen

Attribute

durchgeführt. Bevor die Antwortdekodierung einführt, müssen Sie Folgendes tun Verstehen Sie zunächst die Eigenschaften des XHR-Objekts. Wenn es sich bei den empfangenen Daten um eine Zeichenfolge handelt, verwenden Sie im Allgemeinen einfach „responseseText“, das auch das am häufigsten verwendete Attribut zum Empfangen von Daten ist. Wenn jedoch andere Datentypen abgerufen werden, ist die Verwendung von „responseText“

[responseText]

“ möglicherweise nicht angebracht. Das Attribut „responseText“ gibt die vom Dienst-Server empfangene Zeichenfolge zurück. Diese Eigenschaft ist schreibgeschützt. Wenn diese Anfrage nicht erfolgreich ist oder die Daten unvollständig sind, ist dieses Attribut gleich null.

Wenn das vom Server zurückgegebene Datenformat JSON, String, Javascript oder XML ist, können Sie das ResponseText-Attribut

[response]

verwenden Antwortattribut Es ist schreibgeschützt und gibt den empfangenen Datenkörper zurück. Sein Typ kann ArrayBuffer, Blob, Document, JSON-Objekt oder eine Zeichenfolge sein, die durch den Wert des XMLHttpRequest.responseType-Attributs bestimmt wird.

Wenn diese Anfrage nicht erfolgreich ist oder die Daten unvollständig sind, wird dieses Attribut verwendet gleich null

　[Hinweis] IE9-Browser unterstützt nicht

[responseType]

　 Das Attribut „responseType“ wird verwendet, um den Typ der zurückgegebenen Daten (xhr.response) anzugeben vom Server

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

[responseXML]

　Das Attribut „responseXML“ gibt das vom Server empfangene Dokumentobjekt zurück. Dieses Attribut ist schreibgeschützt. Wenn diese Anfrage nicht erfolgreich ist oder die Daten unvollständig sind oder nicht als XML oder HTML analysiert werden können, ist dieses Attribut gleich null

[overrideMimeType()]

Diese Methode wird zur Angabe verwendet Die vom Server zurückgegebenen MIME-Typen. Diese Methode muss vor s

end

() aufgerufen werden. Wenn Sie traditionell Binärdaten vom Server abrufen möchten, müssen Sie diese Methode verwenden und die -Daten künstlich ändern Typ zu Als Textdaten getarnt

Diese Methode ist jedoch sehr problematisch. Nach dem Upgrade der XMLHttpRequest-Version wird im Allgemeinen die Methode zur Angabe von ResponseType verwendet

String

Wenn das vom Server zurückgegebene Ergebnis ein String ist, kann er direkt mit dem Attribut „responseText“ analysiert werden.

Informationen zur Kapselung der Funktion ajax() wurde im vorherigen Blog ausführlich vorgestellt, hier werde ich nicht näher darauf eingehen. Rufen Sie ajax.js direkt mit

<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;;?>

JSON

auf. Die gebräuchlichste Übertragungsmethode mit Ajax Verwenden Sie einfach einen JSON-String und analysieren Sie ihn direkt mit dem ResponseText-Attribut

<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);?>

XML

Vor dem Aufkommen von JSON war XML ein häufig verwendetes Datenübertragungsformat im Internet. Da sein Format jedoch umständlich ist, wird es selten verwendet.

Verwenden Sie beim Empfang von XML-Dokumenten responsiveXML, um die Daten zu analysieren

<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>

js

Sie können js-Dateien auch mit Ajax empfangen. Verwenden Sie weiterhin ResponseText, um Daten zu empfangen, aber verwenden Sie eval(), um Code

<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>

var obj = {    '姓名':'小火柴',    '年龄':28,    '性别':'男'}

blob

In JavaScript repräsentiert Blob normalerweise Binärdaten. Aber in tatsächlichen Web-

-Anwendungen ist Blob eher eine binäre Bild--Form zum Hochladen und Herunterladen, obwohl damit fast jede Datei binär übertragen werden kann Um Ajax zum Empfangen von Blob-Daten zu verwenden, müssen Sie zum Empfangen eine Antwort verwenden und den Antworttyp auf „blob“ festlegen.

[Hinweis] Um vollständig mit IE10+-Browsern kompatibel zu sein, müssen Sie xhr festlegen. ResponseType in xhr.open( ) und der xhr.send()-Methode

<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(data);            if(!result.innerHTML){
                result.appendChild(img);
            }
            
        },
        method:'post'
    })
}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.responseType = 'blob';        //设置请求头        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.responseType = 'blob';        //发送请求        xhr.send();    
    }
}</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>

 

Das obige ist der detaillierte Inhalt vonAjax-Antwortdekodierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!