使用jQuery解析远程内容的最佳实践是什么？

Question

在jQuery ajax调用以检索整个XHTML文档之后,从结果字符串中选择特定元素的最佳方法是什么？也许有一个库或插件可以解决这个问题？

如果W3C规范中的div通常允许,jQuery只能选择存在于字符串中的XHTML元素; 因此,我很好奇选择喜欢的东西<title>,<script>和<style>.

根据jQuery文档:

http://docs.jquery.com/Core/jQuery#htmlownerDocument

HTML字符串不能包含div中无效的元素,例如html,head,body或title元素.

因此,既然我们已经确定jQuery没有提供这样做的方法,我将如何选择这些元素？例如,如果您可以告诉我如何选择远程页面的标题,那将是完美的!

谢谢,皮特

Answer 1

我建议你退出jQuery一分钟并使用原始的XML dom方法,而不是黑客攻击jQuery.使用XML Dom方法,您可以这样做:

  window.onload = function(){ 
    $.ajax({
          type: 'GET', 
          url: 'text.html',
          dataType: 'html',
          success: function(data) {

            //cross platform xml object creation from w3schools
            try //Internet Explorer
              {
              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              xmlDoc.async="false";
              xmlDoc.loadXML(data);
              }
            catch(e)
              {
              try // Firefox, Mozilla, Opera, etc.
                {
                parser=new DOMParser();
                xmlDoc=parser.parseFromString(data,"text/xml");
                }
              catch(e)
                {
                alert(e.message);
                return;
                }
              }

            alert(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
          }
    });
  }

没有搞乱iframe等.

Answer 2

只是一个想法 - 在FF/Safari中测试 - 似乎可以工作,如果你创建一个iframe临时存储文件.当然,如果你这样做,那么只使用iframe的src属性来加载文档并在它的"onload"中做任何你想做的事情可能会更聪明.

  $(function() {
    $.ajax({
      type: 'GET', 
      url: 'result.html',
      dataType: 'html',
      success: function(data) {
        var $frame = $("<iframe src='about:blank'/>").hide();
        $frame.appendTo('body');
        var doc = $frame.get(0).contentWindow.document;
        doc.write(data);
        var $title = $("title", doc);
        alert('Title: '+$title.text() );
        $frame.remove();
      }
    });
  });

我不得不将iframe附加到正文以使其拥有.contentWindow.