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

為什么Ajax

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

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

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

Origin: http://www.nczonline.net

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

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

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

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

CORS通信過(guò)程

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

"Access-Control-Allow-Origin", "*" //所有網(wǎng)站都可訪問(wèn) // 僅ThingJS網(wǎng)站能訪問(wèn) // "Access-Control-Allow-Origin",http://www.thingjs.com

如果 CORS 請(qǐng)求不是簡(jiǎn)單的跨站請(qǐng)求，如：

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

· 請(qǐng)求的Content-Type 不屬于以下三種之一：

· application/x-www-form-urlencoded；

· text/plain；

· multipart/form-data；

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

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

瀏覽器 Ajax 請(qǐng)求為：

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

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

總結(jié)

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

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