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

為什么Ajax

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

CORS標(biāo)準(zhǔn)

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

Origin: http://www.nczonline.net

如果服務(wù)器認(rèn)為這個請求可以接受，就在Access-Control-Allow-Origin 頭部中回發(fā)相同的源

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

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

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

CORS通信過程

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

"Access-Control-Allow-Origin", "*" //所有網(wǎng)站都可訪問 // 僅ThingJS網(wǎng)站能訪問 // "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；

· 發(fā)送了自定義的請求頭信息（如Token數(shù)據(jù)）。

那么還需根據(jù)實(shí)際情況，在服務(wù)器的響應(yīng)頭中設(shè)置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相關(guān)屬性值，例如：

瀏覽器 Ajax 請求為：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。