ajax請求基於restFul的WebApi(post、get、delete、put)

本文轉載自查看原文 2018-12-05 17:08 3334 asp.net/ ajax

近日逛招聘軟件，看到部分企業都要求會編寫、請求restFul的webapi。正巧這段時間較為清閑，於是乎打開vs准備開擼。

1.何為restFul？

restFul是符合rest架構風格的網絡API接口。

rest是一種軟件架構的編碼風格,是根據網絡應用而去設計和開發的一種可以降低開發復雜度的編碼方式,並且可以提高程序的可伸縮性(增減問題)。

幾種較為常見的操作類型：get(查詢)、post(新增)、put(修改)、delete(刪除)

2.restFul標准的WebApi搭建以及部署在iis上

在這里為了方便，使用的ef框架，在創建讀/寫控制器時直接引用了模型類

控制器直接幫我幫crud的方法都寫好了，按照注釋的請求規則，可直接使用。代碼如下：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using webapi;

namespace webapi.Controllers
{
    public class ProductsController : ApiController
    {
        private DtoolsEntities db = new DtoolsEntities();

        // GET: api/Products
        [HttpGet]
        public IQueryable<Product> GetProduct()
        {
            return db.Product.OrderByDescending(p => p.AddDate).Take(10);
        }

        // GET: api/Products/5
        [HttpGet]
        [ResponseType(typeof(Product))]
        public IHttpActionResult GetProduct(int id)
        {
            Product product = db.Product.Find(id);
            if (product == null)
            {
                return NotFound();
            }

            return Ok(product);
        }

        // PUT: api/Products/5  update 
        [HttpPut]
        [ResponseType(typeof(void))]
        public IHttpActionResult PutProduct(int id, Product product)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != product.Id)
            {
                return BadRequest();
            }
            product.AddDate = DateTime.Now;
            db.Entry(product).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!ProductExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }


        // POST: api/Products  
        [HttpPost]
        [ResponseType(typeof(Product))]
        public IHttpActionResult PostProduct(Product product)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }
            product.AddDate = DateTime.Now;
            db.Product.Add(product);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = product.Id }, product);
        }

        // DELETE: api/Products/5  
        [HttpDelete]
        [ResponseType(typeof(Product))]
        public IHttpActionResult DeleteProduct(int id)
        {
            Product product = db.Product.Find(id);
            if (product == null)
            {
                return NotFound();
            }

            db.Product.Remove(product);
            db.SaveChanges();

            return Ok(product);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool ProductExists(int id)
        {
            return db.Product.Count(e => e.Id == id) > 0;
        }
    }
}

每個控制器前根據類型最好指定[HttpGet] [HttpPost] [HttpPut] [HttpDelete]，因為服務器是根據請求類型自動映射匹配控制器名稱，加上特性，避免出錯。

weiapi設置中指定json格式，避免數據類型異常

webapi的搭建基本沒有問題了。接下來就是部署在iis上，這里不多做描述，不懂如何部署iis可點擊這里（會被揍嗎？）

3.前台ajax請求頁面的編寫

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">

        //部署在iis上的webapi接口具體請求路徑
        var httpUrl = "http://192.168.0.142:8018/api/Products";

        $(function () {
            $.ajax({
                url: httpUrl,
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, item) {
                        var tr = $("<tr/>");
                        $("<td/>").html(item["ProductName"]).appendTo(tr);
                        $("<td/>").html(item["Brand"]).appendTo(tr);
                        $("<td/>").html(item["ASIN"]).appendTo(tr);
                        $("<td/>").html(item["SKU"]).appendTo(tr);
                        $("<button id ='d' onclick='del(" + item["Id"] + ")'>").html("刪除").appendTo(tr);
                        $("<button id ='u' onclick='update(" + item["Id"] + ")'>").html("更新").appendTo(tr);
                        tr.appendTo("#tab");
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
                }
            });

        });

        //修改
        function update(id) {
            $.ajax({
                url: httpUrl + "?id=" + id,
                type: "Put",
                data: { "id": id, "ProductName": '男士領帶', "Brand": '海瀾之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海瀾之家京東自營店' },
                dataType: "json",
                success: function (data) {
                    location.reload();
                }
            })
        }

        //新增
        function add() {
            $.ajax({
                url: httpUrl,
                type: "Post",
                data: { "ProductGuid": newGuid(), "ProductName": '男士襯衫', "Brand": '海瀾之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海瀾之家天貓旗艦店' },
                dataType: "json",
                success: function (data) {
                    location.reload();
                }
            })
        }

        //刪除
        function del(id) {
            $.ajax({
                url: httpUrl+"/" + id,
                type: "Delete",
                dataType: "json",
                success: function (data) {
                    location.reload();
                }
            });
        }

        //生成guid
        function newGuid() {
            var guid = "";
            for (var i = 1; i <= 32; i++) {
                var n = Math.floor(Math.random() * 16.0).toString(16);
                guid += n;
                if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
                    guid += "-";
            }
            return guid;
        }
    </script>
</head>
<body>
    <div>
        <table id="tab">
            <tr>
                <th>產品名稱</th>
                <th>產品品牌</th>
                <th>ASIN</th>
                <th>SKU</th>
            </tr>
        </table>
        <button id="add" onclick="add()">add</button>
    </div>

</body>
</html>

前端，后端代碼都寫完了。只剩測試了。想都不用想肯定會出問題的，因為涉及到了跨域請求等，接下來就為大家解決問題。

問題一：ajax請求，涉及到cors跨域，請求失敗

　　問題介紹及原因分析：

　　　　　　　　 CORS是一個W3C標准，全稱是”跨域資源共享”。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，基本上目前所有的瀏覽器都實現了CORS標准,其實目前幾乎所有的瀏覽器ajax請求都是基於CORS機制的。
　　　　　　　　　跨域問題一般發生在Javascript發起AJAX調用，因為瀏覽器對於這種請求，所給予的權限是較低的，通常只允許調用本域中的資源，除非目標服務器明確地告知它允許跨域調用。所以，跨域的問題雖然是由瀏覽器的行為產生出來的，但解決的方法卻　　　　　　　　　是在服務端。因為不可能要求所有客戶端降低安全性。

解決方案：

web.config修改配置文件，使服務端支持跨域請求

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <!--服務器端返回Response header  后接URL或*  表示允許-->
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
　　　　 <!--支持請求的類型-->
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

問題二：get、post 可正常請求，put、delete 出現405（Method Not Allowed）注意:我提交Put的請求，瀏覽器響應的是Request Method:PUT

　　問題介紹及原因分析：

　　　　　　　　有些人會問：我剛剛在服務端設置了允許put delete請求了，瀏覽器上服務端的響應也看到了支持put delete，為啥服務端還是拒絕呢？

　　　　　　　　一切都是iis的WebDAV(Web Distribution Authorization Versioning) Publish惹的禍，WebDAV是基於HTTP協議的拓展，添加了很多Method用於管理服務器上的文件。若安裝了WebDAV,那么iis所有的site都會默認使用WebDAV Module與WebDAV Handler。

　　　　　　　　 WebDAV Handler的默認配置是處理如下 Method:PROPFIND,PROPPATCH,MKCOL,PUT,COPY,DELETE,MOVE,LOCK,UNLOCK。所以瀏覽器發送的put delete請求都會被攔截並交給WebDAV Handler來處理，並且WebDAV Handler會默認拒絕請求

解決方案：

　　　　　　　既然我們找到了問題所在點，那么解決方案應然而生，那就是在配置文件里移除ebDAVModule和WebDAVHandler或者在系統中直接移除WebDAV

 <system.webServer>
    <!--以下配置為了讓IIS 7+支持Put/Delete方法-->
    <httpProtocol>
      <customHeaders>
        <!--服務器端返回Response header  后接URL或*  表示允許-->
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <!--移除WebDAV協議-->
      <remove name="WebDAV"/>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <!--支持所有方式的請求-->
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <!--IIS7/7.5上必須加這個配置,否則訪問報錯-->
    <modules  runAllManagedModulesForAllRequests="true">
      <!--移除WebDAV協議-->
      <remove name="WebDAVModule"/>
      <remove name="TelemetryCorrelationHttpModule" />
      <add name="TelemetryCorrelationHttpModule" type="Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule, Microsoft.AspNet.TelemetryCorrelation" preCondition="integratedMode,managedHandler" />
    </modules>
  </system.webServer>

問題三：put delete請求，又出現了405（Method Not Allowed）

　　問題介紹及原因分析：

　　　　　　　　大家發現沒有，問題二put提交，Request Method就是put，Delete提交，Request Method就是Delete。然而在這里統統都是OPTIONS。那么這個OPTIONS到底是個啥呢？

　　　　　　　　 Preflighted Requests(預檢請求)
　　　　　　　　 Preflighted Requests是CORS中一種透明服務器驗證機制。預檢請求首先需要向另外一個域名的資源發送一個 HTTP OPTIONS 請求頭，其目的就是為了判斷實際發送的請求是否是安全的。
　　　　　　　　下面的2種情況需要進行預檢：
　　　　　　　　 1、簡單請求，比如使用Content-Type 為 application/xml 或 text/xml 的 POST 請求；
　　　　　　　　 2、請求中設置自定義頭，比如 X-JSON、X-MENGXIANHUI 等。

　　　　　　　　原來put、delete請求如果頭部設置了XMLHttpRequest.setRequestHeader("Content-Type", "application/json")之前還發送了一次預檢請求。

解決方案：

　　　　　　　　既然是多的一次請求，那我們就在服務端過濾掉就好了。

　　　　　　　　 Global.asac添加以下方法就行了

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace webapi
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

        protected void Application_BeginRequest()
        {
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                Response.End();
            }
        }
    }
}

到這里，ajax跨域實現RestFul請求，已經是能正常運行了。剩下的只是安全校驗、身份認證、異常記錄等，就能放到生產環境了。這里就不多做描述了，畢竟博主還是上班族...

如有錯誤，歡迎大家指正~

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 get、post、put、delete、head請求方式 HTTPS的GET、POST、PUT、DELETE請求 CURL 支持 GET、PUT、POST、DELETE請求 jmeter（三）——get/post/delete/put請求 SpringMVC PathVariable和post、get、put、delete請求 HTTP之為什么存在post,get,put,delete等多種類型請求（RESTful風格介紹） Django框架restful序列化get/post/delete/put請求接口設計(高級版) C#--調用WebApi--（Get,Post,Put,Delete請求總結） Postman 調試請求Asp.NetCore3.1WebApi Get/Post/Put/Delete文件上傳等關於mvc、webapi中get、post、put、delete的參數