“undefined” response and responseText from PHP file when using AJAX

Question

I have a form written in html, some AJAX code and a PHP file which emails form's info to website's admin. The problem is, when I inspect the code by "console" tab in FireBug addon, everything is as I expect. The response is "OK My Friend" (As it should be in the case which email has been sent successfully). But when I want to see the exact response or responseText by these 2 lines : alert(this.responseText); and alert(this.response); the opened alert window says : "undefined" in both cases. I mean the PHP file is sending response correctly and FireBug proves it. But I can't get the response by this.response or this.responseText . What's the problem in your opinion? I've checked possible duplicates of my question but none of them could help.
Here is my complete code :
PHP :

<?php
$to = "a@example.com";
$sendersName = $_POST[ 'name' ];
$sendersEmail = $_POST[ 'email' ];
$message = "Name : " . $sendersName . "\n";
$message .= "Email : " . $sendersEmail . "\n";
$message .= "Message : " . $_POST[ 'message' ] . "\n";
$header = "From:b@example.com \r\n";
$header .= "Cc:c@example.com \r\n";
$header .= "Bcc:d@example.com \r\n";
$result = mail( $to, "ارسال پیام به وبسایت تیام نت", $message, $header );
if ( $result == true ) {
    echo( "OK My Friend" );
} else {
    echo( "email not sent" );
}
?>

HTML Form :

    <div class="col-sm-5" id="contact_form">
  <form action="" method="post">
    <div class="form-group">
      <label for="name">نام و نام خانوادگی</label>
      <input type="text" class="form-control" name="name" placeholder="نام و نام خانوادگی خود را وارد کنید." id="name">
      <label class="error" for="name" id="name_error">وارد نمودن نام و نام خانوادگی اجباری است.</label>
    </div>
    <div class="form-group">
      <label for="email">ایمیل</label>
      <input type="email" class="form-control" name="email" placeholder="آدرس ایمیل خود را وارد کنید." id="email">
      <label class="error" for="email" id="email_error">وارد نمودن ایمیل اجباری است.</label>
    </div>
    <div class="form-group">
      <label for="message">پیام</label>
      <input type="text" name="message" class="form-control" placeholder="پیام خود را بنویسید." id="message">
      <label class="error" for="message" id="message_error">وارد نمودن پیام اجباری است.</label>
    </div>
    <div class="form-group">
      <input type="submit" name="submit" value="ارسال" id="submit" class="center-block btn btn-primary">
    </div>
  </form>
</div>

AJAX :

$(function () {
    "use strict";
    $('.error').hide();
    $("input#submit").click(function () {
        // validate and process form here

        $('.error').hide();
        var name = $("input#name").val();
        if (name === "") {
            $("label#name_error").show();
            $("input#name").focus();
            return false;
        }
        var email = $("input#email").val();
        if (email === "") {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
        }
        var message = $("input#message").val();
        if (message === "") {
            $("label#message_error").show();
            $("input#message").focus();
            return false;
        }
        var dataString = 'name=' + name + '&email=' + email + '&message=' + message;
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "sendMessage.php",
            data: dataString,
            success: function () {
                alert(this.responseText);
                alert(this.response);
                if (this.responseText === "OK My Friend") {
                    $('#contact_form').html("<div id='message'></div>");
                    $('#message').html("<h2>پیام شما ثبت شد!</h2>")
                        .append("<p>همکاران ما به زودی با شما تماس خواهند گرفت.</p>")
                        .hide()
                        .fadeIn(1500, function () {
                            $('#message').append("OK");
                        });
                } else {
                    //$('#contact_form').html("<div id='message'></div>");
                    //$('#message').html(this.responseText);
                }
            }
        });
        return false;
    });
});

Answer 1

this.responseText and this.response are never defined in your javascript and will thrown an undefined error in the console. To get the data from the server you have to change the success: function to

success: function (data) {
    alert(data); // the response from the server