décodage de réponse ajax

Les mots précédents

Le type de corps de réponse que nous recevons peut prendre de nombreuses formes, notamment StringString, ArrayBuffer objet, objet Blob binaire, objet JSON, fichier javascirpt et objet Document représentant un document XML, etc. Ce qui suit effectuera le décodage de réponse correspondant pour différents types de sujets

attributs

Avant que n'introduise le décodage de réponse, vous devez comprenez d’abord les propriétés de l’objet XHR. Généralement, si les données reçues sont une chaîne, utilisez simplement réponseseText, qui est également l'attribut le plus couramment utilisé pour recevoir des données. Mais si d'autres types de données sont obtenus, l'utilisation de ResponseText peut ne pas être appropriée. Cette propriété est en lecture seule. Si cette demande échoue ou si les données sont incomplètes, cet attribut sera égal à

null

.

Si le format de données renvoyé par le serveur est JSON, string, javascript ou XML, vous pouvez utiliser l'attribut réponseText [response]

attribut de réponse Il est en lecture seule et renvoie le corps de données reçu. Son type peut être ArrayBuffer, Blob, Document, un objet JSON ou une chaîne, qui est déterminé par la valeur de l'attribut XMLHttpRequest.responseType Si cette requête échoue ou si les données sont incomplètes, cet attribut sera égal à null

　[Remarque] Le navigateur IE9 ne prend pas en charge

[responseType]

　 L'attribut ResponseType est utilisé pour spécifier le type de données (xhr.response) renvoyé par le serveur

[responseXML]

　L'attribut réponseXML renvoie l'objet Document reçu du serveur. Cet attribut est en lecture seule. Si cette demande échoue, ou si les données sont incomplètes, ou ne peuvent pas être analysées au format XML ou HTML, cet attribut est égal à null

[overrideMimeType()]

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

Cette méthode est utilisée pour spécifier les données renvoyées par le serveur de type MIME. Cette méthode doit être appelée

avant s

end

() Traditionnellement, si vous souhaitez récupérer des données binaires du serveur, vous devez utiliser cette méthode et modifier artificiellement les

données. tapez vers

Déguisé en données texte Cependant, cette méthode est très gênante. Après la mise à niveau de la version XMLHttpRequest, la méthode de spécification du type de réponse est généralement utilisée

String

Si le résultat renvoyé par le serveur est une chaîne, il peut être analysé directement à l'aide de l'attribut réponseText

A propos de l'encapsulation de la fonction ajax()

, il a été présenté en détail dans le blog précédent, je n’entrerai pas ici dans les détails. Appelez directement ajax.js en utilisant

JSON

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

La méthode de transmission la plus courante utilisant ajax Utilisez simplement une chaîne JSON et analysez-la directement à l'aide de l'attribut réponseText

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

XML

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

Avant l'émergence de JSON, XML était un format de transmission de données couramment utilisé sur Internet, mais comme son format est encombrant, il est rarement utilisé

Lors de la réception de documents XML, utilisez ResponseXML pour analyser les données

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

js

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

Vous pouvez également recevoir des fichiers js en utilisant ajax. Utilisez toujours ResponseText pour recevoir des données, mais utilisez eval() pour exécuter du code

<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

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

En JavaScript, Blob représente généralement des données binaires. Mais dans les
applications Web réelles

, Blob est plutôt une

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

image

forme binaire

téléchargement

et téléchargement, bien qu'il puisse réaliser une transmission binaire de presque n'importe quel fichier Pour utiliser ajax pour recevoir des données blob, vous devez utiliser la réponse pour les recevoir et définir le type de réponse sur 'blob' [Remarque] Pour être entièrement compatible avec le navigateur IE10, vous devez définir xhr. ResponseType dans xhr.open() et la méthode xhr.send()

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>

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!