getResponseHeader is not a function

Question

I need to get a value from another page. But I get this error with the following code. How can I fix it?

    $(document).ready(function() { 
        $("[name='submit']").click(function() { 
            $.ajax({
                type: "POST",
                data: $(".form-signup").serialize(),
                url: "external.asp", 
                success: function(output) { 
                alert(output.getResponseHeader("Content-Length"));
},
                error: function(output) {
                $('.sysMsg').html(output);
                }
            }); 
        }); 
    }); 

Answer 1

First, your settings object is not well formed, the success function is not terminated.

Edit: Seems that you are using jQuery 1.3.x, if so, the $.ajax function itself returns the XHR object:

$(document).ready(function() { 
    $("[name='submit']").click(function() { 
        var xhr = $.ajax({
            type: "POST",
            data: $(".form-signup").serialize(),
            url: "external.asp", 
            success: function(output, status) { 
              alert(xhr.getResponseHeader("Content-Length"));
            },
            error: function(output) {
              $('.sysMsg').html(output);
            }
        }); 
    }); 
});

For jQuery 1.4+ versions:

Then, when the success callback its executed three arguments are passed (success(data, textStatus, XMLHttpRequest)), you need to call the getResponseHeader on the XmlHttpRequest object, the third argument:

$(document).ready(function() { 
    $("[name='submit']").click(function() { 
        $.ajax({
            type: "POST",
            data: $(".form-signup").serialize(),
            url: "external.asp", 
            success: function(output, status, xhr) { 
              alert(xhr.getResponseHeader("Content-Length"));
            },
            error: function(output) {
              $('.sysMsg').html(output);
            }
        }); 
    }); 
});