JS网络请求

独憩

于 2022-11-12 21:58:45 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_54517101/article/details/127710921

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

POST请求的x-www-form-urlencoded格式

前后端分离

服务器渲染

早期前端的渲染是后端完成的，也就说浏览器会拿到index.html，但是内部的组件都是由数据库调出，再运用到html.html中，再反馈到浏览器

所有工作都是后端完成，既需要维护数据库，还有维护服务器，还要关注html和CSS内容

服务端渲染（前后端分离）

也就是说，浏览器现将html+css+js下载，在js中会有一些网络请求，发送到API服务器，此服务器再从数据库寻找数据，直接反馈给浏览器服务端

这个的好处是，后端只需要维护API服务器和数据库，不用再关注html+css的内容

HTTP

组成

HTTP一般由请求（Request）和响应（Response）组成

一般请求和响应的内容分别长下面这个样子

都由请求（响应）行，请求（响应）头，请求（响应）体组成

请求头

这里的content-type 指的是数据传输的格式，比如我要传一个对象user= {name:'aaa',age:17}

第一种格式可能是{name=aaa&age=17}

第二种格式是JSON格式

所有要把哪种格式告诉服务器，让服务器知道怎么处理

keep-alive

http是引用层协议，要与服务器取得交流一般是通过TCP协议完成

一般来说，发送一次请求，就会建立起一个tcp协议通道，在完成交互之后消除此通道，在下一次请求时，再建立tcp通道，但是建立通道是比较消耗资源的。

可以通过设置这个keep-alive延长tcp通道消除时间，node一般是5秒

accept-encoding是文件压缩格式，一般来说是一个文件。例如需要的是.gz，那么服务器就会将js文件打包为gz格式的文件发到客户端，这样的好处是能压缩文件大小，缩短传输时间

accep是指数据格式，一般有XML或者JSON，但是现在基本上都是JSON，或者直接设置成全部接受/*/

响应状态码

HTTP 响应状态码 - HTTP | MDN

一般来说小于400是正确的，400-500是服务端的错误，大于500是服务器的错误

HTTP版本

HTTP请求方式

请求方式的意思是，如果我需要服务器对我进行不同的响应，我在发送请求时最好也能不一样。

例如我想从服务器得到数据，那么发送的是GET请求

如果我只想给服务器传递数据，那么发送的是POST请求

在最开始的时候HTTP只有GET请求，所有很不好判断服务器的响应类型

XHR

AJAX

  <script>
    //第一步创建xhr对象
    let xhr = new XMLHttpRequest()

    //第二步监听该对象的改变，获取返回数据也是通过它

    xhr.onreadystatechange = function(){
      let responseget = JSON.parse(xhr.response)
      console.log();
    }

    //第三步 配置请求
    xhr.open('get','http://123.207.32.32:8000/home/multidata')

    //第四步，发送请求
    xhr.send()
  </script>

第三步时最重要的参数是两个，就是请求类型和对应的URL

但是上面那个代码是会报错的，因为xhr的状态会发生很多改变，而有些改变发生时，可能不存在xhr.response

我们来看看状态改变情况

    xhr.onreadystatechange = function(){
      // let responseget = JSON.parse(xhr.response)
      console.log(xhr.readyState);
    }

异步与同步请求

    xhr.send()
    console.log(11111);

在send后的代码，会先执行

那是因为网络请求需要时间，而js代码在此处是不会等待网络请求结束的，会继续执行后面的代码，当请求结束时，会将其放入宏任务，后续再执行，这就是异步请求

当然也可以设置为同步，只需要设置open函数的第三个参数，代表异步为false，当然默认是true，且在实际开发中一般是用异步请求

    xhr.open('get', 'http://123.207.32.32:8000/home/multidata',false)

    //第四步，发送请求
    xhr.send()
    console.log(11111);

事件监听

除了上面说的onreadystatechang，还有很多事件监听的方法

例如上面在xhr状态发生变化的时候还需要进行判断其是否传递结束

这里就可以直接使用Onload

    xhr.onload=function(){
      console.log(this.response);
    }

响应数据与响应类型

responseType会默认设置为text，所以在上面的例子中，实际上网络返回的是JSON格式

但是我们拿到的response确实文本类型，就是因为responseType会默认设置为text

现在开发一般服务器返回的都是JSON格式，所以直接xhr.responseType='json'是没有问题的

但是需要注意的是，如果服务器返回的不是JSON格式，那么xhr.responseType='json'会使得返回值为null

HTTP响应的状态status

参数传递

Get请求的query参数

    let xhr = new XMLHttpRequest()

    xhr.onload=function(){
      console.log(this.response);
    }

    xhr.responseType='json'

    xhr.open('get', 'http://123.207.32.32:1888/02_param/get?name=why&age=18')


    xhr.send()

这个地方http://123.207.32.32:1888/02_param/get是服务器地址，里面其实啥也没有，通过后面的?+查询字符串的方式可以给服务器传递参数

输出内容为：{"method":"get","data":{"name":"why","age":"18"},"source":"query"}

现在的应用场景是，当服务器地址中数据很多，可以通过这种方式查找数据，例如

xhr.open('get', 'http://123.207.32.32:1888/many_ids?id=1111')

假设在http://123.207.32.32:1888/many_ids中有很多用户数据，可以通过这种方式找到id为1111的数据

缺点是，传递的数据都在url中，相对来说不安全

POST请求的x-www-form-urlencoded格式

    let xhr = new XMLHttpRequest()

    //第二步监听该对象的改变，获取返回数据也是通过它
    xhr.onload=function(){
      console.log(this.response);
    }

    // xhr.responseType='json'
    //第三步 配置请求

    xhr.open('post', 'http://123.207.32.32:1888/02_param/posturl')

    //第四步，发送请求
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')//告诉服务器传递参数的格式
    xhr.send('name=why&age=18')

输出为{"method":"post","data":{"name":"why","age":"18"},"source":"urlencoded"}

POST请求的formdata格式

  <form action="" class="ifo">
    <input type="text" name="name">
    <input type="text" name='password'>
  </form>
  <button class="send"></button>
  <script>
    const ifo = document.querySelector('.ifo')
    document.querySelector('.send').addEventListener('click', function () {
      //第一步创建xhr对象
      let xhr = new XMLHttpRequest()

      //第二步监听该对象的改变，获取返回数据也是通过它
      xhr.onload = function () {
        console.log(this.response);
      }

      // xhr.responseType='json'
      //第三步 配置请求
      // xhr.open('get', 'http://123.207.32.32:8000/home/multidata?key=banner')
      xhr.open('post', 'http://123.207.32.32:1888/02_param/postform')

      //第四步，发送请求
      // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')//告诉服务器传递参数的格式
      let dataform = new FormData(ifo)
      xhr.send(dataform)

    })

这个地方主要是将表单的html元素创建formdata对象，let dataform = new FormData(ifo)，再传入send函数

显然这种方法一般运用于表单数据传递

POST请求的JSON格式

    let xhr = new XMLHttpRequest()

    //第二步监听该对象的改变，获取返回数据也是通过它
    xhr.onload = function () {
      console.log(this.response);
    }

    // xhr.responseType='json'
    //第三步 配置请求
    xhr.open('post', 'http://123.207.32.32:1888/02_param/postjson')

    //第四步，发送请求
    xhr.setRequestHeader('Content-type', 'application/json')//告诉服务器传递参数的格式
    xhr.send(JSON.stringify({name:'aaaa',age:18}))

过期时间和取消请求

对于要等待比较久的网络请求，可以设置过期时间，当时间超过的时候就取消这个请求

    xhr.timeout = 3000
    xhr.open('get', 'http://123.207.32.32:1888/01_basic/timeout')

当然也可以监听这个取消请求的操作

    xhr.ontimeout=()=>{
      console.log('过期');
    }

也可以手动取消请求

  <button class="send"></button>
  <script>

    document.querySelector('.send').addEventListener('click', function () {
      xhr.abort()
    })

Fetch

一般使用方式

    fetch('http://123.207.32.32:8000/home/multidata').then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })

但是返回的是一个Stream，需要通过json函数转换为promise对象，再调用then

    fetch('http://123.207.32.32:8000/home/multidata').then(res=>{
      return res.json()
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })

用更优雅的方式

    async function getdata(){
      const response = await fetch('http://123.207.32.32:8000/home/multidata')
      const res = await response.json()
      console.log(res);
    }

    getdata()

如果是post方式，要传入参数

    async function getdata(){
      const response = await fetch('http://123.207.32.32:1888/02_param/postjson',{
        method:'post',
        headers:{
          'Content-type':'application/json'
        },
        body:JSON.stringify({
          name:123,
          age:128
        })
      })
      const res = await response.json()
      console.log(res);
    }

    getdata()

独憩

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS网络请求

输出为{"method":"post","data":{"name":"why","age":"18"},"source":"urlencoded"}例如需要的是.gz，那么服务器就会将js文件打包为gz格式的文件发到客户端，这样的好处是能压缩文件大小，缩短传输时间。一般来说，发送一次请求，就会建立起一个tcp协议通道，在完成交互之后消除此通道，在下一次请求时，再建立tcp通道，但是建立通道是比较消耗资源的。一般来说小于400是正确的，400-500是服务端的错误，大于500是服务器的错误。
复制链接

扫一扫