JS封装Ajax请求（不同数据格式的请求头设置）--FROM:学校大学生活动中心预约系统

###JS封装Ajax请求
####1.GET
获取xmlHttp对象

function createXMLHttp() {
    var xmlHttp;
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        if(!xmlHttp) {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlHttp;
}

发送GET请求：

//当页面加载完成时判断用户是不是已经登录
window.onload= function () {
    getisloginxmlHttp=createXMLHttp();
    var url = "/stuactorder/user/getislogin";
    getisloginxmlHttp.open("GET", url, true);
    getisloginxmlHttp.onreadystatechange = getislogincallback;
    getisloginxmlHttp.send(null);
}

在回调方法中判断后端是否响应成功并获取响应数据：

function getislogincallback(){
    if (getisloginxmlHttp.readyState == 4) {
        if (getisloginxmlHttp.status == 200) {
            var result = getisloginxmlHttp.responseText; //响应成功
        }
    }
}

---

####2.通过URL进行POST
获取xmlHttp对象

function createXMLHttp() {
    var xmlHttp;
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        if(!xmlHttp) {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlHttp;
}

发送POST请求：

//更新学期信息
function setschweek(){
    var weeksum=document.getElementById("weeksum").value;
    var schstart=document.getElementById("schstart").value;
    setschweekxmlHttp=createXMLHttp();
    var url = "/stuactorder/weekinfo/init?weeksum="+weeksum+"&schstart="+schstart;
    setschweekxmlHttp.open("POST", url, true);
    setschweekxmlHttp.onreadystatechange = setschweekcallback;
    setschweekxmlHttp.send(null);
}

---

####3.POST数据（JSON）
POST有一定格式的数据时，需要设置发送编码和封装相应的请求头信息，以下是POST发送Json字符串的配置：

function login(){
    var loginname=document.getElementById("loginname");
    var loginpassword=document.getElementById("loginpassword");
    xmlHttp=createXMLHttp();
    //封装json
    var jsonreq={
        loginname:loginname.value,
        password:loginpassword.value
    };
    var jsondate = JSON.stringify(jsonreq);

    var url = "/stuactorder/user/login";
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("cache-control","no-cache");
	//指定发送的编码xmlHttp.setRequestHeader("contentType","text/html;charset=uft-8")
	//设置请求头信息,设置为发送json字符串
    xmlHttp.setRequestHeader("Content-Type", "application/json");  
    xmlHttp.onreadystatechange = logincallback;
    xmlHttp.send(jsondate);
}

---

####4.POST其他类型的数据的请求头配置

用Ajax方式提交表单，决定编码类型的是请求头中Content-Type，不同的值对应不同的提交和回调处理方式。
在前端不同的框架中，Content-Type有不同的参数写法，这里只介绍XMLHttpRequest方式，其他JQuery和AngularJS的写法参照（segmentfault.com/a/119000000…
XMLHttpRequest对象用于向后端收发数据请求，现代浏览器都支持（IE要用ActiveXObject实现相同功能，本文就不讨论了）。

后续代码将假设已经获得了XMLHttpRequest对象，其名为req。下面将介绍XMLHttpRequest对象用常见的五种Content-Type发送数据的方式。

（1）application/x-www-form-urlencoded
这种Content-Type要求数据按照key1=value1&key2=value2的格式发送给后端，且其中的特殊字符需要转义成%HH的形式。

首先，需要用encodeURIComponent()函数编码表单数据，代码如下：

/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var tempArr = [];
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        tempArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
}
var dataToSend = tempArr.join('&');

接着，设置请求头部的Content-Type，发送数据，代码如下：

req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(dataTosend);

（2）multipart/form-data
这种Content-Type类型多用来提交文件，我们采用HTML5的FormData对象来构建提交的数据。

（3）text/plain
如果请求头部没有设定Content-Type，且数据既不是FormData也不是XML Document，则Content-Type默认为text/plain。

这种方式的代码很简单，直接发送字符串即可，代码如下：

req.send('...(此处是字符串格式的数据)');

（4）application/json
JSON格式的数据，后端和各种移动端都很方便处理，用这种MIME类型时，需要将数据对象转换成JSON串。

首先，转换数据成JSON串；然后，设定请求头部的Content-Type，就可以发数据了：

req.send( JSON.stringify(data) );