根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

基本介绍

XmlHttpRequest

XmlHttpRequest是JavaScript中原生的，历史悠久的一种发送网络请求的方案。

基本上所有前端框架对于网络请求的部分都是基于它来完成的。

在本章节中我们将了解它的基本用法，并且会实现一个与jQuery.ajax功能百分之九十相似的网络请求组件。

我是没有读过jQuery.ajax源码的，并且我也不是一个专精前端的程序员，所以后面的代码写的可能不太好，仅和大家在此做个交流。

后端代码

为了方便后续代码测试，我们后端采用Python-flask框架来完成。

• IP：localhost
• PORT：5700

代码如下：

from logging import debug, error
from flask import Flask
from flask import request
from flask import make_response
from flask import jsonify

app = Flask(__name__)

@app.after_request  # 解决CORS跨域请求
def cors(response):
    response.headers['Access-Control-Allow-Origin'] = "*"
    if request.method == "OPTIONS":
        # 允许的请求头
        response.headers["Access-Control-Allow-Headers"] = "Origin,Content-Type,Cookie,Accept,Token,authorization,user_head"
    return response

@app.route("/get", methods=["get"])
def get():
    user_head = request.headers.get("user_head")
    user_params = request.args
    print(user_params)
    return jsonify(user_params, user_head)

@app.route("/post", methods=["post"])
def post():
    user_head = request.headers.get("user_head")
    user_params = request.form
    print(user_params)
    return jsonify(user_params, user_head)

@app.route("/json", methods=["post"])
def json():
    user_head = request.headers.get("user_head")
    user_params = request.json
    return jsonify(user_params, user_head)

@app.route("/file", methods=["post"])
def file():
    file_obj = request.files.get("avatar")
    if file_obj is None:
        return make_response(jsonify("unload avatar"), 400)
    file_name = file_obj.filename
    file_obj.save(file_name)
    return jsonify("upload avatar success!!")

if __name__ == "__main__":
    app.run(host="localhost", port=5700, debug=True)

open()

open()方法用于创建并返回一个请求对象（单纯创建，并不发送）。

参数释义：

• method：请求方式
• url：请求地址
• async：是否异步请求

注意：如果method为GET方式，则需要我们手动在url中添加参数

请求相关

send()

send()方法用于发送一次网络请求。

参数释义：

• body：method为POST时携带的请求体数据，必须是字符串类型

注意：如果method为GET方式，则直接xhr.send(null)即可，因为GET请求没有请求体

setRequestHeader()

setRequestHeader()方法用于设置请求头。

参数释义：

• header：请求头的key
• value：请求头的value

注意：每次只能设置一组请求头键值对，如果要设置多组请求头键值对请多次调用该方法

abort()

abort()方法用于取消本次网络请求。

响应相关

getAllResponseHeaders()

getAllResponseHeaders()方法用于获取所有响应头数据。

返回的数据类型为字符串。

getResponseHeader()

getResponseHeader()方法用于获取响应头中指定header的value。

返回的数据类型为字符串。

status

status属性用于返回服务端响应的HTTP响应状态码。

以下是常见的HTTP响应状态码：

• 200：请求成功
• 404：请求失败，请求的资源错误
• 500：请求失败，服务器内部出现错误
• 302：重定向
• 304：缓存优先

statesText

statesText属性用于返回服务端响应的状态文本。

如OK、NotFound等字样。

responseText

responseText属性用于返回响应体主体内容。

返回的数据类型为字符串。

回调函数

readyState

readyState属性用于返回一个整数类型的状态值，它表明当前xhr对象的请求状态。

共有5种形态：

• 0：未初始化，尚未调用open()方法
• 1：已初始化，调用了open()方法，但还未调用send()方法
• 2：已发送，调用了send()方法，但还未收到服务端响应
• 3：已接收，已经收到了部分服务端响应数据
• 4：已完成，已经收到了全部服务端响应数据

readystatechange

readystatechange事件用于设置xhr对象的readState状态发生改变时所执行的回调函数。

简单使用

contentType说明

contentType是HTTP协议中的一个请求头，它包含了浏览器告知后端服务器本次发送数据的格式。

它和<form>表单的enctype参数类似，共有以下一些常见值的选项：

常见的媒体格式类型如下：

• text/html ： HTML格式
• text/plain ：纯文本格式
• text/xml ： XML格式
• image/gif ：gif图片格式
• image/jpeg ：jpg图片格式
• image/png：png图片格式

以application开头的媒体格式类型：

• application/xhtml+xml ：XHTML格式
• application/xml： XML数据格式
• application/atom+xml ：Atom XML聚合格式
• application/json： JSON数据格式
• application/pdf：pdf格式
• application/msword ： Word文档格式
• application/octet-stream ： 二进制流数据（如常见的文件下载）
• application/x-www-form-urlencoded ： <form enctype=“”>中默认的enctype，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

• multipart/form-data ： 在表单中进行文件上传时，就需要使用该格式

我们接下来会使用2种最主流的格式进行试验：

• application/x-www-form-urlencoded （默认的GET和POST数据格式）
• application/json（前端需要发送的JSON格式数据）

GET请求

发送GET请求：

"use strict";

let xhr = new XMLHttpRequest();

// 绑定回调函数
xhr.addEventListener("readystatechange", () => {
    switch (xhr.readyState) {
        case 0:
            console.log("未初始化，尚未调用open()方法");
            break
        case 1:
            console.log("已初始化，调用了open()方法，但还未调用send()方法");
            break
        case 2:
            console.log("已发送，调用了send()方法，但还未收到服务端响应");
            break
        case 3:
            console.log("已接收，已经收到了部分服务端响应数据");
            break
        default:
            console.log("已完成，已经收到了全部服务端响应数据");
            if (xhr.statusText === "OK") {
                console.log("请求成功");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            } else {
                console.log("请求失败");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            }
    }
})

// 请求方式，请求地址与参数，是否开启异步提交  提交的数据格式为url编码
xhr.open("GET", "http://localhost:5700/get?username=Jack&userage=18", true);

// 设置请求头，提交的数据格式为url编码
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.setRequestHeader('user_head', 'HELLO WORLD');

// 发送请求
xhr.send(null);

POST请求

发送POST请求：

"use strict";

let xhr = new XMLHttpRequest();

// 绑定回调函数
xhr.addEventListener("readystatechange", () => {
    switch (xhr.readyState) {
        case 0:
            console.log("未初始化，尚未调用open()方法");
            break
        case 1:
            console.log("已初始化，调用了open()方法，但还未调用send()方法");
            break
        case 2:
            console.log("已发送，调用了send()方法，但还未收到服务端响应");
            break
        case 3:
            console.log("已接收，已经收到了部分服务端响应数据");
            break
        default:
            console.log("已完成，已经收到了全部服务端响应数据");
            if (xhr.statusText === "OK") {
                console.log("请求成功");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            } else {
                console.log("请求失败");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            }
    }
})

// 请求方式，请求地址与参数，是否开启异步提交
xhr.open("POST", "http://localhost:5700/post", true);

// 设置请求头，提交的数据格式为url编码
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.setRequestHeader('user_head', 'HELLO WORLD');

// 发送请求，提交的数据格式为url编码
xhr.send("username=Jack&userage=18");

JSON格式

JSON格式的数据只能由POST请求发起，并且contentType应设置为appliction/json。

示例如下：

"use strict";

let xhr = new XMLHttpRequest();

// 绑定回调函数
xhr.addEventListener("readystatechange", () => {
    switch (xhr.readyState) {
        case 0:
            console.log("未初始化，尚未调用open()方法");
            break
        case 1:
            console.log("已初始化，调用了open()方法，但还未调用send()方法");
            break
        case 2:
            console.log("已发送，调用了send()方法，但还未收到服务端响应");
            break
        case 3:
            console.log("已接收，已经收到了部分服务端响应数据");
            break
        default:
            console.log("已完成，已经收到了全部服务端响应数据");
            if (xhr.statusText === "OK") {
                console.log("请求成功");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            } else {
                console.log("请求失败");
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(xhr.responseText);
            }
    }
})

// 请求方式，请求地址与参数，是否开启异步提交
xhr.open("POST", "http://localhost:5700/json", true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('user_head', 'HELLO WORLD');

// 发送请求
xhr.send(JSON.stringify({ "k1": "v1", "k2": "v2" }));

了解jQuery.ajax的原理

实现代码

原生的XmlHttpRequest所提供的方法太过于底层，因此我们可以对其进行封装。

这里以jQuery的Ajax为蓝本，实现一个类似功能的小组件，也是为了方便后期更加了解jQuery.Ajax()做准备。

我们准备实现的功能：

• 实现发送GET请求
• 实现发送POST请求
• 实现更加方便的添加请求头
• 实现发送JSON格式的请求数据
• 实现自动反序列化JSON格式的响应数据
• 实现文件上传

实现如下：

"use strict";

class Ajax {

    constructor({ url, contentType, headers, data, beforeSend, dataFilter, success, error, complete, dataType = "", processData = true, type, method = type, traditional = false }) {

        // url：发送请求的地址，String类型
        // type：发送请求的方式，String类型，它和method都可以使用
        // method：发送请求的方式，String类型，它和type都可以使用
        // contentType：数据编码格式，相当于form表单的enctype，String类型
        // headers：设置的请求头，Object类型
        // dataType：接收的响应数据类型，如果是json则自动进行反序列化，String类型
        // data：发送的数据，post请求方式发送在请求体内，get请求发送会将其添加在url后，Object类型
        // processData：如果为true，浏览器将采用application/x-www-form-urlencoded方式对数据进行编码，如果为false则按照传入的contentType为准，bool类型
        // traditional：如果前端传递的是一个Array，如{"k1":[1,2,3,4]}则需要添加一个属性traditional:true，否则后端将接收不到该参数。（实际上接受的时候要使用request.POST.get("k1[]")）来进行接受，这是有问题的

        this.xhr = new XMLHttpRequest();
        this.url = url;
        this.type = (type || method).toUpperCase();
        this.method = method.toUpperCase();
        this.headers = headers;
        this.contentType = processData && !contentType ? "application/x-www-form-urlencoded" : contentType;
        this.data = data;
        this.dataType = dataType.toLowerCase();
        this.traditional = traditional;

        // beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
        // dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数，也就是说它会在success与error之前调用
        // success 在请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串
        // error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
        // complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串

        this.beforeSend = beforeSend || function (xhr) { };

        // 该函数默认会自动的根据dataType对象responseText进行解码
        this.dataFilter = dataFilter || function (responseText, dataType) {
            switch (dataType) {
                case "application/json": case "json":
                    // 新增，this.xhr.responseJSON属性
                    this.xhr.responseJSON = JSON.parse(responseText);
                    return this.xhr.responseJSON;
                default:
                    return responseText;
            }
        };
        this.success = success || function (responseText, statusText) { };
        this.error = error || function (responseText, statusText) { };
        this.complete = complete || function (xhr, statusText) { };

        // 绑定回调函数
        this.bindStateChangeEvent();
        // 设置发送的数据并发送
        this.setRequestData();
        // 设置发送方式
        this.setXhrOpen();
        // 设置请求头
        this.setRequestHeader();
        // 发送请求
        this.sendRequest();
    }

    bindStateChangeEvent() {
        let resultText = "";
        let statusText = "";

        // 绑定回调函数，这里采用匿名函数使this指向Object，否则this将指向xhr
        this.xhr.addEventListener("readystatechange", () => {
            switch (this.xhr.readyState) {
                case 1:
                    this.beforeSend(this.xhr);
                    break
                case 4:
                    resultText = this.dataFilter(this.xhr.responseText, this.dataType || this.xhr.getResponseHeader("Content-Type").toLowerCase());
                    if (this.xhr.statusText === "OK") {
                        statusText = "success";
                        this.success(resultText, statusText);
                    } else {
                        statusText = "error";
                        this.error(this.xhr, "error");
                    }
                    this.complete(this.xhr, statusText);
                    break
            }
        });
    }

    setRequestData() {
        // 判断是否要进行url编码，有2种情况：
        // 1.contentType是application/x-www-form-urlencoded时需要url编码
        // 2.传入的对象不是serialize()方法已经序列化好后的对象时不需要url编码
        if (this.contentType === "application/x-www-form-urlencoded" && !Object.isFrozen(this.data)) {
            this.data = this.urlEncode(this.data);
        }
    }

    urlEncode() {
        return Object.entries(this.data).reduce((prev, cur, index, array) => {
            // key
            let key = cur[0];
            // value：2种情况，如果value是普通字符串，则直接进行encodeURIComponent编码处理，如果是数组将按照 k1=v1&k2=v2 的方式进行编码，并且判断是否传入traditional
            let value = this.checkValueIsArray(cur);

            if (array.length - 1 === index) {
                // 判断是否是最后一位，如果是最后一位就加上&
                // traditional：如果前端传递的是一个Array，如{"k1":[1,2,3,4]}则需要添加一个属性traditional:true，否则后端将接收不到该参数。（实际上接受的时候要使用request.POST.get("k1[]")）来进行接受，这是有问题的
                return !this.traditional && cur[1] instanceof Array ? prev += `${key}[]=${value}` : prev += `${key}=${value}`;
            } else {
                return !this.traditional && cur[1] instanceof Array ? prev += `${key}[]=${value}&` : prev += `${key}=${value}&`;
            }
        }, "");

    }

    checkValueIsArray(cur) {
        if (cur[1] instanceof Array) {
            cur[1].forEach((value, index, array) => {
                if (index != array.length - 1) {
                    value = encodeURIComponent(value);
                    array[index] = value + "&";
                } else {
                    array[index] = String(value);
                }
            })

            // traditional：如果前端传递的是一个Array，如{"k1":[1,2,3,4]}则需要添加一个属性traditional:true，否则后端将接收不到该参数。（实际上接受的时候要使用request.POST.get("k1[]")）来进行接受，这是有问题的，这里主要对数组中的第2个元素开始及其之后的所有元素进行url编码格式转换
            return this.traditional ? cur[1].join(`${cur[0]}=`) : cur[1].join(`${cur[0]}[]=`)
        }
        else {
            return encodeURIComponent(cur[1])
        }
    }

    setXhrOpen() {
        // 如果请求方式是GET请求，则在url后加上编码后的data，否则将只传递this.url
        // true参数为开启异步调用，也是默认的选项
        this.xhr.open(
            this.method,
            this.method === "GET" ? this.url.concat("?", this.data) : this.url,
            true
        );
    }

    setRequestHeader() {
        // 在不上传文件的时候，请求头Content-Type是必须的
        for (let [k, v] of Object.entries(this.headers)) {
            this.xhr.setRequestHeader(k, v);
        }
        if (this.contentType) {
            this.xhr.setRequestHeader("Content-Type", this.contentType);
        }
    }

    sendRequest() {
        // 发送请求时，如果请求方式为GET将使用this.xhr.send(null)，否则将使用this.xhr.send(this.data)
        this.xhr.send(this.method === "GET" ? null : this.data);
    }
}

function getAjax(ajaxSettings) {
    return new Ajax(ajaxSettings);
}

function serialize(selector) {
    // 整体思路：先获取一个包含所有表单项对象，再将对象进行url编码

    let formNode = document.querySelector(selector);
    let haveValueNodeObject = {};
    Array.prototype.forEach.call(formNode.elements, (element, index, lst) => {
        switch (true) {
            // 多选或者单选select都将组成列表
            case element.tagName === "SELECT":
                Array.prototype.forEach.call(element.options, (option, index, array) => {
                    if (option.selected) {
                        haveValueNodeObject[element.name] ? haveValueNodeObject[element.name].push(option.value) : haveValueNodeObject[element.name] = [option.value];
                    }
                })
                break

            // 多选，组成列表
            case element.type === "checkbox":
                if (element.checked) {
                    haveValueNodeObject[element.name] ? haveValueNodeObject[element.name].push(element.value) : haveValueNodeObject[element.name] = [element.value];
                }
                break

            // 单选
            case element.type === "radio":
                if (element.checked) {
                    haveValueNodeObject[element.name] = element.value
                }
                break

            // 其他的项目，注意文件对象不获取
            default:
                if (element.name && element.type !== "file") {
                    haveValueNodeObject[element.name] = element.value || "";
                }
        }
    }
    )

    // 冻结对象，代表已经经过序列化了，在发送数据时已避免url二次编码
    // 这里是传入一个对象并且继承Ajax的原型对象，因为这样做才能在编码时使用checkValueIsArray方法
    return Object.freeze(Ajax.prototype.urlEncode.call(
        { data: haveValueNodeObject, traditional: true, __proto__: Ajax.prototype },
    ));
}

function serializeArray(selector) {
    // 提取form表单中的数据，并将其构建为一个name：value的数组 [{name:value}, {name:value}, {name:value}]

    let formNode = document.querySelector(selector);
    let haveValueArray = [];
    Array.prototype.forEach.call(formNode.elements, (element, index, lst) => {
        switch (true) {

            case element.tagName === "SELECT":
                Array.prototype.forEach.call(element.options, (option, index, array) => {
                    if (option.selected) {
                        haveValueArray.push({ "name": element.name, "value": option.value });
                    }
                })
                break

            case element.type === "checkbox" || element.type === "radio":
                if (element.checked) {
                    haveValueArray.push({ "name": element.name, "value": element.value });
                }
                break

            default:
                if (element.name && element.type !== "file") {
                    haveValueArray.push({ "name": element.name, "value": element.value });
                }
        }
    }
    )
    return haveValueArray;
}

window.$ = { ajax: getAjax, serialize, serializeArray };

支持的上传格式

由于我们JavaScript的原生Ajax高度按照jQuery.ajax作为蓝本。所以常见的特性要与其保持一致。

如支持的原生上传数据格式实现：

• 仅支持上传k-v的对象，不支持上传数组
• 前端上传的数据中，不允许出现对象嵌套的形式。如{"k1":{"k1-1":v1}}，这样只会得到{“k1” : “object”}
• 如果前端传递的是一个Array，如 {"k1":[1, 2, 3, 4]} 则需要添加一个属性 traditional:true，否则后端将接收不到该参数。（实际上接受的时候要使用request.POST.get("k1[]")）来进行接受，这是有问题的

如果你上传的数据是json格式，当然就不会出现这些问题了。

如何发送GET请求

发送GET请求示例如下：

// 发送GET请求
$.ajax({
    url: "http://localhost:5700/get",
    method: "get",
    headers: {
        "user_head": "Hello World",
    },
    data: { "name": "Jack", "age": 18 },
    dataType: "json",
    success: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    error: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    complete: (xhr, statusText) => {
        console.log("此处可获取响应头");
    }
})

如何发送POST请求

发送POST请求示例如下：

 // 发送post请求
 $.ajax({
    url: "http://localhost:5700/post",
    method: "post",
    headers: {
        "user_head": "Hello World",
    },
    data: { "name": "Jack", "age": 18 },
    dataType: "json",
    success: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    error: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    complete: (xhr, statusText) => {
        console.log("此处可获取响应头");
    }
})

如何发送JSON数据

发送JSON格式数据示例如下：

// 发送json格式数据
$.ajax({
    url: "http://localhost:5700/json",
    method: "post",
    headers: {
        "user_head": "Hello World",
    },
    data: JSON.stringify({ "name": "Jack", "age": 18 }),    // 1.手动进行JSON格式化
    dataType: "json",
    contentType: "application/json",                        // 2.请求头中声明本次发送的是JSON格式数据
    success: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    error: (responseText, statusText) => {
        console.log(responseText);
        console.log(statusText);
    },
    complete: (xhr, statusText) => {
        console.log("此处可获取响应头");
    }
})

如何提交form表单的数据

针对form表单提交的数据，我们可以使用封装好的2个函数serialize()和serializeArray()。

• serialize()：提取form表单中的数据项，并对其做url编码处理，返回一个字符串，注意，它不会提取文件选择框

• serializeArray()：提取form表单中的数据，并将其构建为一个name：value的数组，注意，它不会提取文件选择框，最终格式为 [{name:value}, {name:value}, {name:value}]，

示例如下，如果是serialize()则直接提交即可：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" id="register">
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>

        <div>
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <label for="male">男</label>
            <input type="radio" name="gender" value="male" id="male" required>
            <label for="female">女</label>
            <input type="radio" name="gender" value="female" id="female">
        </div>

        <div>
            <label for="basketball">篮球</label>
            <input type="checkbox" name="hobby" value="basketball" id="basketball" required>
            <label for="football">足球</label>
            <input type="checkbox" name="hobby" value="football" id="football">
            <label for="volleyball">排球</label>
            <input type="checkbox" name="hobby" value="volleyball" id="volleyball">
        </div>

        <div>
            <label for="city">城市</label>
            <select name="city" id="city" multiple>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
        </div>

        <div>
            <label for="avatar">上传头像</label>
            <input type="file" name="avatar" id="avatar">
        </div>

        <div>
            <button type="button">提交</button>
        </div>

    </form>
</body>
<script src="./demo.js"></script>
<script>
    document.querySelector("button").addEventListener("click", (event) => {
        $.ajax({
            url: "http://localhost:5700/post",
            method: "post",
            headers: {
                "user_head": "Hello World",
            },
            data: $.serialize("#register"),
            dataType: "json",
            success: (responseText, statusText) => {
                console.log(responseText);
                console.log(statusText);
            },
            error: (responseText, statusText) => {
                console.log(responseText);
                console.log(statusText);
            },
            complete: (xhr, statusText) => {
                console.log("此处可获取响应头");
            }
        })

        console.log($.serialize("#register"));
        // username=%E4%BA%91%E5%B4%96&password=123&gender=male&hobby=basketball&hobby=football&city=shanghai&city=shenzhen
    })

</script>

</html>

如果是serializeArray()，需要使用appliction/json的方式进行提交，因为该方法返回的是一个数组：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" id="register">
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>

        <div>
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <label for="male">男</label>
            <input type="radio" name="gender" value="male" id="male" required>
            <label for="female">女</label>
            <input type="radio" name="gender" value="female" id="female">
        </div>

        <div>
            <label for="basketball">篮球</label>
            <input type="checkbox" name="hobby" value="basketball" id="basketball" required>
            <label for="football">足球</label>
            <input type="checkbox" name="hobby" value="football" id="football">
            <label for="volleyball">排球</label>
            <input type="checkbox" name="hobby" value="volleyball" id="volleyball">
        </div>

        <div>
            <label for="city">城市</label>
            <select name="city" id="city" multiple>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
        </div>

        <div>
            <label for="avatar">上传头像</label>
            <input type="file" name="avatar" id="avatar">
        </div>

        <div>
            <button type="button">提交</button>
        </div>

    </form>
</body>
<script src="./demo.js"></script>
<script>
    document.querySelector("button").addEventListener("click", (event) => {
        $.ajax({
            url: "http://localhost:5700/json",
            method: "post",
            headers: {
                "user_head": "Hello World",
            },
            data: JSON.stringify($.serializeArray("#register")),    // 1.手动进行JSON格式化
            dataType: "json",
            contentType: "application/json",                        // 2.请求头中声明本次发送的是JSON格式数据
            success: (responseText, statusText) => {
                console.log(responseText);
                console.log(statusText);
            },
            error: (responseText, statusText) => {
                console.log(responseText);
                console.log(statusText);
            },
            complete: (xhr, statusText) => {
                console.log("此处可获取响应头");
            }
        })

        console.log($.serializeArray("#register"));
        // Array(7)
        // 0: {username: "云崖"}
        // 1: {password: "123"}
        // 2: {gender: "male"}
        // 3: {hobby: "basketball"}
        // 4: {hobby: "football"}
        // 5: {city: "shanghai"}
        // 6: {city: "shenzhen"}
    })

</script>

</html>

如何进行文件上传

如果要发送文件，我们需要借助FormData对象进行数据提交，以下是注意事项。

• 在<form>表单中上传文件，必须要将enctype设置为multipart/form-data。

• 但是在使用XmlHttpRequest对象上传文件时，并不需要指定 contentType为multipart/form-data 格式，所以不添加contentType请求头。

• contentType应设置为false，即不使用任何数据格式，不使用任何编码

• processData应设置为false，不让浏览器做任何数据格式的编码

示例如下，我们使用FormData搭配serializeArray()方法实现一个真正意义上的异步提交表单：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="#" id="register">
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required>
        </div>

        <div>
            <label for="password">密码</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <label for="male">男</label>
            <input type="radio" name="gender" value="male" id="male" required>
            <label for="female">女</label>
            <input type="radio" name="gender" value="female" id="female">
        </div>

        <div>
            <label for="basketball">篮球</label>
            <input type="checkbox" name="hobby" value="basketball" id="basketball" required>
            <label for="football">足球</label>
            <input type="checkbox" name="hobby" value="football" id="football">
            <label for="volleyball">排球</label>
            <input type="checkbox" name="hobby" value="volleyball" id="volleyball">
        </div>

        <div>
            <label for="city">城市</label>
            <select name="city" id="city" multiple>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
        </div>

        <div>
            <label for="avatar">上传头像</label>
            <input type="file" name="avatar" id="avatar">
        </div>

        <div>
            <button type="button">提交</button>
        </div>

    </form>
</body>
<script src="./demo.js"></script>
<script>
    document.querySelector("button").addEventListener("click", (event) => {

        // 获取上传的文件对象
        let fileNode = document.querySelector("#avatar");
        let fileObj = fileNode.files[0];

        // 使用FormData用于伪造form表单提交的数据
        let fd = new FormData();

        // 添加文件
        fd.append(fileNode.name, fileObj);

        // 添加其他表单项
        $.serializeArray("#register").forEach((obj, index, array) => {
            fd.append(obj.name, obj.value);
        });

        // 发送json格式数据
        $.ajax({
            url: "http://localhost:5700/file",
            method: "post",
            headers: {
                "user_head": "Hello World",
            },
            data: fd,            // 直接发送ForData对象即可
            dataType: "json",
            contentType: false,  // 必须设置为false
            processData: false,  // 必须设置为false
            success: (responseText, statusText) => {
                console.log(responseText);
                console.log(statusText);
            },
            error: (xhr, statusText) => {
                console.log(xhr.responseText);
                console.log(statusText);
            },
            complete: (xhr, statusText) => {
                console.log(statusText);
            }
        })
    })
</script>

</html>