ajax響應解碼-js教程-PHP中文網

首頁

web前端

js教程

ajax響應解碼

PHPz

Mar 12, 2017 pm 03:34 PM

前面的話

　　我們接收到的回應主體類型可以是多種形式的，包括字串 String、ArrayBuffer 物件、二進位Blob物件、JSON物件、javascirpt檔案及表示XML文件的Document物件等。以下將針對不同的主體類型，進行對應的回應解碼

#屬性

　　在介紹回應解碼之前，要先了解XHR對象的屬性。一般地，如果接受的資料是字串，使用responseText即可，這也是最常用的用於接收資料的屬性。但如果取得了其他類型的數據，使用responseText可能就不太合適了

【responseText】

　　responseText屬性傳回從服務器接收到的字串，該屬性為唯讀。如果本次請求沒有成功或資料不完整，該屬性就會等於null。

　　如果伺服器傳回的資料格式是JSON、字串、javascript或XML，都可以使用responseText屬性

【response】

　　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>取得响应</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

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

<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

　　XML在JSON出現之前，是網絡上常用的資料傳輸格式，但由於其格式較笨重，所以使用的較少

　　接收XML文件時，使用responseXML來解析資料

<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

　　使用ajax也可以接收js檔案。仍然使用responseText來接收數據，但要使用eval()來執行代碼

<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

#　　在javascript中，Blob通常表示二進位資料。但在實際Web應用程式中，Blob更多是圖片二進位形式的上傳與下載，雖然其可以實現幾乎任意檔案的二進位傳輸

　　使用ajax接收blob數據，需要使用response來接收，並且將responseType設定為'blob'

　　[注意]要完全相容IE10+瀏覽器，需要將xhr.responseType設定在xhr.open( )和xhr.send()方法之間

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

以上是ajax響應解碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles