和服务端系统的通信
首先web网站 前端浏览器 和 后端系统 是通过HTTP协议进行通信的
同步请求&异步请求：
同步请求：可以从浏览器中直接获取的（HTML/CSS/JS这样的静态文件资源)，这种获取请求的http称为同步请求
异步请求：js代码需要到服务端提交、获取数据（往往是要求服务端程序进行数据库操作后，再进行代码处理，返回的数据），这种请求的http称为异步请求，往往被称为API请求；提供这种服务的后端被称为 API服务端，这种服务接口被称为API接口。
XHR对象和服务端通信
浏览器的js环境内置了一个XMLHttpRequest类型，简称XHR，XHR对象有属性方法，支持 浏览器页面代码 和 服务端之间的通信 ；这种使用 XHR 对象 和 服务端之间的 通信技术，称为异步通信方式。
jQuery库 和服务端通信
jQuery构建异步请求消息
请求方法 —— jQuery库里的ajax()方法
发送get请求
$.ajax({ type: 'GET', url : '/api/mgr/signin',
})发送post请求
$.ajax({ type: 'POST', url : '/api/mgr/signin', data: {username:'byhy',password:'abc',}
})type: HTTP的方法
url：请求的url地址（注意：这里url没有前面的
http://IP:端口这部分，表示前面的这部分和当前网页前面的这部分相同）data：请求消息体
简便写法：
$.get('/api/mgr/signin')$.post('/api/mgr/signin',{username:'byhy',password:'abc'}
)// 或者
$.get({ url : '/api/mgr/signin',
})$.post({ url : '/api/mgr/signin', data: {username:'byhy',password:'abc',}
})可以把上述代码放到HTML中，名为 test.html
<!DOCTYPE html>
<html><head><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head><body><script>$.get('/api/mgr/signin')</script>
</body>
</html>构建请求url和url参数
url参数：?后面的部分，每个参数间用&隔开
由于浏览器内置有 URLSearchParams 类型 ，URLSearchParams对象的方法 toString ,可以将对象序列化为 urlencoded 格式（将参数拼接起来）
var queryStr = new URLSearchParams({code:'6000001', time:'2022-02-23' }).toString()$.get(`http://localhost/api/stock?${queryStr}`)
简便写法：jQuery的param方法
var queryStr = $.param({code:'6000001', time:'2022-02-23' })$.get(`http://localhost/api/stock?${queryStr}`)构建请求消息的消息头
通过headers属性设置，需要指定的填进去就可以了
需要指定的都是一些用在认证上的额外的消息头
$.ajax({ type: 'GET',url: '/api/something',headers: {"X-Test-Header": "test-value"}
})特：contentType —— 指定消息体格式
ajax方法的参数对象 contentType 可以直接设置消息头 contentType 的值；缺省为： application/x-www-form-urlencoded; charset=UTF-8 => urlencoded格式
原本
$.ajax({ url: '/api/something',type: 'GET', headers: {"contentType": "application/json"}
})替换为
$.ajax({ url: '/api/something',type: 'GET', contentType: 'application/json'
})构建请求消息体
通过data属性设置消息头内容
消息头格式：
urlencode格式
如果是jQuery发送的请求， data参数是 Object，缺省行为就是转化为 urlencode格式
$.ajax({// 提交的网址url: 'http://localhost/api/mgr/signin', type: 'POST', data: { username: 'byhy', password:'88888888' }
})JSON格式
如果消息体是JSON格式的字符串，可以使用浏览器js的内置对象JSON的stringify方法，将js对象转化为JSON格式的字符串（序列化）
$.ajax({url: '/api/mgr/signin', type: 'POST', contentType : 'application/json', data: JSON.stringify({ username: 'byhy', password:'88888888'})
})推荐
let body = JSON.stringify(
{ username: 'byhy', password:'88888888'
}
)$.ajax({url: '/api/mgr/signin', type: 'POST', contentType : 'application/json', data: body,
})当然也可以直接在data里写出它的JSON格式
$.ajax({url: '/api/mgr/signin', type: 'POST', contentType : 'application/json', data: `{"username": "byhy", "password":"88888888"}`
})jQuery解析响应消息
解析响应消息头
如果使用的是jQuery，那么ajax提供了一个success这个属性，它的参数是一个函数，定义了成功接收到HTTP响应消息的回调函数（当服务端返回给你响应时，就会回调success后面定义的这个函数，定义函数的时候要注明接收三个参数，其中第3个参数为jqXHR的对象(它是XMLHTTPRequest的扩展类型,封装了一些便捷方法）
$.ajax({url: '/api/mgr/signin', type: 'POST', data: 'username=byhy&password=88888888',// success 成功接收到响应success: function(data, textStatus, xhr) { // 想获取响应消息状态码console.log(textStatus);// 获取所有消息头console.log(xhr.getAllResponseHeaders());// 获取某个消息头console.log(xhr.getResponseHeader("content-length"));},// 没接收到相应 ， 没指定就不处理了 ，指定了就在error里定义 ；errorThrown为错误信息error:function (xhr, textStatus, errorThrown ){console.error(`${xhr.status} \n${textStatus} \n${errorThrown }`)}
})解析响应消息体
$.ajax({url: '/api/mgr/signin', type: 'POST', data: 'username=byhy&password=88888888',// 正确返回success: function(data, textStatus, xhr) { //获取响应消息体的数据console.log(data)}
})jQuery会根据响应的消息头
content-type,猜测响应消息体的格式；登录成功后，jQuery 会自动反序列化为 js中对应的数据对象（Object类型）， 传递给 data参数。
如果你知道响应消息体的数据格式，可以设置 ajax 参数 settings 的 dataType 属性，说明data的类型（不用它猜了）
$.ajax({url: '/api/mgr/signin', type: 'POST', data: 'username=byhy&password=88888888',// 响应消息格式 预设为 json, dataType: 'json', // 正确返回success: function(data, textStatus, xhr) { console.log(data)}
})
dataType属性还可以是：XML、html、text(自定义的格式）
本文参考自：和服务端通信 - 白月黑羽 (byhy.net)