私たちが受け取るレスポンスボディタイプは、StringString、ArrayBufferobject、バイナリBlobオブジェクト、JSONobject、javascirptファイルと表現 Documentなど、さまざまな形式をとることができます。 XMLドキュメントのオブジェクトなど。以下は、さまざまなサブジェクト タイプに対応する応答デコードを実行します
応答デコードを紹介する前に、まず XHR オブジェクトのプロパティを理解する必要があります。一般に、受信したデータが文字列の場合は、responseseText を使用します。これは、データを受信するために最も一般的に使用される属性でもあります。ただし、他のタイプのデータが取得される場合、responseText の使用は適切ではない可能性があります
[responseText] responseText 属性は、serviceサーバーから受信した文字列を返します。この属性は読み取り専用です。このリクエストが失敗した場合、またはデータが不完全な場合、このプロパティは null と等しくなります。
サーバーから返されるデータ形式がJSON、string、javascript、XMLの場合、responseText属性
【レスポンス】を使用できます response属性は読み取り専用で、受信したデータ本体を返します。その型は、ArrayBuffer、Blob、Document、JSON オブジェクト、または文字列で、XMLHttpRequest.responseType 属性の値によって決まります このリクエストが失敗した場合、またはデータが不完全な場合、この属性は null に等しくなります[注意] IE9ブラウザは【responseType】をサポートしていません responseType属性は、サーバーから返されるデータのタイプ(xhr.response)を指定するために使用されます
“”:字符串(默认值) “arraybuffer”:ArrayBuffer对象 “blob”:Blob对象 “document”:Document对象 “json”:JSON对象 “text”:字符串
end() より前に呼び出す必要があります。ただし、サーバーからバイナリ データを取得する場合は、このメソッドを使用してデータ型
をテキスト データとして偽装する必要があります。非常に面倒なので、XMLHttpRequestのバージョンアップ後は、responseTypeを指定する方法が一般的に使われます
string
サーバーから返された結果が文字列の場合は、responseText属性を使用して直接解析できます
カプセル化については、以前のブログで詳しく紹介されているため、ここでは詳しく説明しません。 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 '你好,世界';?>
を使用する ajax を使用した最も一般的な送信方法は、responseText 属性を使用して直接解析できる JSON 文字列を使用することです
<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 は、JSON が登場する前はインターネット上で一般的に使用されていたデータ送信形式でしたが、形式が煩雑なため、ほとんど使用されませんでした
<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>
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, '性别':'男'}
JavaScript では、通常、Blob はバイナリ データを表します。しかし、実際の Web
バイナリ形式アップロードであり、ほぼすべてのファイルのバイナリ送信を実現できます Ajax を使用して BLOB データを受信する場合、受信するには応答を使用する必要がありますそれと、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代表储存二进制数据的一段内存,而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 中国語 Web サイトの他の関連記事を参照してください。