前面的话

  我们接收到的响应主体类型可以是多种形式的,包括字符串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,true);
xhr.responseType = 'arraybuffer';
//发送请求
xhr.send();
}
}
</script>

深入理解ajax系列第三篇——响应解码的更多相关文章

  1. 深入理解ajax系列第三篇

    前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象 ...

  2. 深入理解ajax系列第三篇——头部信息

    前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...

  3. 深入理解ajax系列第八篇——表单提交

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  4. 深入理解ajax系列第八篇

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  5. 深入理解ajax系列第四篇——请求实例

    前面的话 在使用ajax的过程中,常用的请求方式是GET和POST两种.本文将以实例的形式来详细说明这两种请求方式 GET GET是最常见的请求类型,最常用于向服务器查询某些信息.必要时,可以将查询字 ...

  6. 深入理解ajax系列第七篇——传递JSON

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将 ...

  7. 深入理解ajax系列第七篇

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将 ...

  8. 深入理解闭包系列第三篇——IIFE

    × 目录 [1]实现 [2]用途 前面的话 严格来讲,IIFE并不是闭包,因为它并不满足函数成为闭包的三个条件.但一般地,人们认为IIFE就是闭包,毕竟闭包有多个定义.本文将详细介绍IIFE的实现和用 ...

  9. 深入理解ajax系列第四篇——FormData

    前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...

随机推荐

  1. Xpath语法格式整理

    http://www.cnblogs.com/Loofah/archive/2012/05/10/2494036.html 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或 ...

  2. 使用Navicat Premium 链接本地数据库的方法

    在工作中,为了更方便的使用数据库,不免会用到Navicat Premium: 于是在重新安装电脑系统之后,原本想在其中链接一下本地数据库, 只是在链接途中要写的密码一项却不晓得应该写什么,想了很久密码 ...

  3. 内功心法 -- java.util.ArrayList<E> (5)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...

  4. CSS_position

    1. HTML Code: <div id="example"> <div id="div-before"> <p>id = ...

  5. mybatis 关于时间的问题与技巧

    oracle:     此执行是在oracle下! 关于日期和时间的问题,date只有日期   timestamp 带有时分秒 一  #号取值     1.date         insert in ...

  6. excel中VBA的使用

    遇到的问题 在工作中遇到了一点小小的问题,需要给我负责带的班级的同学们测试男生1000米,女生800米的成绩.表格是这样的: 体育成绩表 序号 班级 姓名 性别 男1000.女800 成绩 1 1 张 ...

  7. PHP面向对象——GD库实现图片水印和缩略图

    今天的实现目标就是使用GD库完成对图片加水印和图 片缩略图两个功能 动身前逻辑准备 属性: 路径 功能: 构造方法 生成水印的方法 获取 图片信息 获取位置信息(123 456 789) 创建图片资源 ...

  8. Swift2.0 UITextView 和 UITextFile 的使用

    在Swift2.0中,UITextFile 和 UITextView 的使用总体上和在OC中是一样的,今天只是给大家一段代码,然后说UITextView里面的光标位置的问题.先看他们使用的简单的代码 ...

  9. C#在win10(win8)下读写记事本注意事项

    分析:由于windows10或者windows8系统机制问题,C#在读写txt文件的时候,可能会出现如下问题(对路径“”的访问被拒绝): 解决: 1.我们在C盘下面新建立一个记事本,会发下类似如下报错 ...

  10. 关于企业选取ERP软件的建议

    笔者以前在广州的一家叫速达软件的公司从事实施维护的工作,该公司是一家专注于ERP软件的公司,主要做进销存与财务的管理软件. 期间也对于各大企业有过一些接触,看到很多公司在购买这款软件之后与这家公司发生 ...