使用XMLHttpRequest對WebForm發送POST Request的參數傳遞問題

一直以來使用AJAX都是採用jQuery的$.ajax()封裝，倒也沒啥問題，日前突然有一個需求需要轉回來採用Javascript原生的XMLHttpRequest，才發現沒有jQuery的日子有多難熬，連最基本的POST Parameter參數傳遞語法都已經失憶，記錄在此防止未來再度記憶揮發。

傳統上使用jQuery的AJAX傳遞方式如下：

var oData = {
  cName: "John",
  iMoney: 9999
};

$.ajax({
  type: "POST",
  url: "something.aspx",
  data: oData,
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  success: function(response) {
    data = $.parseJSON(response);
    alert(data.cMessage);
  }
});

改回使用原生XMLHttpRequest的時候，經過確認後webform如果是採用Request.Form["XXX"]的採值方式，那麼你永遠只能使用「contentType: "application/x-www-form-urlencoded"」來對應。另外我一直習慣jQuery的寫法，對於XMLHttpRequest傳遞參數的data段直覺上我就給予JSON.stringify()去轉換帶出去

var oReq = new XMLHttpRequest();
oReq.send(JSON.stringify(oData));

以上面的程式碼來說，WebForm端點收到會呈現像這樣的像是被UrlEncode編碼過的字串「{%7b%22cName%22%3a%22John%22%2c%22iMoney%22%3a9999%7d}」，沒想到這樣的作法不僅無效，反而誤導自己陷入在編碼除錯的環節上（足足卡了半小時），事實上問題根本不再於此，直到受不了離開座位去上個廁所，才突然想到：阿幹！Request.Form是基於System.Web.HttpValueCollection，那就是Key-Value的結構啊，我一直傳JSON序列化過去幹嗎？返回將程式碼改為下列就解決了。

var oReq = new XMLHttpRequest();
oReq.open("POST", "something.aspx", true);
oReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
oReq.onload = function () {
  var oReturn = $.parseJSON(oReq.response);
  if (oReq.status == 200) {
    alert(oReturn.cMessage);
  } else {
    alert(oReturn.cMessage);
  }
};
oReq.send($.param(oData));

將oData參數包解回Key-Value的方式我還是採用jQuery的函式方法，因為我自己懶得寫，反正不要使用jQuery的AJAX送出POST就好了。

ASP.NET WebForm POST parameter non-jQuery AJAX XMLHttpRequest JavascriptAnonymousObject Serialize