深入理解ajax小火柴,深入理解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使用

取得响应

btn.onclick = function(){

ajax({

url:‘p1.php‘,

callback:function(data){

result.innerHTML = data;

}

})

}

//设置页面内容的html编码格式是utf-8，内容是纯文本

header("Content-Type:text/plain;charset=utf-8");

echo ‘你好，世界‘;

?>

JSON

使用ajax最常用的传输方式就是使用JSON字符串，直接使用responseText属性解析即可

取得响应

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+= ‘

‘ + obj[i].title + ‘:‘ + obj[i].data + ‘

‘;

}

result.innerHTML = html;

html = null;

}

})

}

header("Content-Type:application/json;charset=utf-8");

$arr = [[‘title‘=>‘颜色‘,‘data‘=>‘红色‘],[‘title‘=>‘尺寸‘,‘data‘=>‘英寸‘],[‘title‘=>‘重量‘,‘data‘=>‘公斤‘]];

echo json_encode($arr);

?>

XML

XML在JSON出现之前，是网络上常用的数据传输格式，但由于其格式较笨重，所以用的较少

接收XML文档时，使用responseXML来对数据进行解析

取得响应

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 += ‘

唱片：‘ + obj[i].getElementsByTagName(‘TITLE‘)[0].innerHTML + ‘；歌手：‘ + obj[i].getElementsByTagName(‘ARTIST‘)[0].innerHTML + ‘

‘;

}

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();

}

}

迷迭香

周杰伦

成都

赵雷

是时候

孙燕姿

js

使用ajax也可以接收js文件。仍然使用responseText来接收数据，但要使用eval()来执行代码

取得响应

btn.onclick = function(){

ajax({

url:‘p4.js‘,

callback:function(data){

eval(data);

var html = ‘‘;

for(var key in obj){

html += ‘

‘ + key + ‘:‘ + obj[key] + ‘

‘;

}

result.innerHTML = html;

html = null;

}

})

}

var obj = {

‘姓名‘:‘小火柴‘,

‘年龄‘:28,

‘性别‘:‘男‘

}

blob

在javascript中，Blob通常表示二进制数据。但在实际Web应用中，Blob更多是图片二进制形式的上传与下载，虽然其可以实现几乎任意文件的二进制传输

使用ajax接收blob数据，需要使用response来接收，并且将responseType设置为‘blob‘

[注意]要完全兼容IE10+浏览器，需要将xhr.responseType设置在xhr.open()和xhr.send()方法之间

取得响应

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();

}

}

arraybuffer

arraybuffer代表储存二进制数据的一段内存，而blob则用于表示二进制数据。通过ajax接收arraybuffer，然后将其转换为blob数据，从而进行进一步的操作

responseType设置为arraybuffer，然后将response作为new Blob()构造函数的参数传递，生成blob对象

取得响应

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();

}

}

原文：http://www.cnblogs.com/yujihaia/p/7464507.html