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"
ThingJS用JS語言開發3D功能,Ajax本身也是與JS、HTML和CSS等語言相互支持的,並在瀏覽器上執行才能使用。