AJAX- XML物件、post操作-2

AJAX

這篇要記錄的內容是如何利用XML元件來將資料送到伺服器端做驗證

以下實作的程式碼內容

var xhr = new XMLHttpRequest();
xhr.open('post','伺服器的網址',true);
xhr.setRequestHeadr('content-type','application/x-www-form-urlencoded');
xhr.send('email=jared@gmail.com&password=1234');

以上方的程式碼為例，

第一，先創建XML物件，才能使用XMLHttpRequest的指令

第二，在open的函式裡面，

第一個引數，要放入post，因為，現在是要上傳資料到伺服器端做驗證

第二個引數，放入要上傳資料的伺服器端的網址

第三個引數，因為要非同步，所以放入true

第三，寫入你要上傳的資料格式(一般表單格式 or JSON格式)

這個例子是上傳一般的表單格式，所以，寫入的內容為’application/x-www-form-urlencoded’ 。特別要注意上傳的地方，就是它還有另外一種上傳的格式，是JSON格式，而這兩種不一樣的格式，需要的不一樣的操作，這在後面會特別記錄一下。

第四，上傳要要驗證的資料

以上面這個例子，因為，伺服器端會驗證email和password兩種資料，所以，上傳字串’email=jared@gmail.com&password=1234’，特別要注意的地方是email和password這兩種資料之間要用&來做區隔，價若，今天還需要上傳name這個資料，那就一樣要在password的資料後面加上一個&並接上name的資料，即’email=jared@gmail.com&password=1234&name=jared’。

經過以上的程式碼的操作，應該可以順利的將需要料上傳到伺服器端了，接著，你可以藉由該XML元件的responseText屬性值的內容來得到伺服器給的回應，而回傳的格式是字串型別，所以，若你想用JSON格式來操作回傳的資料的話，你就得將它轉成JSON格式，才能作相對應的操作。

即

假設回傳的資料是一個物件，包含result和message兩個屬性值

{
   result:true, message:'此帳號註冊成功'
}

接著，將它轉成JSON格式並提取message這個屬性值

var output_data = JSON.parse(xhr.responseText).message; 
// ouput_data會得到'此帳號註冊成功'的結果

以上這四個步驟，就可以達到將資料從本地端上傳到伺服器端，並收到由伺服器端回收回來的驗證結果。

而有關上傳的格式(一般表單格式 和 JSON格式)兩這不一樣的操作，會在下一邊作比較詳細的記錄。