和服务端系统的通信

首先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'})
})

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)}
})