之前做的轉盤抽獎中用到了ajax獲取後臺引數，於是把ajax相關的內容都學習了一下，之前做的是用jquery的ajax（）函式來寫的，為了能理解透徹，學習瞭如何用js原生程式碼實現ajax

Ajax的核心是XMLHttpRequest物件
1、建立XMLHttpRequest物件

var xhr = new XMLHttpRequest();

2、XHR的用法
（1） 呼叫open（）方法，它接受三個引數（要傳送請求的型別，請求的URL，表示是否非同步傳送請求的布林值）；呼叫open（）並不會真正傳送請求，只是啟動一個請求以備傳送；
（2） 呼叫send（）方法，它接受一個引數，即要作為請求主體傳送的資料。
伺服器收到響應後，響應的資料會自動填充XHR物件的屬性。相關屬性有：
responseText：作為響應主體被返回的文字
responseXML：響應資料的XML DOM文件
status：響應的HTTP狀態，200響應成功和304表示響應有效
statusText：HTTP狀態的說明
XHR的readyState屬性表示請求響應過程的當前活動階段，只要readyState屬性的值發生改變，就會觸發一次readystatechange事件。readyState=4，表示響應完成，已經收到了全部響應資料，所以我們只對這個階段感興趣。在呼叫open（）之前指定onreadystatechange，可以保證跨瀏覽器的相容性。

var xhr = new XMLHttpRequest();       
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4){
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    } else
 
 {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };

請求方式有兩種：GET和POST

GET請求是最常見的請求型別，用於向伺服器查詢某些資訊；
POST請求用於向伺服器傳送應該被儲存的資料。

我的html程式碼如下：

<form id="info" method="post">
                    <div class="br">
                        <lable
 
>寶貝暱稱：</lable>
                        <input type="text" id="baby-name" name="baby-name">
                        <lable>聯絡電話：</lable>
                        <input type="text" id="phone" name="phone">
                    </div>
                    <div class="br">
                        <lable>照片描述：</lable>
                        <input type="text" id="photo-content" name="photo-content">
                    </div>
                </form>

js程式碼：

/*序列化表單資料*/
    function serialize(form){        
        var parts = new Array();
        var field = null;
        for (var i=0, len=form.elements.length; i < len; i++){
            field = form.elements[i];
            parts.push(encodeURIComponent(field.name) + "=" + 
            encodeURIComponent(field.value));                
        }        
        return parts.join("&");
    }
    /*xhr物件向伺服器傳資料*/
   function submitData(){
            var xhr = new XMLHttpRequest();       
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4){
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                        var data = JSON.parse(xhr.responseText);
                        console.log(data);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };
            xhr.open("post", "db.jsp", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//使用XHR來模仿表單提交，加一個請求頭部。
            var form = document.getElementById("info");            
            xhr.send(serialize(form));
        }

這是自己寫的程式碼，本來這樣已經可以了，先是寫了一個表單序列化的函式，然後用XHR物件來實現ajax非同步請求。在學習過程中，發現了FormData這個類，它為序列化表單以及創建於表單格式相同的資料提供了便利。使用方法如下：

            var form = document.getElementById("info");  
            var data = new FormData(form);
            xhr.send(data);

但是我卻遇到了問題，原因是我後臺用的jsp程式碼，怎麼都獲取不到前端傳過來的表單資料，查了一下發現，jsp的request.getParameter()只能 recognizes application/x-www-form-urlencoded requests only. 但是我傳送了一個 multipart/form-data request.，解決方法如：這個頁面寫的挺清楚