Responsexml属性を分析して操作します
XMLHTTPREQUESTを使用してリモートXMLドキュメントの内容を取得すると、ResponseXMLプロパティはXMLドキュメントから解析されたDOMオブジェクトになります。これにより、操作と分析が困難です。 XMLドキュメントを分析する5つの主な方法を次に示します。
1. XPathを使用して、ドキュメントの定式化部分を見つけます。
2。jxonを使用して、JavaScriptオブジェクトツリーに変換します。
3. XMLを文字列またはオブジェクトに手動で解析してシリアル化します。
4. XMLSerializerを使用して、DOMツリーを文字列またはファイルにシリアル化します。
5. XMLドキュメントのコンテンツを事前に知っている場合は、Regexpを使用できます。 regexpでスキャンするときにNewlinesの影響を受けている場合は、すべてのNewLinesを削除することをお勧めします。ただし、XMLコードがわずかに変更された場合、アプローチが失敗する可能性があるため、このアプローチは「最後の手」です。
HTMLドキュメントを含むResponseTextプロパティを解析および操作します
注: HTMLは、W3C XMLHTTPREQUEST仕様のXMLHTTPREQUEST.RESPONSEXML属性を介して解析できます。詳細については、xmlhttprequestのHTMLをお読みください。
XMLHTTPREQUESTを使用してリモートエンドからHTMLページを取得すると、すべてのHTMLタグがResponsetExtプロパティに文字列として保存され、これらのタグを操作して解析することを困難にします。これらのHTMLタグを解析する3つの主な方法があります。
1。XMLHTTPREQUEST.RESPONSEXMLプロパティを使用します。
2。fragment.body.innerhtmlを介してドキュメントフラグメントにコンテンツを注入し、DOMのフラグメントを繰り返します。
3. HTMLドキュメントのコンテンツを事前に知っている場合は、regexpを使用できます。 regexpでスキャンするときにNewlinesの影響を受けている場合は、すべてのNewLinesを削除することをお勧めします。ただし、HTMLコードがわずかに変更された場合、アプローチが失敗する可能性があるため、このアプローチは「最後の手」です。
バイナリデータの処理
XmlhttpRequestは一般にテキストデータの送信と受信に使用されますが、実際にバイナリコンテンツを送信および受け入れることができます。 xmlhttprequestを使用して、バイナリデータを強制的に送信するための多くの適切にテストされた方法があります。 XMLHTTPREQUESTの.OVERIDEMIMETYPE()メソッドはソリューションですが、標準的な方法ではありません。
var oreq = new xmlhttprequest(); oreq.open( "get"、url、true); //バイナリStringoreq.overridemimeTypeとして処理されていないデータを取得( "テキスト/プレーン; charset = x-user-defined");/ * ... *//
ResponseTypeプロパティはXMLHTTPREQUESTレベル2仕様に追加されており、バイナリデータの送信と受信が容易になりました。
var oreq = new xmlhttprequest(); oreq.onload = function(e){var arraybuffer = xhr.response; // responseText Not/ * ... */} oreq.open( "get"、url、true); oreq.responsetype = "arraybuffer"; oreq.send();JavaScriptタイプアレイを使用してバイナリデータを受け入れます
XMLHTTPREQUESTオブジェクトのResponseTypeプロパティを設定することにより、サーバーから返される応答のデータ型を変更できます。使用可能な属性値は、空の文字列(デフォルト)、「arraybuffer」、「blob」、「document」、および "text"です。応答属性の値は、ResponseTypeプロパティの値によって異なります。これは、ArrayBuffer、Blob、Document、String、またはNullです(リクエストが完了または故障していない場合)
次の例では、バイナリ画像ファイルを読み取り、ファイルのバイナリネイティブバイトから8ビットの符号なし整数の配列が作成されています。
var oreq = new xmlhttprequest(); oreq.open( "get"、 "/myfile.png"、true); oreq.responsetype = "arraybuffer"; oreq.onload = function = function(oevent){var arraybuffer = oreq.response; //注:oreq.responsetext if(arraybuffer){var bytearray = new uint8array(arraybuffer); for(var i = 0; i <bytearray.bytelength; i ++){//配列内の各バイトの操作}}; oreq.send(null);上記の方法に加えて、Blobbuilder APIを使用して、ArrayBufferデータをBLOBオブジェクトに直接追加することもできます。 APIはまだ実験段階にあるため、特定のプレフィックスを追加する必要があります。
var blobbuilder = window.mozblobbuilder || window.webkitblobbuilder || window.msblobbuilder || window.blobbuilder; var oreq = new xmlhttprequest(); oreq.open( "get"、 "/myfile.png"、true); oreq.responsetype = "arraybuffer"; oreq.onload = function(oevent){al blobbuilder = new blobbuilder(); blobbuilder.append(oreq.response); var blob = blobbuilder.getBlob( "image/png"); // ...}; oreq.send();古いブラウザのバイナリデータを受け入れます
次のload_binary_resource()メソッドは、指定されたURLからバイナリデータをロードし、データを発信者に返すことができます。
function load_binary_resource(url){var req = new xmlhttprequest(); req.open(/'get/'、url、false); // xhrバイナリチャーセットOpt by Marcus Granado 2006 [http://mgran.blogspot.com] req.OverridemimeType(/'Text/Plain; charset = x-user-defined/'); req.send(null); if(req.status!= 200)return /' /'; req.responsetext;}を返します最も素晴らしい操作は5行目で、デフォルトのMIMEタイプを書き直し、ユーザー定義の文字セットを使用して、ブラウザに応答をプレーンテキストファイルとして扱うように強制します。これにより、ブラウザはデータを解析し、未処理のバイトコードを直接返すように指示されます。
var fileStream = load_binary_resource(url); var abyte = fileStream.charcodeat(x)&0xff; //ハイビットバイト(F7)を捨てた
上記の例では、リクエストによって返されたバイナリデータからxのバイトを取得します。有効なオフセット範囲は0からfileStream.length-1です。
詳細については、xmlhttprequestを使用してダウンロードファイルをご覧ください。ダウンロードファイルを表示します。
バイナリデータを送信します
xmlhttprequestオブジェクトの送信方法が拡張されており、バイナリデータは、arraybuffer、blob、またはfileオブジェクトを渡すだけで送信できます。
次の例では、テキストファイルを作成し、postメソッドを使用してファイルをサーバーに送信します。テキストファイル以外の他のバイナリデータ型を使用することもできます。
var oreq = new xmlhttprequest(); oreq.open( "post"、url、true); oreq.onload = function(oevent){//アップロードが完了した後。}; var bb = new blobbuilder(); //適切なプレフィックスが必要です:window.mozblobbuilderまたはwindow.webkitblobbuilderbb.append(/'abc123/'); oreq.send(bb.getblob(/'text/plain/'));タイプの配列をバイナリデータとして送信します
JavaScriptタイプ配列をバイナリデータとして送信できます。
var myarray = new arraybuffer(512); var longint8view = new uint8array(myArray); false); xhr.send(myarray);
上記の例では、512バイトの8ビット整数アレイを作成して送信します。もちろん、バイナリデータを送信することもできます。
進捗状況を監視します
DOMをサポートするProgressイベントモニタリングは、XMLHTTPREQUEST送信用であり、Web API Progressイベントの仕様に従います。これらのイベントはProgressEventインターフェイスを実装します。
var req = new xmlhttprequest(); // risted req.addeventlistener( "progress"、updateprogress、false); req.addeventlistener( "load"、false、false); req.addeventlistener( "error"、falsed、falsed、addeventener( "errer"、falsededeventener); false); req.open(...); ... //サーバーからクライアントへの転送の進行(ダウンロード)function updateprogress(evt){if(evt.lengthcomputable){var percentcomplete = evt.loaded/ evt.total; ...} else {//合計サイズが不明なので進行状況情報を計算できません}}注:open()を呼び出すようにリクエストする前に、イベントリスニングを追加する必要があります。それ以外の場合、進行状況イベントはトリガーされません。
前の例では、ProgressイベントはUpdateProgress()関数によって処理されるように指定されており、「コンテンツ長」ヘッダーから送信されたデータの全長(バイト)である、合計で送信されたバイトの総数を受信し、既に送信されたロードされています。ただし、長さの複雑なプロパティの値が偽の場合、バイトの総数は不明であり、合計値は0です。
進行状況イベントは、ダウンロードとアップロードの両方の送信に存在します。ダウンロード関連のイベントは、上記の例のように、Xmlhttprequestオブジェクトでトリガーされます。このように、関連するイベントのアップロードがxmlhttprequest.uploadオブジェクトでトリガーされます。
var req = new xmlhttprequest(); //リスナーreq.upload.addeventlistener( "progress"、updateprogress); req.upload.addeventlistener( "load"、transfercomplete); transferfailed); req.upload.addeventlistener( "abort"、transfercanceled); req.open();
注:ファイル:プロトコルを使用すると、進行状況イベントが無効です。
LoadEndイベントを使用して、3つのロードエンド条件すべて(中止、負荷、エラー)を検出します。
req.addeventlistener( "loadend"、loadend、false);
LoadEndイベントで受け取った情報が操作終了によって引き起こされる条件を正確に知る方法がないことに注意する必要があります。ただし、このイベントを使用して、すべてのトランスミッションの最後に処理できます。
XMLHTTPREQUESTオブジェクトは、リクエストのさまざまな段階でさまざまなタイプのイベントをトリガーするため、ReadyStateプロパティを確認する必要はありません。
send()が呼び出されると、単一のLoadStartイベントがトリガーされます。サーバーの応答がロードされている場合、XMLHTTPREQUESTオブジェクトには、通常50ミリ秒ごとに進行状況イベントが発生するため、これらのイベントを使用して、ユーザーにリクエストの進行についてフィードバックを提供できます。
リクエストが迅速に完了した場合、進行状況イベントをトリガーすることはありません。イベントが完了すると、ロードイベントがトリガーされます。
3つのイベントに対応するHTTP要求を完了できない3つのケースがあります。リクエストタイムアウトの場合、タイムアウトイベントがトリガーされます。リクエストが中止された場合、中止イベントがトリガーされます。リダイレクトが多すぎるようなネットワークエラーは、リクエストの完了を防ぎますが、これらが発生すると、エラーイベントがトリガーされます。
特定のリクエストに対して、ブラウザは、ロード、中止、タイムアウト、およびエラーイベントの1つ、および進行状況イベントのみをトリガーします。
if(/'onprogress/' in(new xmlhttprequest())){//進行状況イベントがサポートされているかどうかを検出var request = new xmlhttprequest(); request.onprogress = function(e){if(e.lengthcomputable){progress.innerhtml = math.round(100* e.loaded/e.total) +/'%/'; }}}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。