HTML网页中，img标签和Ajax请求是支持跳转（Redirect）的

我们知道在HTTP请求中，状态码301和302代表跳转，也叫重定向（Redirect）。

• 301-Moved Permanently：永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。
• 302-Found：临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。

参考HTTP状态码。

我们知道一个常规的HTTP请求（例如请求一个网页），是支持跳转（Redirect）的。经过实验发现，其实HTML网页上的img标签和Ajax请求，也是会自动处理HTTP跳转（Redirect）的。

我们新建一个ASP.NET Core MVC项目AspNetCoreRedirectDemos，本文的例子基于ASP.NET Core 5.0项目。

下面是项目中HomeController的代码:

using AspNetCoreRedirectDemos.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.IO;

namespace AspNetCoreRedirectDemos.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;
        private readonly bool redirectPicture = true;//图片请求是否跳转，true表示进行跳转
        private readonly bool redirectAjax = true;//Ajax请求是否跳转，true表示进行跳转

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult ShowFirstPicture()
        {
            if (!redirectPicture)
            {
                string path = AppDomain.CurrentDomain.BaseDirectory + "Files\1.jpg";

                byte[] data = null;
                using (FileStream fs = new FileStream(path, FileMode.Open))
                {
                    data = new byte[fs.Length];

                    fs.Read(data, 0, data.Length);
                }

                Response.ContentType = "image/jpeg";
                Response.ContentLength = data.Length;

                using (Stream stream = Response.Body)
                {
                    stream.Write(data, 0, data.Length);
                }

                return new EmptyResult();
            }
            else
            {
                return RedirectToAction("ShowSecondPicture");//将访问ShowFirstPicture这个Action方法的请求，跳转到Action方法ShowSecondPicture
            }
        }

        public IActionResult ShowSecondPicture()
        {
            string path = AppDomain.CurrentDomain.BaseDirectory + "Files\2.jpg";

            byte[] data = null;
            using (FileStream fs = new FileStream(path, FileMode.Open))
            {
                data = new byte[fs.Length];

                fs.Read(data, 0, data.Length);
            }

            Response.ContentType = "image/jpeg";
            Response.ContentLength = data.Length;

            //Action方法ShowSecondPicture，返回图片2.jpg到客户端浏览器
            using (Stream stream = Response.Body)
            {
                stream.Write(data, 0, data.Length);
            }

            return new EmptyResult();
        }

        public IActionResult FirstAjaxResponse([FromBody] PersonRequestModel personRequestModel)
        {
            if (!redirectAjax)
            {
                ResponseData responseData = new ResponseData()
                {
                    StatusCode = 100,
                    Message = "奔驰，返回消息"
                };

                return Json(responseData);
            }
            else
            {
                return RedirectToAction("SecondAjaxResponse");//将访问FirstAjaxResponse这个Action方法的请求，跳转到Action方法SecondAjaxResponse
            }
        }

        public IActionResult SecondAjaxResponse()
        {
            ResponseData responseData = new ResponseData()
            {
                StatusCode = 100,
                Message = "宝马，返回消息"
            };

            //Action方法SecondAjaxResponse，返回json数据到客户端浏览器
            return new JsonResult(responseData);
        }
    }
}

我们在HomeController中，定义了ShowFirstPicture和ShowSecondPicture两个Action方法，HTML网页上的img标签会请求ShowFirstPicture方法获取图片数据流，而ShowFirstPicture方法会返回HTTP状态码302到客户端浏览器，让浏览器发送新的HTTP请求，跳转（Redirect）到ShowSecondPicture方法，然后ShowSecondPicture方法会返回图片文件2.jpg的数据到客户端浏览器，供img标签显示。

我们还在HomeController中，定义了FirstAjaxResponse和SecondAjaxResponse两个Action方法，HTML网页上的JavaScript代码会发送Ajax请求给FirstAjaxResponse方法，而FirstAjaxResponse方法会返回HTTP状态码302到客户端浏览器，让浏览器发送新的HTTP请求，跳转（Redirect）到SecondAjaxResponse方法，然后SecondAjaxResponse方法会返回JSON数据到客户端浏览器。

此外，我们还在HomeController中定义了两个bool类型的变量redirectPicture和redirectAjax，分别用来控制是否启用img标签和Ajax请求的跳转（Redirect），当变量值为true时，就表示启用跳转（Redirect）。

下面是HomeController的Index.cshtml视图文件代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/lib/jquery/dist/jquery.js" ></script>
    <script type="text/javascript" >
        $(function () {
            $("#btnCallAjax").click(function () {
                var ajaxData = {};
                ajaxData.Name = "王大锤, Jack Wang";
                ajaxData.Age = 38;

                $.ajax({
                    type: "POST",
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url: "@Url.Action("FirstAjaxResponse")",
                    data: JSON.stringify(ajaxData),
                    success: function (data) {
                        alert(JSON.stringify(data))
                    },
                    error: function (xhr, ts, et) {
                        alert('服务调用失败!');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <h1>Index view!</h1>
    </div>
    <div>
        <button id="btnCallAjax" >调用ajax</button>
    </div>
    <div>
        <img src="@Url.Action("ShowFirstPicture")" />
    </div>
    
</body>
</html>

我们可以看到在视图代码中，使用了img标签和Ajax代码，来请求了HomeController的ShowFirstPicture和FirstAjaxResponse两个Action方法。

接下来我们运行项目，跟踪浏览器的HTTP请求日志，来看看发生了什么：

从上面截图中，我们可以看到浏览器在加载Index.cshtml视图文件生成的HTML网页后，img标签首先发出了HTTP请求到Action方法ShowFirstPicture，然后ShowFirstPicture方法返回了HTTP状态码302，告诉浏览器需要进行HTTP跳转（Redirect），所以img标签又发起了第二次HTTP请求到Action方法ShowSecondPicture，然后ShowSecondPicture方法返回了HTTP状态码200，将图片数据返回给了浏览器显示，符合我们的预期。

接下来我们点击浏览器网页上的"调用ajax"按钮，来触发Ajax请求，继续跟踪浏览器的HTTP请求日志：

从上面截图中，我们可以看到JavaScript代码首先发出了Ajax请求到Action方法FirstAjaxResponse，然后FirstAjaxResponse方法返回了HTTP状态码302，告诉浏览器需要进行HTTP跳转（Redirect），所以浏览器又发出了第二个Ajax请求到Action方法SecondAjaxResponse，然后SecondAjaxResponse方法返回了HTTP状态码200，将JSON数据返回给了浏览器显示，这说明Ajax也是可以自动处理HTTP跳转（Redirect）的。但是需要注意的是，我们看到第一次到Action方法FirstAjaxResponse的Ajax请求是POST的，但是第二次到Action方法SecondAjaxResponse的Ajax请求变成了GET的了，说明Ajax在自动处理HTTP跳转（Redirect）的时候，始终是用GET方法来发起跳转请求的，所以在实际开发中，不建议让Ajax来自动处理HTTP跳转（Redirect），而应该使用JavaScript代码来重新发起一个新的Ajax请求到跳转后的地址。

本文通过例子来演示了在HTML网页上，img标签和Ajax请求是可以自动处理HTTP跳转（Redirect）的，但是Ajax会始终用GET方法来发起跳转请求，所以不推荐让Ajax来自动处理HTTP跳转（Redirect）。

本文示例ASP.NET Core MVC项目下载：

AspNetCoreRedirectDemos