前端利用ajax實現使用者註冊頁面

　　開發一個使用者註冊介面，使用ajax互動技術

　　ajax是什麼呢?允許瀏覽器與伺服器通訊而無須重新整理前頁面的技術都被叫做Ajax.

　　AJAX:(Asynchronous JavaScript and XML)並不是一項新技術,其實是多種技術的綜合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

　　首先Ajax請求的步驟：

　　(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件;

　　(2)建立一個新的HTTP請求,並指定該HTTP請求的方式、URL及驗證資訊;

　　(3)設定響應HTTP請求狀態變化的函式;

　　(4)傳送HTTP請求;

　　(5)獲取非同步呼叫返回的資料;

　　(6)使用JavaScript和DOM實現區域性重新整理。

　　註冊頁面由web開發，還是html,css,js組成。

　　其中為了實現使用者註冊我們引入了XMLHttpRequest物件，該物件可以讓伺服器與網頁進行通訊，讓一個本來靜態的網頁可以和我們互動。我們需要為他設計物件型別API，其主要負責客戶端和服務端資料的傳遞和接收和請求XML資料(JSON/TEXT)

　　其實我感覺JS最不好寫…

　　附上程式碼：

　　task4.js:

　　//登入頁的操作DOM

　　var register = document.getElementById('register');//獲得登入頁的註冊按鈕元素

　　var getVertify = document.getElementById('getVertify');//獲得獲取驗證碼的按鈕元素

　　var userName = document.getElementById('userName');//獲取郵箱框框元素

　　var vertify = document.getElementById('vertify');//獲取驗證碼框框元素

　　var userPwd = document.getElementById('userPwd');//獲取密碼框框元素

　　var login = document.getElementById('login');//獲取登入按鈕元素

　　//全域性變數

　　var vertifyCode , yourEmail ,yourPwd;

　　//獲取驗證碼函式

　　getVertify.>

　　myAjax('GET',"{"email":""+userName.value+""},

　　function(xhr){

　　var str = xhr.responseText;

　　var myObj = JSON.parse(str);

　　console.log(myObj);

　　vertifyCode = myObj.data;

　　vertify.value = vertifyCode;

　　console.log(vertifyCode);

　　console.log(myObj.code,myObj.message);

　　},function(xhr){

　　alert('請求失敗!');

　　}) ;

　　//點選註冊進行跳轉到註冊頁面

　　register.>

　　if(vertify.value != vertifyCode)

　　{

　　alert('當前驗證碼出錯或超時!');

　　}

　　else

　　{

　　window.location.href = "register.html";

　　}

　　}

　　}

　　//登入函式

　　login.>

　　if(userPwd.value.length == 0 || userName.value.length == 0)

　　{

　　alert(‘密碼和郵箱不能為空!’);

　　}

　　else

　　{

　　myAjax(‘POST’,‘’,

　　{

　　“email”:""+userName+"",

　　“password”:""+userPwd+""

　　},

　　function(xhr){

　　var str = xhr.responseText;

　　var myObj = JSON.parse(str);

　　console.log(myObj);

　　if(myObj.code != 200)

　　{

　　alert(‘密碼或使用者名稱錯誤’);

　　}

　　else

　　alert(‘登入成功’);

　　},

　　function(xhr){

　　alert(‘登入失敗!’);

　　})

　　}

　　}

　　//物件轉字串

　　function objToStr(obj){

　　obj.time = new Date().getTime();

　　var res = [];

　　for(var key in obj){

　　res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));//encodeURIComponent進行中文轉碼

　　}

　　return res.join("&") ; 　　

　　}

　　//封裝Ajax函式

　　function myAjax(type ,url , obj, success, error){

　　//將物件轉換成為字串

　　var str = objToStr(obj);

　　//建立一個非同步物件

　　var xmlhttp , timer;

　　if(window.XMLHttpRequest){ //IE7+ , 火狐 , 谷歌 等瀏覽器

　　xmlhttp = new XMLHttpRequest();

　　}

　　else{ //相容IE6,IE5

　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　//判斷請求方式並設定請求

　　if(type === "GET"){

　　//傳送GET請求

　　xmlhttp.open("GET", url + "?" + str)

　　xmlhttp.send();

　　}

　　else{

　　xmlhttp.open("POST",url,true);

　　xmlhttp.setRequestHeader("Content-type","application/json;charset=UTF-8");

　　xmlhttp.send(JSON.stringify(obj));

　　}

　　//監聽狀態變化

　　xmlhttp.>

　　if(xmlhttp.readyState === 4){

　　if(xmlhttp.status === 200 ){

　　success(xmlhttp);

　　}

　　else{

　　error(xmlhttp);

　　}

　　}