一、XMLHttpRequest (无需引入外部库)
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.建立连接
xhr.open(method, url, async, username, password);
async默认为true,username和password为可选参数
3.发送请求
xhr.send(body);
参数 body 表示将通过该请求发送的数据,如果不传递信息,可以设置为 null 或者省略。
4.接收响应数据
可以使用 XMLHttpRequest 对象的 responseBody、responseStream、responseText 或 responseXML 属性等待接收响应数据
5.例子
①post请求需要设置请求头的格式内容:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
②post请求参数放在send里面
- getAllResponseHeaders():获取响应的 HTTP头部消息。
- getResponseHeader(“Header-name”):获取指定的 HTTP 头部消息。
二、jQuery或Ajax(引入jQuery库)
在旧浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面的数据,十分消耗网络资源。而我们只是需要修改页面的部分数据,也希望不刷新页面,因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML):
异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种,如jQuery封装的ajax,原生的XMLHttpRequest,以及axios。
1.get请求
2.post请求
后端接收json或RequestBody时
三、axios(引入axios库)
Axios(ajax i/o system):
这不是一种新技术,本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端