深入理解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); ?> XMLXML在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',true); xhr.responseType = 'blob'; //设置请求头 xhr.setRequestHeader("content-type",true); xhr.responseType = 'blob'; //发送请求 xhr.send(); } } </script> arraybufferarraybuffer代表储存二进制数据的一段内存,而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',"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',true); xhr.responseType = 'arraybuffer'; //发送请求 xhr.send(); } } </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |