日期：2022年 07月 11日

標籤： C# Asp.NET Framework Web JavaScript Html

摘要：C# 學習筆記

第一部分：Demo畫面說明

Step 1：範例下載後執行畫面

畫面有兩個按鈕
1：Ajax呼叫，Header添加 => ‘X-Requested-With’: ‘XMLHttpRequest’,
2：Ajax呼叫，Header添加 => ‘X-Requested-With’: ‘null’,

Step 2：Header帶XMLHttpRequest

點擊執行，並且從F12看到Console，有帶預設值”XMLHttpRequest”，會判斷出為Ajax

Step 3：Header設為null

點擊執行，並且從F12看到Console，當此值被設定為”null”，會視為非Ajax

第二部分：X-Requested-With與代碼說明

Step 1：後端判斷的方式

後端判斷主要是 Request.IsAjaxRequest() 語法

[HttpPost]
public ActionResult AjaxCall()
{
    ViewBag.IsAjax = Request.IsAjaxRequest();
    var result = new
    {
        IsAjax = Request.IsAjaxRequest()
    };
    return Json(result);
}

Step 2：前端ajax的Header

後端的判斷別方式是 X-Requested-With 的Header 必須是XMLHttpRequest時才會識別為Ajax

'X-Requested-With': 'XMLHttpRequest',

完整的Ajax語法

$('#button1').click(function () {
    $.ajax({
        url: 'https://localhost:44313/Home/AjaxCall',
        type: 'post',
        dataType: 'json', // 預期從server接收的資料型態
        contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
        headers: {
            "Accept": "application/json, text/javascript, */*; q=0.01",
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache',
            'X-Requested-With': 'XMLHttpRequest',
        },
        data: "",
        success: function (result) {
            console.log("Post呼叫後端(X-Requested-With正確) IsAjax:" + result.IsAjax);
        },
    });
});

Step 3：補充說明與文獻

通常javascript框架預設使用Ajax時會把X-Requested-With 的Header塞入XMLHttpRequest
但事實上，在串改Ajax呼叫標頭時亦可讓後端判斷Ajax失效

參考文獻1-維基百科：連結
參考文獻2-Stack overflow：連結