AJAX

資料來源:

資料來源:w3school

$.ajax({
        url: URLs,
        data: $('#sentToBack').serialize(), // 傳送表單資料
        type:"POST",
        dataType:'text',

        success: function(msg){
            alert(msg);
        },

         error:function(xhr, ajaxOptions, thrownError){ 
            alert(xhr.status); 
            alert(thrownError); 
         }
    });

url：
指定要進行呼叫的位址。

data：
傳送至Server的資料，會自動轉為 query string 的型式，如果是 GET 請求還會幫你附加到URL上。可用 processData 選項禁止此自動轉換。物件型式則為一 Key / Value pairs。這個範例程式，是使用serialize()，會把name為 sentToBack 的表單 <form> 中的資料傳送出去，型態的部分要看type的設定，一般表單都是用 POST 或是 GET 。

GET :
's=1&t=2'

POST :
{'s':1,'t':'qq'}

// 接起來的樣子用GLOBALS變數自己看吧。
var_dump($GLOBALS);

type：
請求方式，POST/GET。
(或 PUT/DELETE)

dataType：
預期Server傳回的資料類型，如果沒指定，jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。

可選的資料類型有：
  xml：傳回可用jQuery處理的XML
  html：傳回HTML，包含jQuery會自動幫你處理的script tags。
  script：傳回可執行的JavaScript。(script不會被自動cache，除非cache設為true)
  json：傳回JSON
  jsonp：在URL加上?callback=?參數，並在Server端配合送回此jsonp callback。
  text：傳回純文字字串。

success：
請求成功時執行函式。

function (data, textStatus) {
       // data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype 
}

error：
請求失敗時執行函式。

function (xhr, ajaxOptions, thrownError) {
                   //通常ajaxOptions或thrownError只有一個有值
           }

這個很重要，因為有時候Sever寫好的程式不容易測試，可以透過這個函數把錯誤顯示出來。

其他可能比較會用的參數：

complete：
請求完成時執行的函式(不論結果是success或error)。

function (XMLHttpRequest, textStatus) {
 // the options for this ajax request 
}

beforeSend：
發送請求之前可在此修改XMLHttpRequest物件，如添加header等，你可以在此函式中return flase取消Ajax request。

function (XMLHttpRequest) { 
      // the options for this ajax request 
 }

processData:
預設 true 會將GET變數自動轉換到url後方，可設定 false 禁止它。

Headers :

基於安全性考量 ，在 HTTP header 欄位 添加非標準請求欄位，有很多可視形況添加。

   ** "X-Frame-Options" : "DENY",

**

// 表示文件無論如何都不能被嵌入到 frame 中，即使是自家網站也不行。

    **"X-XSS-Protection": "1; mode=block" **

// 在所有的網路區域啟用保護，並設定為阻擋模式(blocking mode)。意味著只要瀏覽器覺得XSS攻擊發生就馬上阻擋網站行為，然後跳出訊息顯示已阻擋。

headers: {
        "X-Frame-Options":"DENY",
        "X-Frame-Options":"DENY",
    }
// 或者

beforeSend: function(xhr) { 

 xhr.setRequestHeader("X-Frame-Options", "DENY"); 
 xhr.setRequestHeader("X-Frame-Options", "DENY"); 

}

1. 對敏感性資料，比如說員工 ID 使用UUID。

2. 不要給予過多非當前所需資料。

3. 對查詢資料做關聯檢查，比如是否為該訂單者的訂單。

4. 在header限制資料型態 X-Content-Type-Options: nosniff ，強制使用 Content-Type 設定的型態來回應。