jQueryまたはjavascriptで非同期通信する方法

本章では、jQueryまたはjavascriptで非同期通信する方法についてメモ書きします。

javascriptで非同期通信

jsonデータでPOSTする場合

[javascript file]

var _xhr = new XMLHttpRequest();
_xhr.onreadystatechange = function () {
    switch (_xhr.readyState) {
        case 1:
            // request start
            break;
        case 2:
            // recieved header data
            break;
        case 3:
            // reciving body data
            break;
        case 4:
            // complete xhr connect
            switch (_xhr.status) {
                case 200:
                    // success
                    // * in the case, recieved json data
                    var _recieveData = JSON.parse(_xhr.responseText);
                    break;
                default:
                    // error
                    break;
            }
            break;
    }
};
_xhr.open("POST", "/HogeHoge/GetUser");
_xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
_xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
_xhr.send(JSON.stringify({
    id: "<<ID>>",
    name: "<<Name>>",
    remember: false,
}));

[C# file]

public class HogeHogeController : Controller
{
[HttpPost]
public JsonResult GetUser(
    int id
    , string name
    , bool remember
    )
{
}
}

ローカルファイルを含むデータでPOSTする場合

[javascript file]

var _file = document.getElementById("<<upload>>").files[0];
var _formData = new FormData();
// * file data
_formData.append("files", _file);
// * json data
_formData.append("nickName", "<<NickName>>");

var _xhr = new XMLHttpRequest();
_xhr.onreadystatechange = function () {
    switch (_xhr.readyState) {
        case 1:
            // request start
            break;
        case 2:
            // recieved header data
            break;
        case 3:
            // reciving body data
            break;
        case 4:
            switch (_xhr.status) {
                case 200:
                    var _recieveData = JSON.parse(_xhr.responseText);
                    if (_recieveData)
                        alert("プロファイルの更新に成功しました");
                    break;
                default:
                    alert("プロファイルの更新に失敗しました");
                    break;
            }
            leadotObjects.localVar.IsRunningAjax = false;
            break;
    }
};
_xhr.open("POST", "/HogeHoge/PostFile");
_xhr.setRequestHeader("Content-Type", "multipart/form-data");
_xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
_xhr.send(_formData);

[C# file]

public class HogeHogeController : Controller
{
[HttpPost]
public JsonResult PostFile(
    string nickName
    , HttpPostedFileBase[] files
    )
{
}
}

jQueryで非同期通信

jsonデータでPOSTする場合

[javascript file]

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/HogeHoge/Get)",
    data: JSON.stringify({
       id: "<<ID>>",
       name: "<<Name>>",
       remember: false,
    })
}).done(function (result) {
    // success
}).fail(function (ex) {
    // error
});

ローカルファイルを含むデータでPOSTする場合

[javascript file]

var _file = document.getElementById("<<upload>>").files[0];
var _formData = new FormData();
// * file data
_formData.append("files", _file);
// * json data
_formData.append("nickName", "<<NickName>>");

$.ajax({
    type: "POST",
    url: "HogeHoge/PostFile",
    enctype: "multipart/form-data",
    processData: false,
    contentType: false,
    data: _formData,
}).done(function (element) {
    // success
}).fail(function (ex) {
    // error
});