Remove 'X-Requested-With' from query string url during ajax request

Question

The problem I am having is that &X-Requested-With=XMLHttpRequest&_=1462736803425 keeps being appended to my url because it is apart of the query string. Is there a way that I can stop it from becoming a query string and doing Ajax.BeginForm without doing a 'hack'?

@using (Ajax.BeginForm("Search", "Filter", new { Area = "Music" }, new AjaxOptions { HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "body-wrapper", OnSuccess = "updateHistory" }, new { @id = "search-form" }))
{
       <div>
           <i class="fa fa-search"></i>
           <input type="search" placeholder="Search" id="search" name="searchString" />
       </div>
}

public ActionResult Search(string searchString)
{
    //do stuff
    return PartialView();
}

On the partial view page I then get the path and query:

@Html.HiddenFor(x => Request.Url.PathAndQuery)

The value of Request.Url.PathAndQuery is : http://localhost:1526/Music/Search?searchString=maid&X-Requested-With=XMLHttpRequest&_=1462736803425

And then update the url using History.js:

function pushState(target) {
    manualStateChange = false;
    History.pushState(null, null, $("#Request_Url_PathAndQuery").val());
}

Answer 1

Without altering the source file for "jquery-ajax-unobtrusive.js", it is not easy. The problem here is on line 117:

options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

It's adding that data before sending the request. That's kind of obnoxious, especially as that value should be an HTTP header, not part of the data, in my opinion.

There might be a way of removing it by adding a beforeSend option to the form's ajax request. Namely, you'd want to define a function:

function removeExtraData(jqXHR, settings) {
  if (settings.data.hasOwnProperty('X-Requested-With')) {
    delete settings.data['X-Requested-With']; // or settings.data['X-Requested-With'] = undefined;
  }
}

You can then use that by adding a data-ajax-begin HTML attribute with the value removeExtraData to your form. I haven't verified that, and it's been a few years since I've used WebForms, so I don't have a setup to test.

The _=1462736803425 part of the URL is automatically appended by jQuery because the request is set to not be cached. Apparently you can get rid of that by adding an HTML attribute to your form with the name data-ajax-cache and the value true. Of course, that may end up caching your request, which might not be desireable.