Question

I have some question about a JQuery script (I am new in JQuery world):

In a view page I have the following link:

        <li>
            <a id="byHeader" href="<c:url value="/mapping/header" />">By presence of header</a>
        </li>

So clicking on this link I generate an HTTP Request towards “/mapping/header” folder.

Now in the view page I have also the following JQuery code related to the previus links:

$("#byHeader").click(function(){    // Select the link having id="byHeader" and  assign to it the following callback function executed on the click event
    var link = $(this);             // Variable refered to the link tag that triggered the event

    /* La chiamata AJAX non viene invocata su un oggetto particolare (quindi direttamente su $)
       I parametri di input sono: 1) L'URL del link selezionato 2) Il tipo di risposta previso (una stringa)
    */
    $.ajax({ url: this.href, dataType: "text", 
        // Before sending the HTTP Request: execute a function that add an Header to this HTTP Request
        beforeSend: function(req) { req.setRequestHeader("FooHeader", "foo"); }, 
        // Success case:
        success: function(form) { 
            MvcUtil.showSuccessResponse(form, link); 
        }, 
        // Error case:
        error: function(xhr) { 
            MvcUtil.showErrorResponse(xhr.responseText, link); 
        }
    });
    return false;
});

Probably my doubts are trivial and depend on my lack of knowledge of JQuery…

1) The first dount regard the req variable in this line of code:

        beforeSend: function(req) { req.setRequestHeader("FooHeader", "foo"); },

By this line of code I think that I am adding an headers to my HTTP Request to send it towards the server.

My problem is understand what it points the variable named “req”. I think that this is referred to my HTTP Request but my problem is that I never declared it before…I am using it (and it work well) without ever having declared it in the code before !!! Why it work?

I am thinking that when I use the beforeSend it create automatically a parameter variabile that contain the reference to the HTTP Request for my function…but…finally I don’t know if it is right…

2) The second doubt regard these lines of code:

        success: function(form) { 
            MvcUtil.showSuccessResponse(form, link); 
        }, 

these code lines handle the succes case (the case in which the script is able to append the header to the HTTP Request)…

Reading the JQuery succes api documentation I have understand that the success method (is it a method? right?) accept as parametr the data returned from the server…

As you can see in the code, the server returns to the client a text string (infact I have: dataType: “text”)…so…why in the previus code lines the parameter is named “form”?

the server return to the client a text, not a “form”…I’m missing something?

And…also in this case: I have not created the form variabile, is it a “generic” variable that contains the data returned by the server and I can use it because in the previus line I have use the JSON format in the ajax call?

Thank you very much

Andrea

Answer 1

1. The jQuery ajax system creates req for you and pass it as a parameter for your callback.

2. Dunno, just a weird name for a varable… You are correct, if your dataType is text, the result will come as a plain string.

   As for you not creating the variable, again the data returned (in this case a string) is created by jQuery and just passed as a parameter for your callback.

You seem to be confused by the concepts of "variable" and "function parameter". I’d suggest reading more about "global variables" and "variable scope". In short, req and form are only available from inside those functions, code outside them won’t have access to it. OTOH if you declare a variable like var x somewhere, every code in the same scope will have access to it (if you declare it outside any function, it will be a global, so all your code can access it).