javascript原生代码实现ajax请求

之前做的转盘抽奖中用到了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.，解决方法如：这个页面写的挺清楚