前言

1.从 <from> 提交,到 ajax ,前后端的交互变得更加灵活且舒适,再到 JQ 的 $ajax 、axios,我们好像写起来越来越方便了,但是,我越来越忘记了 ajax 原本到底是个什么东西,他原本长得什么样子?我有印象,但似乎,又不太知道他是个啥,除了 ajax ,fetch 又是什么?
这次,就让我好好复习,重温前后端的交互吧

ajax

是什么

1.ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)
2.他并不是一种新的语言,而是一种使用现有技术标准的新方法
3.它可以再不重新加载整个页面的情况下,与服务器交换数据并能够更新部分网页的技术
4.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新

基本使用

  • ajax 基于 XMLHttpRequest 对象
  • 创建 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();
  • 配置请求参数
  • 同步会造成代码阻塞,将在数据交互完成后(成功、超时、失败等)才可进行下一步操作,用户会感觉卡顿,用户体验不好,一般使用异步(可以调一下浏览器网速看看效果)
    xhr.open('get', '/checkUserName', true); // true 为异步 false 为同步
  • 接收返还值
  • 返回值将于 xhr.responseText 呈现
    xhr.onload = function () {
      console.log(this.responseText)
    }
  • 发送至服务器

    xhr.send();

xhr.open(method, url, async)

    1. 规定向服务器发送请求的配置
    • method - 请求的类型;get 或 post
    • url - 文件在服务器的位置 - 请求数据地址
    • async - 是否采用异步处理 - true: 同步; false: 异步

    get 和 post 注意点

    • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用
    • 然而,在以下情况中,请使用 POST 请求:

      • 无法使用缓存文件(更新服务器上的文件或数据库)
      • 向服务器发送大量数据(POST 没有数据量限制)
      • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    发送数据

    URL 传参

    1. queryString

      • 一般形式为 ?key=val
      • 如果有多个参数则通过 & 进行拼接,如:?key1=val1&key2=val2
    2. params

      • node - KoaRouter 后端表现形式为 /get/:key ,以 : 表示
      • 前端则是在 URL 后加上 /val 传
      • 如多个参数,后端: /get/:key1/:key2;前端: /val1/val2
        3.queryString 和 params 注意点
      • 选择使用 queryString 还是 params 其实都可以,视路由设计思路选择
      • 值得注意的是 和 function 的传参一样

        • 如果是 params 的话即使前面的传参不需要,也需要占位,例如:/val1/val2,val1 不需要的情况下也要写上占位
        • 而 queryString 则不需要,想要传哪一个参数,直接写对应的 key=val 就可以了
      • params 规定动态路由后,如不带参数,请求失败,例如:
      • 后端:get/:key
      • 前端必须请求:/get/val,如直接请求 /get 则会请求失败
      • URL 的传参与请求方式 get 和 post 无关,两种请求方式都可以 URL 携带参数

    xhr.send()

    • 在发送请求到服务器时,可携带参数
    • 此方法仅用于 post
    • 发送数据时需要设置http正文头格式

      • 请求头类型与 <from> 表单的 enctype 基本一样
        1.text/plain - 不写正文头格式 - 以 string 进行发送

    2.application/x-www-form-urlencoded - 以默认编码进行发送

    - 写法类似于 queryString ,不过没有 ?,以 & 进行连接 
    
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(`key1=val1&key2=val2`); // -> { key1: 'val1', key2: 'val2' }

    3.multipart/form-data - 以二进制编码进行发送 - 多用于发送文件等内容:FromData
    4.application/json - 以 json 编码进行发送

    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
        key1: 'val1',
        key2: 'val2'
    }));
    // -> { key1: 'val1', key2: 'val2' }

    返还信息 - XMLHttpRequest.response

    • 获取返还头信息

      1. xhr.getAllResponseHeaders() - 获取所有信息
      2. xhr.getResponseHeader() - 获取指定信息,例:xhr.getResponseHeader('Content-Type')
    • 获取返还正文

      1. xhr.response - 获得 ArrayBuffer、Blob、Document、Object 或 DOMString 形式的响应数据
      2. xhr.responseText - 获得字符串形式的响应数据
      3. xhr.responseXML - 获得 XML 形式的响应数据
      4. xhr.responseURL - 获得 序列化URL

        • 如果URL为空则返回空字符串
        • 如果URL有锚点,则位于URL # 后面的内容会被删除
        • 如果URL有重定向,responseURL 的值会是经过多次重定向后的最终 URL
    • 注意:

      • 获取返还正文需要后台正确写入响应头 Content-Type
      • 如后台响应头 Content-Type 没写或者书写错误前端也可以进行重写修改
        xhr.overrideMimeType() // 重写 Content-Type

    FromData

    • FormData对象用以将数据编译成键值对,以便用 XMLHttpRequest 来发送数据
    • 其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用
    • 如果表单 enctype 属性设为 multipart/form-data,则会使用表单的 submit() 方法来发送数据,从而,发送数据具有同样形式
    const form = new FormData();
    // FormData 对象可添加多个键,这里第一个键是 input[type=file] 的files[0]
    form.append('img', file);
    form.append('name', '图片');
    const xhr = new XMLHttpRequest();
    xhr.open('post', '/upload', true);
    xhr.send(form); // send() 内正文提交

    ajax 属性及事件钩子

    1.xhr.readyState (只读) - 返回 一个无符号短整型(unsigned short)数字,代表请求的状态码

    状态描述
    0UNSENT代理被创建,但尚未调用 open() 方法。
    1OPENED中open() 方法已经被调用。
    2HEADERS_RECEIVEDsend() 方法已经被调用,并且头部和状态已经可获得。
    3LOADING中下载中; responseText 属性已经包含部分数据。
    4DONE下载操作已完成。

    2.xhr.status - 返回 XMLHttpRequest 响应中的数字状态码

    HTTP状态码描述
    100继续。继续响应剩余部分,进行提交请求
    200成功
    301永久移动。请求资源永久移动到新位置
    302D临时移动。请求资源零时移动到新位置
    304未修改。请求资源对比上次未被修改,响应中不包含资源内容
    401未授权,需要身份验证禁止。请求被拒绝
    403禁止。请求被拒绝
    404H未找到,服务器未找到需要资源
    500服务器内部错误。服务器遇到错误,无法完成请求
    503D服务器不可用。临时服务过载,无法处理请求

    3.xhr.onreadystatechange - 当 readyState 属性发生变化时触发

    • 这个方法不该用于同步的requests对象
    • 当一个 XMLHttpRequest 请求被 abort() 方法取消时,其对应的 readystatechange 事件不会被触发
    const xhr = new XMLHttpRequest();
    xhr.open('post', '/demo', true);
    xhr.onreadystatechange = function () {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
            console.log(this.responseText);
        }
    }
    xhr.send();

    4.xhr.timeOut - 最大请求时间(毫秒)

    • 一个无符号长整型(unsigned long)数字
    • 若超出该时间,请求会自动终止

    5.XMLHttpRequestEventTarget.ontimeout - 当请求超时调用的 EventHandler
    6.xhr.upload - 返回一个 XMLHttpRequestUpload 对象,用来表示上传的进度

    事件相应属性的信息类型
    onloadstart获取开始
    onprogress数据传输进行中、 event.total:需要传输的总大小、event.loaded :当前上传的文件大小
    onabort获取操作终止
    onerror获取失败
    onload获取成功
    ontimeout获取操作在用户规定的时间内未完成
    onloadend获取完成(不论成功与否)
    最后修改:2021 年 04 月 08 日 11 : 51 PM
    如果觉得我的文章对你有用,请随意赞赏