ajax響應解碼
- PHPz原創
- 2017-03-12 15:34:391498瀏覽
前面的話
我們接收到的回應主體類型可以是多種形式的，包括字串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><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 '你好，世界';?>
JSON
使用ajax最常用的傳輸方式就是使用JSON字符串，直接使用responseText屬性解析即可
<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+= '<p>' + obj[i].title + ':' + obj[i].data + '</p>';
}
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><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 += '<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數據，需要使用response來接收，並且將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中文網其他相關文章！