Web應用是一種極大方便用戶的操作界面，數據維護技術Ajax也從中脫穎而出，ThingJS采用了Ajax的數據維護能夠形成輕量化的開發流程。

為什么Ajax

通過XHR 實現Ajax 通信的一個主要限制，來源于跨域安全策略。默認情況下，XHR 對象只能訪問與包含它的頁面位于同一個域中的資源。這種安全策略可以預防某些惡意行為。但是，實現合理的跨域請求對開發某些瀏覽器應用程序也是至關重要的。它允許瀏覽器向跨域的服務器，發出 XMLHttpRequest 請求，從而解決了 Ajax 跨域請求數據的問題。

CORS標準

CORS（Cross-Origin Resource Sharing，跨源資源共享）是W3C 的一個工作草案，定義了在必須訪問跨源資源時，瀏覽器與服務器應該如何溝通。CORS 背后的基本思想，就是使用自定義的HTTP 頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。比如一個簡單的使用GET 或POST 發送的請求，它沒有自定義的頭部，而主體內容是text/plain。在發送該請求時，需要給它附加一個額外的Origin 頭部，其中包含請求頁面的源信息（協議、域名和端口），以便服務器根據這個頭部信息來決定是否給予響應。下面是Origin 頭部的一個示例：

Origin: http://www.nczonline.net

如果服務器認為這個請求可以接受，就在Access-Control-Allow-Origin 頭部中回發相同的源

信息（如果是公共資源，可以回發"*"）。例如：

Access-Control-Allow-Origin: http://www.nczonline.net

如果沒有這個頭部，或者有這個頭部但源信息不匹配，瀏覽器就會駁回請求。正常情況下，瀏覽器會處理請求。注意，請求和響應都不包含cookie 信息。

CORS通信過程

對于前端而言，整個 CORS 通信過程，由瀏覽器自動完成。對于開發者來說，前端代碼與普通 Ajax 代碼完全一樣。實現 CORS 的關鍵是后端，需在服務端設置 response 響應頭（header）的 Access-Control-Allow-Origin 屬性就可以開啟 CORS。該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源，例如：

"Access-Control-Allow-Origin", "*" //所有網站都可訪問 // 僅ThingJS網站能訪問 // "Access-Control-Allow-Origin",http://www.thingjs.com

如果 CORS 請求不是簡單的跨站請求，如：

· 使用GET或POST以外的HTTP請求方法（PUT DELETE等）；

· 請求的Content-Type 不屬于以下三種之一：

· application/x-www-form-urlencoded；

· text/plain；

· multipart/form-data；

· 發送了自定義的請求頭信息（如Token數據）。

那么還需根據實際情況，在服務器的響應頭中設置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相關屬性值，例如：

瀏覽器 Ajax 請求為：

$.ajax({'headers': {"token": '31415926'// 請求頭中帶上了token數據},'url': "http://localhost:3000/getDataByIds",'type': "POST",//發送數據到服務器時所使用的內容類型。默認是："application/x-www-form-urlencoded" 但此方式無將復雜的 JSON 組織成鍵值對形式//因此設置 contentType 為'application/json; charset=utf-8',這種類型是文本類型'contentType': 'application/json; charset=utf-8','dataType': "json",//發送到服務器的數據 由于contentType設置為'application/json; charset=utf-8'，這里需將json對象轉為字符串后發送'data': JSON.stringify({ 'ids': [1, 2, 3] }),'success': function (data) {console.log(data);} }); 則服務端需要設置： //配置允許的請求方式，如果寫 * 則都允許 "Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"; //配置允許的自定義請求頭，如果寫 * 則都允許 "Access-Control-Allow-Headers", "Content-Type,Token"

使用Ajax數據維護方式，需要了解瀏覽器、服務器和技術的組合方式，ThingJS的數據接入方法把代碼變得更加簡單，邊用邊學！

總結

以上是生活随笔為你收集整理的ajax option请求后无post请求_ThingJS：一种浏览器、服务器和技术的新组合方法——Ajax...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。