透过ashx看浏览器服务器运行本质(图解)

“透过ashx看浏览器服务器运行本质(图解)”是一篇介绍如何通过使用.ashx文件来更好地理解浏览器与服务器之间通信的文章。下面是完整攻略：

第一步：了解.ashx文件的作用

.ashx是ASP.NET中的一种处理程序文件，它可以让我们控制请求并在服务器上执行某些操作。.ashx文件通常用于响应Ajax请求、或轻量级的文件下载、图片裁剪等场景。.ashx文件通过HTTPHandler接口来处理请求，根据请求的内容，我们可以通过.ashx文件执行相应的操作并将结果返回给浏览器。

第二步：创建.ashx文件

假设我们现在要创建一个.ashx文件来处理请求并返回一些字符串作为响应。我们可以按照以下步骤来创建：

1. 在Visual Studio中创建一个新的Web项目，选择ASP.NET Web应用程序作为模板。
2. 在解决方案资源管理器中右键单击网站的命名空间，选择“添加”->“新建项”->“ASHX文件”。
3. 命名.ashx文件为“HelloWorld.ashx”并保存。
4. 在.ashx文件中添加以下代码：
   ```csharp
   public class HelloWorld : IHttpHandler
   {
   public void ProcessRequest(HttpContext context)
   {
   context.Response.ContentType = "text/plain";
   context.Response.Write("Hello World");
   }

   public bool IsReusable
   {
       get
       {
           return false;
       }
   }
   

   }

## 第三步：测试`.ashx`文件

现在我们已经创建好了一个`.ashx`文件，接下来我们需要测试它是否正常工作。我们可以按照以下步骤来测试：

 1. 运行项目，在浏览器中输入`http://localhost:端口号/HelloWorld.ashx`地址。
 2. 如果一切正常，页面上会显示“Hello World”字符串。如果不正常，你可以右键单击网站项目，选择“属性”，在“Web”选项卡下更改端口号或所需IIS选项。

## 示例1：实现Ajax请求

我们可以使用`.ashx`文件来响应Ajax请求，这里以实现简单的字符串拼接为例。按照以下步骤操作：

 1. 在`.ashx`文件中添加以下代码：
 ```csharp
    public class AjaxDemo : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string str = context.Request.Params["str"];
            context.Response.ContentType = "text/plain";
            context.Response.Write($@"您输入的是：{str}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

这里我们使用了Request.Params["str"]来获取Ajax请求的参数值。

1. 在页面中添加以下Ajax代码：
   ```javascript
   function sendRequest()
   {
   var str = document.getElementById("txtInput").value;
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
   {
   document.getElementById("divResult").innerHTML=xmlhttp.responseText;
   }
   }
   xmlhttp.open("POST","AjaxDemo.ashx?str="+str,true);
   xmlhttp.send();
   }

这里我们使用`xmlhttp.open("POST","AjaxDemo.ashx?str="+str,true);`来发送POST请求，并携带参数。

 3. 在页面加入文本框和按钮用来触发Ajax请求，代码如下：
 ```html
    <input id="txtInput" type="text" />
    <input id="btnSubmit" type="button" value="提交" onclick="sendRequest();" />
    <div id="divResult"></div>

示例2：下载图片

我们也可以使用.ashx文件来下载图片，这里以下载本地“test.jpg”图片为例。

1. 在.ashx文件中添加以下代码：
   ```csharp
   public class ImageDownload : IHttpHandler
   {
   public void ProcessRequest(HttpContext context)
   {
   context.Response.ContentType = "image/jpeg";
   context.Response.AddHeader("content-disposition", "attachment;filename= test.jpg");
   context.Response.TransmitFile(context.Server.MapPath("~/test.jpg"));
   }

   public bool IsReusable
   {
       get
       {
           return false;
       }
   }
   

   }

这里我们使用了`context.Response.AddHeader("content-disposition", "attachment;filename= test.jpg");`来设置下载文件的文件名，并使用了`context.Response.TransmitFile(context.Server.MapPath("~/test.jpg"));`将图片发送给浏览器。

 2. 在页面加入超链接进行点击下载，代码如下：
 ```html
    <a href="ImageDownload.ashx">下载图片</a>

至此，我们介绍了如何使用.ashx文件来更好地理解浏览器与服务器之间通信。通过示例的演示，我们可以看到.ashx文件的灵活性与强大性。