$.ajax making API call twice though it's getting called once only

Question

I am facing weird issue. I am implementing one SPA. I am using MVC, Sammy router, require JS and Knockout here.

Here is a file where I defined function to make a call to the API.

define(['jquery', 'UIBlock'], function ($) {
    var GlobalParameters = function () {
        this.Parameters;
        this.APIEndPoint = 'http://localhost:24774/API/';
    };

    GlobalParameters.prototype.AjaxCallToServer = function (url, requestType, data, successCallback) {
        $.blockUI();
        $.ajax({
            url: this.APIEndPoint + url,
            data: data,
            contentType: "application/json",
            type: requestType,
            statusCode: {
                500: function () {
                    $('#info').html('<p>An error has occurred while processing your request.</p>');
                    $('#info').show();
                },
                409: function (xhr, ajaxOptions, thrownError) {
                    var message = JSON.parse(xhr.responseText).ExceptionMessage;
                    $('#info').html(message);
                    $('#info').show();
                },
                204: function (data) {
                    $('#info').html('<p>No data found.</p>');
                    $('#info').show();
                }
            },
            dataType: 'json',
            success: successCallback,
            complete: function () {
                $.unblockUI();
                setTimeout(function () {
                    $('#info').hide();
                    $('#info').html("");
                }, 3000);
            }
        });
    };

    return {
        GlobalParameters: GlobalParameters
    }
});

I added debugger and found that it's getting called once only.

Here is the network trace from the Google chrome developer tool.

Here is the details of each request.

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

It's normal behavior its called preflighted request. Unlike simple requests "preflighted" requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send

see this for more detail.

edited May 23 '17 at 12:30

Community

1
1

answered Mar 02 '16 at 06:20

Sanjay Sahani

565
4
14

1

Thanks Sanjay for the reply, The problem with me is that it's calling Success callback twice. Is there any way to identify from response that is it preflight response or actual response? – alok_dida Mar 02 '16 at 06:32
@alok_dida that's not possible. The browser itself makes the OPTIONS request and it has nothing to do with ajax success... only if it gets rejected and then it goes into ajax error – charlietfl Mar 02 '16 at 06:37
@charlietfl .. The problem is that if you see my AJAX call code, I have written code specifically for different status code. During my PUT API call, I am getting two different response. One is 200 (preflight request) and another is 409 (actual request). Due to this I can see two messages on my screen. Is there any way to avoid or identify whether response came from Preflight request or actual request? – alok_dida Mar 02 '16 at 08:50
@alok_dida I suspect you are running server side logic on that OPTIONS request and not checking for request method. That request itself will not fire any of the ajax success handlers. `$.ajax` knows nothing about it – charlietfl Mar 02 '16 at 13:14

$.ajax making API call twice though it's getting called once only

1 Answers1