如何用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)
        }
      }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容