如何用Ajax

使用 Ajax 技术的目的

概念

• Ajax 是一种技术的名称。“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

• 主要价值：无需重新加载整个网页的情况下，能够局部更新部分网页的技术。

代码执行过程分析

Ajax代码执行过程分析.png

请求三要素

• 请求方法

  GET POST

• 请求地址

  http://xxxx

• 请求参数

  {heroName : 赵云}

完整URL地址：

http://127.0.0.1:3001/getHeroSkin?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2

组成部分：

• http:// 协议

• 127.0.0.1 域

• :3001 端口

• /getHeroSkin 资源路径

• ?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2 查询参数

查看请求参数

看执行结果.png

提高工作效率设置代码片段

提前在使用的开发页面中映入JQ文件

设置代码片段.png

"ajax结构": {
        "prefix": "ajax",
        "body": [
            "$.ajax({",
            "  method: '',",
            "  url: '',",
            "  data: {},",
            "  success: (res) => {",
            "    $1",
            "  }",
            "})",
        ],
        "description": "ajax结构生成"
    }

Ajax封装原理

 // 封装一个自己的 ajax 函数
      function myAjax(options) {
        //对象用于与服务器交互
        const xhr = new XMLHttpRequest()
         // 把对象转换成查询参数
        const data = new URLSearchParams(options.data)
        // .toUpperCase()   -  转换成大写
        // 👉 处理 GET 请求
        if (options.method.toUpperCase() === 'GET') {
          xhr.open(options.method, `${options.url}?${data}`)
          xhr.send()
        }
        // 👉 处理 POST 请求
        else if (options.method.toUpperCase() === 'POST') {
          xhr.open(options.method, options.url)
          // 考虑到 POST 的兼容问题，添加 Content-Type
          xhr.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded',
          )
          // 请求参数需要写到 send 方法中
          xhr.send(data)
        }
        xhr.onload = function () {
          const obj = JSON.parse(xhr.response)
          // 👉 调用 success 函数，把转换后成对象后的 res 传递给形参
          options.success(obj)
        }
      }