ajax response decoding

Previous words

The response body type we receive can be in many forms, including StringString, ArrayBuffer Object, binary Blob object, JSON object, javascirpt file and Document object representing the XML document, etc. The following will carry out corresponding response decoding for different subject types

Attributes

Before introducing response decoding, You must first understand the properties of the XHR object. Generally, if the received data is a string, just use responseseText, which is also the most commonly used attribute for receiving data. But if other types of data are obtained, it may not be appropriate to use responseText

[responseText]

The responseText attribute returns the string received from the service server, This property is read-only. If this request is unsuccessful or the data is incomplete, this attribute will equal null.

If the data format returned by the server is JSON, string, javascript or XML, you can use the responseText attribute

[response]

response attribute It is read-only and returns the received data body. Its type can be ArrayBuffer, Blob, Document, JSON object, or a string, which is determined by the value of the XMLHttpRequest.responseType attribute

If this request is unsuccessful or the data is incomplete, this attribute will be equal to null

　[Note]IE9-browser does not support

[responseType]

The responseType attribute is used to specify the type of data returned by the server (xhr.response)

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

[responseXML]

The responseXML attribute returns the Document object received from the server. This attribute is read-only. If this request is unsuccessful, or the data is incomplete, or cannot be parsed as XML or HTML, this attribute is equal to null

【overrideMimeType()】

This method is used to specify the data returned by the server MIME type. This method must be called before send(). Traditionally, if you want to retrieve binary data from the server, you must use this method to artificially change the

data type

Disguised as text data However, this method is very troublesome. After the XMLHttpRequest version is upgraded, the method of specifying responseType is generally used

String

If the result returned by the server is a string, it can be parsed directly using the responseText attribute

Regarding the encapsulation of the ajax()

function

, it has been introduced in detail in the previous blog, here I won’t go into details. Directly call ajax.js using

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

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

JSON

The most common transmission method using ajax is to use JSON characters String, you can parse it directly using the responseText attribute

<button>取得响应</button><p></p><script>btn.onclick = function(){
    ajax({
        url:&#39;p2.php&#39;,
        callback:function(data){            var obj = JSON.parse(data);            var html = &#39;&#39;;            for(var i = 0; i < obj.length; i++){
                html+= &#39;<p>&#39; + obj[i].title + &#39;:&#39; + obj[i].data + &#39;&#39;;
            }
            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

Before JSON appeared, XML was the network A commonly used data transmission format, but because its format is cumbersome, it is rarely used

When receiving XML documents, use responseXML to parse the data

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

<catalog><cd>
    <title>迷迭香</title>
    <artist>周杰伦</artist></cd><cd>
    <title>成都</title>
    <artist>赵雷</artist></cd><cd>
    <title>是时候</title>
    <artist>孙燕姿</artist></cd></catalog>

js

Use ajax to receive js files. Still use responseText to receive data, but use eval() to execute the code

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

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

blob

In JavaScript, Blob usually represents binary data. But in actual Web

applications

, Blob is more of a picturebinary formuploadand download, although it can achieve binary transmission of almost any file To use ajax to receive blob data, you need to use response to receive it, and set the responseType to 'blob'

[Note] To be fully compatible with IE10+ browsers, you need to set xhr.responseType in xhr.open( ) and the xhr.send() method

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

arraybuffer

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

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

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

 

The above is the detailed content of ajax response decoding. For more information, please follow other related articles on the PHP Chinese website!