深刻理解ajax系列第三篇——響應解碼

時間  2019-11-19
標籤 深刻 理解 ajax 系列 第三 響應 解碼 欄目 Ajax 简体版
原文   原文鏈接

前面的話

　　咱們接收到的響應主體類型能夠是多種形式的，包括字符串String、ArrayBuffer對象、二進制Blob對象、JSON對象、javascirpt文件及表示XML文檔的Document對象等。下面將針對不一樣的主體類型，進行相應的響應解碼javascript

 

屬性

　　在介紹響應解碼以前，要先了解XHR對象的屬性。通常地，若是接受的數據是字符串，使用responseText便可，這也是最經常使用的用於接收數據的屬性。但若是獲取了其餘類型的數據，使用responseText可能就不太合適了php

【responseText】html

　　responseText屬性返回從服務器接收到的字符串，該屬性爲只讀。若是本次請求沒有成功或者數據不完整，該屬性就會等於null。java

　　若是服務器返回的數據格式是JSON、字符串、javascript或XML，均可以使用responseText屬性ajax

【response】json

　　response屬性爲只讀，返回接收到的數據體。它的類型能夠是ArrayBuffer、Blob、Document、JSON對象、或者一個字符串，這由XMLHttpRequest.responseType屬性的值決定瀏覽器

　　若是本次請求沒有成功或者數據不完整，該屬性就會等於null緩存

　　[注意]IE9-瀏覽器不支持服務器

【responseType】網絡

　　responseType屬性用來指定服務器返回數據(xhr.response)的類型

「」：字符串(默認值)
「arraybuffer」：ArrayBuffer對象
「blob」：Blob對象
「document」：Document對象
「json」：JSON對象
「text」：字符串

【responseXML】

　　responseXML屬性返回從服務器接收到的Document對象，該屬性爲只讀。若是本次請求沒有成功，或者數據不完整，或者不能被解析爲XML或HTML，該屬性等於null

【overrideMimeType()】

　　該方法用來指定服務器返回數據的MIME類型。該方法必須在send()以前調用

　　傳統上，若是但願從服務器取回二進制數據，就要使用這個方法，人爲將數據類型假裝成文本數據

　　可是，這種方法很麻煩，在XMLHttpRequest版本升級之後，通常採用指定responseType的方法

 

字符串

　　若是服務器返回的結果是一個字符串，則直接使用responseText屬性解析便可

　　關於ajax()函數的封裝，已經在上一篇博客中詳細介紹過，這裏就再也不贅述。直接調用ajax.js使用

<button id="btn">取得響應</button>
<div id="result"></div>
<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 '你好，世界';
?>

JSON

　　使用ajax最經常使用的傳輸方式就是使用JSON字符串，直接使用responseText屬性解析便可

<button id="btn">取得響應</button>
<div id="result"></div>
<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+= '<div>' + obj[i].title + ':' + obj[i].data + '</div>';
            }
            result.innerHTML = html;
            html = null;
        }
    })
}
</script>
<?php
    header("Content-Type:application/json;charset=utf-8");    
    $arr = [['title'=>'顏色','data'=>'紅色'],['title'=>'尺寸','data'=>'英寸'],['title'=>'重量','data'=>'公斤']];
    echo json_encode($arr);
?>

XML

　　XML在JSON出現以前，是網絡上經常使用的數據傳輸格式，但因爲其格式較笨重，因此用的較少

　　接收XML文檔時，使用responseXML來對數據進行解析

<button id="btn">取得響應</button>
<div id="result"></div>
<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 += '<div>唱片：' + obj[i].getElementsByTagName('TITLE')[0].innerHTML + '；歌手：' + obj[i].getElementsByTagName('ARTIST')[0].innerHTML  + '</div>';
           }
           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>
<div id="result"></div>
<script>
btn.onclick = function(){
    ajax({
        url:'p4.js',
        callback:function(data){
            eval(data);
            var html = '';
            for(var key in obj){
                html += '<div>' + key + ':' + obj[key] + '</div>';
            }
            result.innerHTML = html;
            html = null;
        }
    })
}
</script>
var obj = {
    '姓名':'小火柴',
    '年齡':28,
    '性別':'男'
}

blob

　　在javascript中，Blob一般表示二進制數據。但在實際Web應用中，Blob更可能是圖片二進制形式的上傳與下載，雖然其能夠實現幾乎任意文件的二進制傳輸

　　使用ajax接收blob數據，須要使用response來接收，而且將responseType設置爲'blob'

　　[注意]要徹底兼容IE10+瀏覽器，須要將xhr.responseType設置在xhr.open()和xhr.send()方法之間

<button id="btn">取得響應</button>
<div id="result"></div>
<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>
<div id="result"></div>
<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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程