AJAX- XML物件、post操作-2
這篇要記錄的內容是如何利用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格式)兩這不一樣的操作,會在下一邊作比較詳細的記錄。