JQueryを使用したCDATAを使用したXMLの解析
-
19-08-2019 - |
質問
編集:ここで2つのことが欠けていました。 <!> quot; Content-Type:text / xml <!> quotの欠如; AJAX呼び出しによって返されたヘッダーで、JQueryは返されたデータをドキュメントとして処理できませんでした。正しく処理されると、このコードは正しく解析され、インデックスとプロジェクト名のみが出力されます。
$("a.getprojects").click(function(d){
d.preventDefault();
var api_token = $("#token").val();
var form_fbod = $("#fbod").val();
$.post("fbinfo.php", {fbod: form_fbod, token: api_token, cmd : 'listProjects', extra:''}, function(returned_xml) {
var output = '';
$(returned_xml).find("project").each(function(){
var project = $(this);
output += project.find("ixProject").text();
output += " ";
output += project.find("sProject").text();
output += "\n";
});
$("#output").val(output);
});
});
オリジナル: FogBugz API とJQueryを組み合わせて、クールな小さなツールになると思いますが、JQueryの制限に直面しています。 CDATAタグはそれを混乱させるようです。
使用しているコードは次のとおりです。
$("a.getprojects").click(function(d){
d.preventDefault();
var api_token = $("#token").val();
var form_fbod = $("#fbod").val();
$.post("fbinfo.php", {fbod: form_fbod, token: api_token, cmd : 'listProjects', extra:''}, function(xml) {
var output = xml;
$(xml).find("project").each(function(){
var project = $(this);
output += "\n\n";
output += project.html();
});
$("#output").val(output);
});
});
そして、ここに私が得る出力があります:
<?xml version="1.0" encoding="UTF-8"?><response>
<projects>
<project>
<ixProject>2</ixProject>
<sProject><![CDATA[Inbox]]></sProject>
<ixPersonOwner>2</ixPersonOwner>
<sPersonOwner><![CDATA[Rich]]></sPersonOwner>
<sEmail><![CDATA[rich@example.com]]></sEmail>
<sPhone></sPhone>
<fInbox>true</fInbox>
<ixGroup>1</ixGroup>
<iType>1</iType>
<sGroup><![CDATA[Internal]]></sGroup>
</project>
<project>
<ixProject>1</ixProject>
<sProject><![CDATA[Sample Project]]></sProject>
<ixPersonOwner>2</ixPersonOwner>
<sPersonOwner><![CDATA[Rich]]></sPersonOwner>
<sEmail><![CDATA[rich@example.com]]></sEmail>
<sPhone></sPhone>
<fInbox>false</fInbox>
<ixGroup>1</ixGroup>
<iType>1</iType>
<sGroup><![CDATA[Internal]]></sGroup>
</project>
</projects>
</response>
<ixproject>2</ixproject>
<sproject></sproject>
<ixpersonowner>2</ixpersonowner>
<spersonowner></spersonowner>
<semail></semail>
<sphone></sphone>
<finbox>true</finbox>
<ixgroup>1</ixgroup>
<itype>1</itype>
<sgroup></sgroup>
<ixproject>1</ixproject>
<sproject></sproject>
<ixpersonowner>2</ixpersonowner>
<spersonowner></spersonowner>
<semail></semail>
<sphone></sphone>
<finbox>false</finbox>
<ixgroup>1</ixgroup>
<itype>1</itype>
<sgroup></sgroup>
JQueryに固有のXML解析では、CDATA要素のコンテンツが破棄されるようです。 FogBugzは、ほとんどの場所で特殊文字と句読点を許可するため、ほとんどの文字列データをCDATAタグに入れます。出力をCDATAタグで囲むことにより、APIを介して有効なデータを送り返すことが比較的確実になります。 XMLのPHP解析は問題なく機能します。私のオンライン調査では、これについて不満を言う人が数人いますが、仕事はあまりありません。 JQueryの拡張性があれば、そこに何かがあると思います。他の誰かがこれを達成しましたか?
解決
JQueryにネイティブなXML解析は
jQueryにネイティブなXML解析はありません。標準のXMLHttpRequest.responseXMLプロパティを使用して、応答のXML DOMを取得するだけです。
CDATA要素の内容を破棄します
どのContent-Typeで応答を送信していますか?なぜなら、XMLとしてまったく解析されていないのではないかと思うからです。この場合、jQueryはXML DOMではなく、ドキュメントの文字列を返します。
次に<!>#8220; $(xml)<!>#8221;を呼び出すと、そのstring(*)<!>#8201; <!>#8212; <!からドキュメントコンテンツが作成されます。 >#8201; HTMLとして解析され、XMLではありません 。 HTMLにはCDATAセクションのようなものはないので、ブラウザはそれらを破棄するか、コメントとして扱うかもしれません。
<!>#8220; project.html()<!>#8221;ドキュメントがXMLの場合、実際には機能しません。 <!>#8216; html()<!>#8217;標準の<!>#8216; innerHTML <!>#8217と同じものを返すだけです。 property(**)、これはHTMLドキュメントでのみ機能します。 XML要素では未定義です。
出力をCDATAタグで囲むことにより、APIを介して有効なデータを送り返すことが比較的確実になります。
まあ、<!>#8216;比較的<!>#8217 ;:データに<!>#8220;]] <!> gt; <!>#8221;が含まれている場合あなたはまだ失います。 <!> lt;![CDATA [セクションは、ハンドオーサリングの書き込み可能性を改善する松葉杖として意図されています。マシン生成XMLは、実際には通常の方法でエンティティエンコーディングを使用するだけです。通常、サーバーアプリは適切なXMLツールを使用して応答を生成する必要があります。この場合、これは自動的に行われます。
(*:jQueryがドキュメントフラグメントの作成とCSSの選択を同じ関数に押し込める必要があると感じるとき、私は理解していません。これらは、ここで起こったように、混乱したくない完全に異なる操作です)
(**:実際には、正規表現を使用して最初にjQueryカスタム属性を除外しようとします。残念ながら、正規表現はHTMLを解析できないため、HTML属性のように見えるテキストの有効な部分を喜んで除外します。 jQueryのきれいな部分の1つではありません。)
他のヒント
jqueryには実際に、問題を解決するxmlパーサーがあります。 $ .parseXML(xml) http://api.jquery.com/jQuery.parseXML/