美文网首页
如何用Ajax

如何用Ajax

作者: 爱吃炸鸡的Banana | 来源:发表于2021-01-24 19:35 被阅读0次

使用 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)
        }
      }

相关文章

  • <input type="file"&

    1.如何用ajax上传文件 想要用ajax上传文件,需要借助一个javascript对象FormData,首先我们...

  • 如何用Ajax

    使用 Ajax 技术的目的 概念 Ajax 是一种技术的名称。“Asynchronous Javascript A...

  • 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台

    这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的...

  • AngularJS学习第九天:angular中$http服务简单

    $http服务是什么? $http 就是JQuery中的 $.ajax 如何用? 请求一个已存在的json文件 n...

  • Angular学习第九天

    $http 服务是什么? $http 就是JQuery中的$.ajax 如何用? 请求一个已存在的json文件 n...

  • React中的“ajax”

    React没有ajax模块 集成其他的js库(如axios/fetch/jquery),发送ajax请求axios...

  • 关于AJAX的心得

    如往常一样我们先来了解一下什么是AJAX? AJAX## AJAX 是一种创建交互式网站网页应用的网页开发技术,...

  • 异步面试知识点

    应用场景 网络请求,如ajax,图片加载 定时任务,如setTimeout Promise解决callback h...

  • Http浅析【2】——ajax跨域问题

    视频参考:ajax跨域完全讲解 本文精华版:【综合】ajax跨域问题 什么是跨域问题 简单来讲,当前台调用后台,如...

  • 原生JS封装AJAX

    一直以来ajax这一块用的都是第三方,如jquery内置的$.ajax,vue最佳拍档axios等,理论来说这些插...

网友评论

      本文标题:如何用Ajax

      本文链接:https://www.haomeiwen.com/subject/uwomzktx.html