Can't do anything with Ajax response in Firefox extension_问答_开发者

I'm writing a simple AJAX call that returns a full HTML page and then I attempt to get some values I need from this respons开发者_高级运维e. I dont know why its not working and I've done everything I could possibly think of. It works when I have my code as part of another HTML page but not as part of a Firefox extension and thats the problem: I'm writing a Firefox extension!

In the Firefox extension I get a response and I can alert, and its there (i.e. I see the response text)! but I cant call .find, .filter or anything else really. The code breaks silently at some point in the success function and nothing happens.

Here is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
        <title>runthis</title>

        <script type="text/javascript" language="javascript" src="jquery-1.6.2.js"></script>

        <script type="text/javascript">
        $(document).ready(function(){
                $('input').click(function(){
                var makeTransferURL = "empty";
                                var pc = "empty";

                        $.ajax({//Transfer
                            type: "POST",
                            url: "http://localhost/transfer2.html",
                            data: "",
                            dataType: "html",
                            context: document.body,
                            success: function(response){
                                var table = $(response).find('table.123RowSeparator');
                                var a     = table.find('a[href*="123"]');
                                var href  = a.attr("href");
                                makeTransferURL = href;
                                var link = makeTransferURL.indexOf('PC_');
                                pc = makeTransferURL.substring(link, (link + 11));
                                alert(pc);
                            },
                            error: function() {
                                alert("Sorry, The requested property could not be found.");
                            }  
                        });
                });
        });
        </script>
</head>
<body>
        <input type="button" value="load" />
</body>
</html>

The exact same code as a firefox extension doesnt work:

    window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
        init: function() {
        gBrowser.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
    },
    onPageLoad: function(aEvent) {
        var doc = aEvent.originalTarget; // doc is document that triggered "onload" event

    if(doc.location.href=="http://localhost/index2.html") {

        var makeTransferURL = "empty";
        var verifyTransferURL = "empty";
        var confirmTransferURL = "empty";
        var token1 = "empty";
        var token2 = "empty";
        var pc = "empty";

       $.ajax({//Transfer
            type: "POST",
            url: "http://localhost/transfer2.html",
            data: "",
            cache: false,
            async: false,
            dataType: "html",
            context: document.body,
            success: function(response){
                var table = $(response).find('table.123RowSeparator');
                var a     = table.find('a[href*="123"]');
                var href  = a.attr("href");
                makeTransferURL = href;
                var link = makeTransferURL.indexOf('PC_');
                pc = makeTransferURL.substring(link, (link + 11));
                alert(pc);
            },
            error: function() {
                alert("Sorry, The requested property could not be found.");
            }
        });
    }  
    aEvent.originalTarget.defaultView.addEventListener("unload", function(){ myExtension.onPageUnload(); }, true);
    },
    onPageUnload: function(aEvent) {}
}

I need to know why!

Here is the HTTP header of the response:

HTTP/1.1 200 OK
Date: Mon, 11 Jul 2011 10:43:32 GMT
Server: Apache/2.2.19 (Win32)
Last-Modified: Wed, 06 Jul 2011 12:41:47 GMT
ETag: "9000000015529-f7b9-4a765ec7780ff"
Accept-Ranges: bytes
Content-Length: 63417
Keep-Alive: timeout=5, max=97
Connection: Keep-Alive
Content-Type: text/html

Found the solution, its not elegant(or correct practice) but give me a break! No one answered :)

Here is what I did to get this to work:

$('#divid').css('display', 'none');
                response = response.replace(/<head>(?:.|\n|\r)+?<\/head>/ig, "");
                doc.getElementById('divid').innerHTML = response.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");
                var table = $('#divid').find('whateveryoufeellike');

So I think the problem was that I was getting a plain HTML formatted string and I couldn't use jQuery functions like .find and .filter on a string like that. Took the string and using regex, striped it off of its head and script tags and (probably do images too soon) dumped what was left in a Div I created. But not before setting the div to be hidden so that the code doesn't show. The user feels no difference really and I can now use the DOM for the mother page and take run all the .finds and .filters my heart desires!

There beauty of it is that there wont be any collision issue between tags with same id/class on the same page as long as the name of the Div you make in your page is unique to that page. So something really random would be a good choice :D suggestions... !HWSyujtewq$y$y$w£t!"£%^(&)%$dsfdgjnbfdvsc