Form表单------AJAX------Fetch

Posted 2020-09-09 kakaguo

1.在Ajax之前

最开始，浏览器发起请求的过程如下：

用户输入网址/a标签/img标签等 --> 服务器返回html/css/js --> 用户接收后重新加载页面。

上面的请求发起方式，要么会导致页面刷新（form表单提交也是如此），要么只能请求特定类型的文件（图片，css，或JS)。

2.AJAX的到来

AJAX的实质就是用JS发起一个请求，并得到服务器返回的内容。

而JS发起请求的关键，是通过浏览器提供的XMLHttpRequest接口。请求过程如下：

//创建一个XMLHttpRequest对象
var request = new XMLHttpRequest()

//监听成功请求后的状态变化, request.responseText 就是服务器返回的内容了（默认是字符串）
request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

// 设置请求参数
request.open("GET", "filename", true);

//发送请求
request.send();

上述过程，通过jQuery的封装后：

$.get(‘filename‘).then(function(response){
  // 这里的 response 就是返回的内容
})

3.Fetch API

既然浏览器都提供了XMLHttpRequest这个API，为什么不直接提供封装好的接口呢？

Fetch API就是浏览器提供的原生AJAX接口。可以使用window.fetch函数代替以前的$.ajax。

也就是说，浏览器帮我们把jQuery.ajax给实现了，以后可以直接用fetch来发送异步请求。

fetch(‘/‘).then(function(response){
    response.text().then(function(text){
        console.log(text)
    })
})

不过Fetch API，基于ES6.