Duplicate webClient requests sent at exactly the same time from ajax call

Question

The problem I am facing is that the webClient.UploadData method is firing twice instantly from ajax request. But the same webClient.UploadData method is firing only once when invoked from aspx page. From the logs I can see the time of both the requests sent is exactly the same.. 2016-06-23 05:54:48.477

Below is the code snippet -

var DTO = JSON.stringify({Date: date, Month: month, AgeRange: ageRange, MethodName: "Enroll" });

$.ajax({
   type: "POST",
   contentType: "application/json; charset=utf-8",
   url: "/mypath/TasksHandler.ashx",
   data: DTO,
   async: true,
   success: function(result) {
   ......
   }

TasksHander will call the below method -

using (var client = new WebClient())
{
  client.Headers[HttpRequestHeader.ContentType] = "application/json";
  client.Headers[HttpRequestHeader.Accept] = "application/json";
  var data = Encoding.UTF8.GetBytes(dataInput);
  byte[] result = client.UploadData(url, "POST", data);
  output = Encoding.UTF8.GetString(result, 0, result.Length);
 }

My speculation is this could be due to setting of async property to true in ajax call? Please let know if any thoughts on this.

Is your ajax call being fired on an event? Can you share that part of code as well — Rajesh, Jun 26 '16 at 05:41

Fraser · Answer 1 · 2016-07-03T21:52:25.407

0

It could be that a preflight request is being made with the ajax call.

In this case the browser will issue a HTTP OPTIONS request with Access-Control-Request-Method headers before the POST request.

Can you check the HTTP Method on the two requests on the server or via the browser networking console? As I say it could be the first is OPTIONS and the second POST.

To overcome this you have a few options, probably the easiest being to make sure the script and the endpoint it calls are on the same domain.

Failing that you could simply do some conditional check to make sure there are bytes to send by checking the value of your dataInput or data variables.

If that doesn't help then please give further information with regard to the set up, i.e. script A is on server X and script B is on server Y, etc.

edited Jul 03 '16 at 21:52

answered Jul 02 '16 at 23:49

Fraser

15,275
8
53
104

`Preflighted requests` are used in cross-origin resource sharing ! `preflighted requests` send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. In the above problem, there is no cross-origin HTTP request ! – Ismail RBOUH Jul 03 '16 at 01:05
Yes I know what they are - as the urls given are only examples it could easily be cross domain - so why just copy and paste some stuff in a comment that basically repeats what I said? – Fraser Jul 03 '16 at 06:37
You didn't mention `cross domain` in your answer so I presumed you don't know that! Giving an answer like that makes the reader believe that every ajax request sends .... – Ismail RBOUH Jul 03 '16 at 06:42
Yes it a cross domain and as you said it should be preflight request issue. So how do I stop sending the options request before the actual request is made? – Gopi Jul 03 '16 at 18:32
First option of making script and endpoint on the same domain is ruled out and not possible. Other option of doing some conditional checks programattically is ideal. Can you please give insight of that please? I would think better way is to stop sending the request if request type is Options and send only if request type if Post. A sample code for this will be helpful. Also, the remote server is returning the actual response with Options request itself. And again its returning the response with Post response. – Gopi Jul 04 '16 at 06:20
So the problem I am facing is that the response to the Options request is first coming as "Success" and this is causing the response to the Post request as "Failure" from the remote server. So I am clueless how to deal with it. Should I ask the remote party to stop accepting the Option request if there is a way for it? Or I need to handle it in my side? – Gopi Jul 04 '16 at 06:24
@aa - "I would think better way is to stop sending the request if request type is Options" - I don't think that possible, it is the browser behaviour. By conditional checks I mean what is the value of `dataInput` and `result` for each type of REQUEST. Surely there is some simple difference for OPTIONS so you can just return out in that case. – Fraser Jul 13 '16 at 16:28

Ismail RBOUH · Answer 2 · 2016-07-03T00:54:00.430

If you're using click event please make sure that the event only gets fired once. To ensure that, first unbind any click event:

$(selector).unbind('click');

Then bind your handler:

$(selector).bind('click', function() {//...});

//You can chain calls !
$(selector).unbind('click').bind('click', function() {//...});

If you're using a button or submit to trigger the ajax event please make sure you're preventing the default behaviour:

$(selector).submit(function(e){
    e.preventDefault();
    //Your ajax call 
    return false;
});

score 0 · Accepted Answer · answered Aug 20 '16 at 18:47

0

The problem in the code was there were 2 places which were having a CSS class "dob" in HTML and there was jquery code with $(".dob").each(function(elem,val){...} This function was leading to making ajax call...

answered Aug 20 '16 at 18:47

Gopi

227
2
10
30

Duplicate webClient requests sent at exactly the same time from ajax call

3 Answers3