JavaScript与服务端进行数据交互的方式

程序员林涛技术 2022年11月9日

0 收藏 664 点赞 3,885 浏览 1288 个字

XMLHttpRequest

XHR是项古老的技术，不同的浏览器厂商对其实现方式不同，例如有些浏览器只支持onload事件处理器，有些只支持onreadystatechange事件处理器。

发送Get请求

// 创建XHR请求
let request = new XMLHttpRequest();
// 指定用于从网络请求资源的HTTP方法和URL
request.open('GET', url);
// 设置响应类型,默认'text'
request.responseType = 'application/json';
// (可选)设置请求头
// request.setRequestHeader(header,value);
// 响应已经返回时,将执行onload事件处理器
request.onload = function() {
  let resp = request.response;
};
// 发送请求
request.send();

发送POST请求

let request = new XMLHttpRequest();
request.open('POST', url);
request.responseType = 'application/json';
request.onload = function() {
  let resp = request.response;
};
request.send("username=lyp&password=123");

Fetch API

发送GET请求

fetch(url)
    .then(function(response) {
        response.text()
            .then(function(text) {            });
    });

Promises

fetch发送请求，接收响应，返回值是一个Promises；

then运行后续操作，参数为一个函数，这个函数接收1个参数，就是从Promises中解析出来的response；

response的text()方法用于获取响应的纯文本格式，返回值依然是一个Promises，可以接着连接另一个then；

then的返回值依然是一个Promises，可以接着连接另一个then，所以，上面的代码等价于下面的代码

fetch(url)
    .then(function(response){
        return response.text();
    })
    .then(function(text){    });

response

请求是否成功：response.ok

响应的网络状态和描述性消息：response.status response.statusText

响应主体内容：response.text() response.json() response.blob()

发送POST请求

fetch(url,{
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
})
.then(response=>response.json())
.then(data=>console.log(data));