ajax応答デコード

前の言葉

私たちが受け取るレスポンスボディタイプは、StringString、ArrayBufferobject、バイナリBlobオブジェクト、JSONobject、javascirptファイルと表現 Documentなど、さまざまな形式をとることができます。 XMLドキュメントのオブジェクトなど。以下は、さまざまなサブジェクト タイプに対応する応答デコードを実行します

属性

応答デコードを紹介する前に、まず XHR オブジェクトのプロパティを理解する必要があります。一般に、受信したデータが文字列の場合は、responseseText を使用します。これは、データを受信するために最も一般的に使用される属性でもあります。ただし、他のタイプのデータが取得される場合、responseText の使用は適切ではない可能性があります

[responseText]

responseText 属性は、

serviceサーバーから受信した文字列を返します。この属性は読み取り専用です。このリクエストが失敗した場合、またはデータが不完全な場合、このプロパティは null と等しくなります。

サーバーから返されるデータ形式がJSON、string、

javascript、XMLの場合、responseText属性

【レスポンス】を使用できます

response属性は読み取り専用で、受信したデータ本体を返します。その型は、ArrayBuffer、Blob、Document、JSON オブジェクト、または文字列で、XMLHttpRequest.responseType 属性の値によって決まります

このリクエストが失敗した場合、またはデータが不完全な場合、この属性は null に等しくなります

[注意] IE9ブラウザは

【responseType】をサポートしていません

responseType属性は、サーバーから返されるデータのタイプ(xhr.response)を指定するために使用されます

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

【responseXML】

responseXML属性はサーバー オブジェクトから受信したドキュメントを返します。このプロパティは読み取り専用です。このリクエストが失敗した場合、データが不完全である場合、または XML または HTML として解析できない場合、この属性は null に等しくなります

【overrideMimeType()】

このメソッドは、によって返されるデータの MIME タイプを指定するために使用されます。サーバー。このメソッドは s

end() より前に呼び出す必要があります。ただし、サーバーからバイナリ データを取得する場合は、このメソッドを使用してデータ型

をテキスト データ

として偽装する必要があります。非常に面倒なので、XMLHttpRequestのバージョンアップ後は、responseTypeを指定する方法が一般的に使われます

string

サーバーから返された結果が文字列の場合は、responseText属性を使用して直接解析できます

About ajax()

関数

カプセル化については、以前のブログで詳しく紹介されているため、ここでは詳しく説明しません。 ajax.js を直接呼び出して

<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

を使用する ajax を使用した最も一般的な送信方法は、responseText 属性を使用して直接解析できる JSON 文字列を使用することです

<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

XML は、JSON が登場する前はインターネット上で一般的に使用されていたデータ送信形式でしたが、形式が煩雑なため、ほとんど使用されませんでした

XML ドキュメントを受信する場合は、responseXML を使用してデータを解析します

<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

ajaxを使ってJSファイルを受け取ることもできます。データの受信には引き続き responseText を使用しますが、コードの実行には eval() を使用します

<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

JavaScript では、通常、Blob はバイナリ データを表します。しかし、実際の Web

アプリケーション

では、BLOB は

画像

バイナリ形式アップロードであり、ほぼすべてのファイルのバイナリ送信を実現できます Ajax を使用して BLOB データを受信する場合、受信するには応答を使用する必要がありますそれと、responseType を 'blob' に設定します [注] IE10 以降のブラウザと完全に互換性を持たせるには、xhr.responseType を xhr.open() メソッドと xhr.send() メソッドの間に設定する必要があります

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

 

以上がajax応答デコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。