深入理解ajax系列第三篇——響應解碼
前面的話
我們接收到的響應主體型別可以是多種形式的，包括字串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 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,相關推薦
深入理解ajax系列第三篇——響應解碼
前面的話 我們接收到的響應主體型別可以是多種形式的，包括字串String、ArrayBuffer物件、二進位制Blob物件、JSON物件、javascirpt檔案及表示XML文件的Document物件等。下面將針對不同的主體型別，進行相應的響應解碼 屬性 在介紹響
深入理解ajax系列第四篇
blob selected 單選框 encode 展示 條目 種類型 %20 寫代碼 前面的話 現代Web應用中頻繁使用的一項功能就是表單數據的序列化，XMLHttpRequest 2級為此定義了FormData類型。FormData為序列化表單以及創建與表單格式相同的
深入理解ajax系列第八篇
row 用戶數據 方便 案例 默認方法 span target osi content 前面的話 在以前，網站的用戶與後端交互的主要方式是通過HTML表單的使用。表單的引入在1993年，由於其簡單性和易用性，直到電子商務出現之前一直保持著重要位置。理解表單提交，對於更深
深入理解ajax系列第七篇
gin 開發工程師 tar component fin hasattr mar tex 員工 前面的話 雖然ajax全稱是asynchronous javascript and XML。但目前使用ajax技術時，傳遞JSON已經成為事實上的標準。因為相較於XML而言，J
深入理解AJAX系列第四篇--跨域問題
我們先了解一下域名地址的組成：http:// www . google : 8080 / script/jquery.js http:// （協議號） www （子域名） google （主域名） 8080 （埠號） scrip
深入理解ajax系列第五篇
前面的話 一般地，使用readystatechange事件探測HTTP請求的完成。XHR2規範草案定義了進度事件Progress Events規範，XMLHttpRequest物件在請求的不同階段觸發不同型別的事件，所以它不再需要檢査readyState屬性。這個草案
深入理解定時器系列第三篇——定時器應用(時鐘、倒計時、秒錶和鬧鐘)
前面的話 本文屬於定時器的應用部分，分別用於實現與時間相關的四個應用，包括時鐘、倒計時、秒錶和鬧鐘。與時間相關需要用到時間和日期物件Date，詳細情況移步至此 時鐘 最簡單的時鐘製作辦法是通過正則表示式的exec()方法，將時間物件的字串中的時間部分截取出來，使用定時器重新整理即可 &
深入理解javascript函式進階系列第三篇——函式節流和函式防抖
前面的話 javascript中的函式大多數情況下都是由使用者主動呼叫觸發的，除非是函式本身的實現不合理，否則一般不會遇到跟效能相關的問題。但在一些少數情況下，函式的觸發不是由使用者直接控制的。在這些場景下，函式有可能被非常頻繁地呼叫，而造成大的效能問題。解決效能問題的處理辦法就是函式節流和函式防抖。本
深入理解javascript物件系列第三篇——神祕的屬性描述符
前面的話 對於作業系統中的檔案，我們可以駕輕就熟將其設定為只讀、隱藏、系統檔案或普通檔案。於物件來說，屬性描述符提供類似的功能，用來描述物件的值、是否可配置、是否可修改以及是否可列舉。本文就來介紹物件中神祕的屬性描述符 描述符型別 物件屬性描述符的型別分為兩種：資料屬性和訪問器屬性 資料屬
深入理解DOM事件機制系列第三篇——事件物件
前面的話 在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的資訊。所有瀏覽器都支援event物件，但支援方式不同。本文將詳細介紹事件物件 獲取事件物件 【1】一般地，event物件是事件程式的第一個引數 [注意
深入理解javascript選擇器API系列第三篇——HTML5新增的3種selector方法
前面的話 儘管DOM作為API已經非常完善了，但是為了實現更多的功能，DOM仍然進行了擴充套件，其中一個重要的擴充套件就是對選擇器API的擴充套件。人們對jQuery的稱讚，很多是由於jQuery方便的元素選擇器。除了前面已經介紹過的getElementsByClassNa
深入學習jQuery選擇器系列第三篇——過濾選擇器之索引選擇器
通用形式$(':eq(index)') $(':eq(index)')選擇器選擇索引等於index的元素(index從0開始)，返回單個元素索引 [注意]索引選擇器的索引和子元素選擇器的索引有明顯的不同 【1】索引選擇器索引從0開始，而子元素選擇器索引從1開始 【2】索引選擇器的索引是指定元素的索引，
深入理解AJAX系列第二篇--GET請求和POST請求的區別
我們在使用Ajax時,當我們向伺服器傳送資料時,我們可以採用Get方式請求伺服器,也可以使用Post方式請求伺服器.那麼,Get請求和Post請求的區別到底在哪呢？ GET請求 get是最常見的請求，最常用於向伺服器查詢某些資訊。必要時，可以將查詢字串引數追
深入理解計算機系統 第三章大略和第五章大略
$0 一個 編譯 存儲器 系統 32位 做了 ++i 擴展 這2章總結的很少，主要是覺得沒那麽重要。 1.2個操作數的指令，第二個操作數通常是目的操作數:movb a b，move a to b,而add a b,b+=a，指令分為指令類，如mov類：movb,movw,m
javascript面向對象系列第三篇——實現繼承的3種形式
編程語言 urn ash yahoo 實現 經典 ray obj 學習 前面的話 學習如何創建對象是理解面向對象編程的第一步，第二步是理解繼承。開宗明義，繼承是指在原有對象的基礎上，略作修改，得到一個新的對象。javascript主要包括類式繼承、原型繼承和拷貝繼承這
[轉]深入理解ajax系列——頭部消息
ive -type function ike 成功 form type 5.5 ebp 每個HTTP請求和響應都會帶有相應的頭部信息，其中有的對開發人員有用。XHR對象提供了操作頭部信息的方法。本文將詳細介紹HTTP的頭部信息 默認信息 默認情況下，在發送XHR
<深入理解計算機系統(第三版)》第一章
第一章 計算機系統漫遊 計算機系統是由硬體和系統軟體組成的,它們共同工作來執行應用程式. 1.1 資訊就是位+上下文 源程式實際上就是由一個值0和1組成的位(bit)序列,8個位被組織成一組,稱為位元組.每個位元組表示程式中某個文字字元. 大部分現代系統都是有ASCII標準表示文字字元,只由ASCII字
深入理解計算機系統 第三章 程式的機器級表示 part1
如題所示，這一章講解了程式在機器中是怎樣表示的，主要講組合語言與機器語言。 學習什麼，為什麼學，以及學了之後有什麼用 我們不用學習如何建立機器級的程式碼，但是我們要能夠閱讀和理解機器級的程式碼。 雖然現代的優化編譯器能夠很有效的將高階程式碼翻譯成機器級的程式碼，但是，為了
深入理解計算機系統 第三章 程式的機器級表示 part2
這周由於時間和精力有限，只讀一小節：3.4.4 壓入和彈出棧資料 棧是一種特殊的資料結構，遵循“後進先出”的原則，可以用陣列實現，總是從陣列的一端插入和刪除元素，這一端被稱為棧頂。 棧有兩個常用指令： push：把資料壓入棧中 pop：刪除資
深入理解計算機系統 第三章 程式的機器級表示 part3
這周看了劉老師提供的相關視訊，以及書中對應的章節“3.7 過程” 這一節分為執行時棧、轉移控制、資料傳送、棧上的區域性儲存、暫存器中的區域性儲存空間和遞迴過程這 6 個小節 其中前 3 小節看懂了一部分內容，後面兩個還沒來得及看，下週看完補上