自己给自己扫盲:XMLHttpRequest 中 Content-Type的几种类型

447 阅读2分钟

content-type

Content-Type的作用是:服务器会根据Content-Type来获取请求中的消息主体是以什么编码,根据编码对主体进行解析。

比如Content-Type设置为application/x-www-form-urlencoded, 那么就以name=rose&password=123456来进行解码。所以我们发送data数据的时候,要先把我们的对象类型的数据,转换成name=rose&password=123456这种类型格式的字符串。

urlencoded

Content-Type : application/x-www-form-urlencoded

name=rose&password=123456 这种格式

function getXhr() {
    var xhr;

    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest() // IE7以上的浏览器都支持XMLHttpRequest
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP') // IE7以下的就这个
    }
    // 如果上面两个都没有的,说明浏览器不支持ajax请求。
    return xhr
}

function postOrGetUrlencoded(url, type, data, callback) {
    var xhr = getXhr();

    var dataList = [];
    for (var key in data){
        dataList.push(key +'=' + data[key])
    }
    data = dataList.join('&')

    xhr.open(type,url)
    if (type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    }
    xhr.send(data)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            console.log('postOrGetText connect success!')
            if (xhr.status >= 200 && xhr.status < 300){
                callback(window.JSON.parse(xhr.responseText))
            }else{
                console.log('error:',xhr.status)
            }
        }
    }
}

json

Content-Type : application/json

JSON.stringify(data)

JSON.parse(responseData)

function getXhr() {
    var xhr;

    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest() // IE7以上的浏览器都支持XMLHttpRequest
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP') // IE7以下的就这个
    }
    // 如果上面两个都没有的,说明浏览器不支持ajax请求。
    return xhr
}

function postJson(url, data, callback) {
    var xhr = getXhr();
    xhr.open('post',url)
    xhr.setRequestHeader('Content-Type','application/json')
    xhr.send(window.JSON.stringify(data))
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            console.log('postJson connect success!')
            if (xhr.status >= 200 && xhr.status < 300){
                callback(window.JSON.parse(xhr.responseText))
            }else{
                console.log('error:',xhr.status)
            }
        }
    }
}

form-data

Content-Type : multipart/form-data

var formData = new FormData()

function getXhr() {
    var xhr;

    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest() // IE7以上的浏览器都支持XMLHttpRequest
    }else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP') // IE7以下的就这个
    }
    // 如果上面两个都没有的,说明浏览器不支持ajax请求。
    return xhr
}

function postFormData(url, data, callback) {
    var xhr = getXhr();
    var formData = new FormData()
    for (var key in data){
        formData.append(key, data[key])
    }
    xhr.open('post',url)
    xhr.setRequestHeader('Content-Type','multipart/form-data')
    xhr.send(formData)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            console.log('postFormData connect success!')
            if (xhr.status >= 200 && xhr.status < 300){
                callback(window.JSON.parse(xhr.responseText))
            }else{
                console.log('error:',xhr.status)
            }
        }
    }
}