[PHP知识库] ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)

RESTful发展背景及简介
网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备…）。因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，甚至出现"APIFirst"的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。

REST（Representational State Transfer）表述性状态转换，REST指的是一组架构约束条件和原则。如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力，更好地使用现有Web标准中的一些准则和约束。虽然REST本身受Web技术的影响很深，但是理论上REST架构风格并不是绑定在HTTP上，只不过目前HTTP是唯一与REST相关的实例。

?这个世界上只有一种真正的英雄主义：

认清生活的真相，并且仍然热爱它。难道向上攀爬的那条路，不是比站在顶峰更让人心潮澎湃吗？

提供在线jQuery访问地址：【https://code.jquery.com/jquery-3.1.1.min.js】?

1、创建MVC项目

依次选择【C#】【Windows】【Web】，下拉至【ASP.NET Web应用程序】并选择，点击【下一步】

?输入项目名称，点击【创建】

?选择【Web API】，并取消【为HTTPS】配置。点击【创建】

?创建效果：

?2、修改返回格式

打开【App_Start】文件夹中的【WebApiConfig.cs】文件并添加如下配置：

【?GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();】

【routeTemplate: "api/{controller}/{action}/{id}",】

?3、创建【Web API】控制器

在【Controllers】文件夹上点击【鼠标右键】,选择【控制器】，并依次选择【Web API】【Web API 2 控制器-空】，点击【添加】

?添加控制器的名称【Test】，默认后缀【Controller】

?创建效果：

?4、创建【HttpGet】访问接口

编码如下:

/// <summary>
/// Get请求接口
/// </summary>
/// <returns></returns>
[HttpGet]
public object GetInfo() {
    Dictionary<string, object> map = new Dictionary<string, object>();
    map.Add("code",200);
    map.Add("message","成功Get请求");
    map.Add("result","祝大家功成名就。");
    return map;
}

编码位置如下:

?5、创建【HttpPost】访问接口

编码如下：

/// <summary>
/// Post请求接口
/// </summary>
/// <returns></returns>
[HttpPost]
public Object GetPostInfo() {
    Dictionary<string, object> map = new Dictionary<string, object>();
    map.Add("code", 200);
    map.Add("message", "成功Post请求");
    map.Add("result", "祝大家功成名就。");
    return map;
}

?编码位置如下：

?6、测试接口：

6.1、执行：点击【调试】，【开始执行(步调试)】

?启动成功：【点击API】

?接口地址：

?6.2、使用【Postman】进行测试（需要自行下载）

?6.3、访问路径拼接方式：

【http://localhost:端口号/api/{控制器名称}/{方法名称}】

6.4、HttpGet请求测试(可以在浏览器中测试即可)

【http://localhost:端口号d/api/Test/GetPostInfo http://localhost:5833/api/Test/GetPostInfo http://localhost:5833/api/Test/GetInfo http://localhost:5833/api/Test/GetPostInfo http://localhost:端口号d/api/Test/GetPostInfo】

【Postman】访问:

?6.5、HttpPost请求测试(必须使用模拟post请求的工具)

必须Postman或其它工具访问：

7、跨域配置?

只需要在【Web.config】的 <system.webServer>标签内添加如下编码即可：

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

8、测试【Ajax】的Get请求

HTML代码：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost:5833/api/Test/GetInfo", 
            type: "Get", 
            dataType: "json",
            success: function (data) {
                document.write(data["code"]);
                document.write("<hr/>");
                document.write(data["message"]);
                document.write("<hr/>");
                document.write(data["result"]);
            }
        });
    });
</script>

效果：

?9、测试【Ajax】的Post请求

HTML编码：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "http://localhost:5833/api/Test/GetPostInfo", 
            type: "Post", 
            dataType: "json",
            success: function (data) {
                document.write(data["code"]);
                document.write("<hr/>");
                document.write(data["message"]);
                document.write("<hr/>");
                document.write(data["result"]);
            }
        });
    });
</script>

效果：