Form/Ajax

1 XMLHttpRequest

也算比较简单，需要掌握。不要没有 jQuery 就写不出代码，那样很危险。。

// 初始化
let xhr = new XMLHttpRequest();

// 可以增加请求参数
xhr.timeout = 3000;
xhr.reponseType = "text";

// 打开一部请求
xhr.open('POST', '/url', true);

// 发送请求，允许携带请求参数
xhr.send(null);

// 为请求注册回调函数
xhr.ontimeout = {...}
xhr.error = {...}
xhr.onprogress = {...}
xhr.upload.onprogress = {...}
xhr.onload = function (e) {
    if(this.status == 200) {
        alert(this.responseText);
    } else {
        alert(this.statusText);
    }
};

2 Fetch API

旨在取代 XHR 的新标准，目前不是很成熟，但是日常测试使用很方便。

三个接口一个方法: Headers/Request/Response, fetch()，语法简洁。

fetch('/some.json', {
    method: 'get',
    body: { id: 22 }
}).then(function (resp) {
    resp.json().then(console.log);

}).catch(function (r) {
    console.err(r);
});

3 jQuery

语法示例:

$.ajax({
    url: '/xxx',  // 代表请求的服务器地址
    method: 'get|post|put|patch|delete|options', // 使用的请求方法
    headers: {},  // 设置请求头
    async: true|false, // 是否使用异步请求的方式

    contentType: 'application/x-www-form-urlencoded|...', // 请求的 enctype
    data: 'String'|Object|Array, // 传输的数据
    processData: true|false, // 如果 data 是字符串的话不处理，否则调用 $.params(data, tranditional) => 'aaa=222&bbb=333'
    tranditional: false|true,

    dataType: 'json?xml?html?text', // 默认根据 response 头部的信息自动推测
    xhrFields, cache, accepts, contents, crossDomain, conerters, jsonp, mimeType, timeout
}).done((data) => {  // data 的类型，由 dataType 决定
    console.log(json.xxx)
}).fail((xhr, status, err) { // 参数分别是 ajax 原生对象，错误状态，以及错误对象
    console.error(err);
}).always(() => {
    console.log("终于结束了");
});

发送 JSON 到服务器:

$.ajax({
    url: '/xxx',
    method: 'post',
    contentType: 'application/json',
    data: JSON.stringify({
        name: 'xxx', age: 12
    }),
}).done((data) => {  // data 的类型，由 dataType 决定
    console.log(json.xxx)
}).fail((xhr, status, err) { // 参数分别是 ajax 原生对象，错误状态，以及错误对象
    console.error(err);
}).always(() => {
    console.log("终于结束了");
});

发送 FormData 到服务器:

var formData = new FormData();
formData.append("name", "tomcat");

$.ajax({
    url: '/xxx',
    method: 'post',
    contentType: 'multipart/form-data',
    data: formData,
    processData: false // 不要将 formData 转换为 xxx=222&yyy=333 的方式
}).done((data) => {
    console.log(json.xxx)
}).fail((xhr, status, err) {
    console.error(err);
}).always(() => {
    console.log("终于结束了");
});