【Ajax】了解Ajax与jQuery中的Ajax

news2024/11/17 4:36:05

一、了解Ajax

    • 什么是Ajax

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

2. 为什么要学Ajax

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax能让我们轻松实现网页与服务器之间的数据交互。

3. Ajax的典型应用场景

3.1 用户名检测

注册用户时，通过 ajax 的形式，动态检测用户名是否被占用

3.2 搜索提示

当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表

3.3 数据分页显示

当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据

3.4 数据的增删改查

数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

二、jQuery中的Ajax

    • 了解jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：

$.get(); //一般是从服务器获取数据
$.post(); //一般是向服务器提交数据
$.ajax(); //既可以获取数据，也可以提交数据

2. $.get()函数的语法

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

$.get(url, [data], [callback]);

其中，三个参数各自代表的含义如下：

参数名

参数类型

是否必选

说明

url

string

是

要请求的资源地址

data

object

否

请求资源期间要携带的参数

callback

function

否

请求成功时的回调函数

2.1 $.get()发起不带参数的请求

使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：

  <script src="./lib/jquery.js"></script>

  <button id="btnGET">发起不带参数的GET请求</button>

  <script>
    $(function () {
      // 获取按钮元素，添加绑定事件，添加回调函数
      $('#btnGET').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
          console.log(res); // 这里的 res 是服务器返回的数据
        })
      })
    })
  </script>

2.2 $.get()发起带参数的请求

使用 $.get() 函数发起带参数的请求时，需要指定参数，示例代码如下：

  <script src="./lib/jquery.js"></script>

  <button id="btnGETINFO">发起单参数的GET请求</button>

  <script>
    $(function () {
      $('#btnGETINFO').on('click', function () {
        // 通过对象指定携带的参数
        $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
          console.log(res)
        })
      })
    })
  </script>

3. $.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.post(url, [data], [callback]);

其中，三个参数各自代表的含义如下：

参数名

参数类型

是否必选

说明

url

string

是

提交数据的地址

data

object

否

要提交的数据

callback

function

否

数据提交成功时的回调函数

3.1 $.post()向服务器提交数据

使用 $post() 向服务器提交数据的示例代码如下：

  <script src="./lib/jquery.js"></script>

  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '活着', author: '余华', publisher: '天津图书出版社' }, function (res) {
          console.log(res)
        })
      })
    })
  </script>

4. $.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax({
type: '', // 请求的方式，例如 GET 或 POST
url: '', // 请求的 URL 地址
data: { }, // 这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
});

4.1 使用$.ajax()发起GET请求

使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 'GET' 即可：

  <script src="./lib/jquery.js"></script>

  <button id="btnGET">发起GET请求</button>

  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET', // 请求的方式，大小写都可
          url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的 URL 地址
          data: { // 这次请求要携带的数据：要查看id为1的那一条信息
            id: 1 
          },
          success: function (res) { // 请求成功之后的回调函数
            console.log(res)
          }
        })
      })
    })
  </script>

4.2 使用$.ajax()发起POST请求

使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：

  <script src="./lib/jquery.js"></script>

  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST', // 请求的方式
          url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址
          data: { // 要提交给服务器的数据
            bookname: '史记',
            author: '司马迁',
            publisher: '上海图书出版社'
          },
          success: function (res) { // 请求成功之后的回调函数
            console.log(res)
          }
        })
      })
    })
  </script>

三、封装自己的Ajax函数

    • 要实现的效果

模仿jQuery封装自己的Ajax函数：

<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>
<script>
// 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
itheima({
method: '请求类型',
url: '请求地址',
data: { /* 请求参数对象 */ },
success: function(res) { // 成功的回调函数
console.log(res) // 打印数据
}
})
</script>

2. 定义options参数选项

itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

  • method 请求的类型

  • url 请求的 URL 地址

  • data 请求携带的数据

  • success 请求成功之后的回调函数

3. 处理data参数

在封装Ajax函数时，希望用户通过对象形式提交参数，因为对象形式对用户而言使用方便，但是在底层使用XHR对象发请求时，所有的参数都是通过查询字符提交给服务器的，所以，需要把 data 对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义 resolveData 函数如下：

itheima.js：

// resolveData 函数：处理 data 参数，将用户提交过来的data参数转换成查询字符串形式返回出去
function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}

var res = resolveData({ name: 'zs', age: 20 })
console.log(res)

测试.html:

  <script src="./js/itheima.js"></script>

效果图：

4. 定义itheima函数

在 itheima() 函数中，需要创建 xhr 对象，并监听 onreadystatechange 事件：

itheima.js：

function itheima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)  // 把json字符串转成JS对象
      options.success(result)   // 成功回调
    }
  }
}

5. 判断请求的类型

不同的请求类型，对应 xhr 对象的不同操作，因此需要对请求类型进行 if … else … 的判断：

itheima.js：

function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }
  return arr.join('&')
}

function itheima(options) {
  var xhr = new XMLHttpRequest()
  var qs = resolveData(options.data)


  // 3.判断请求的类型
  if (options.method.toUpperCase() === 'GET') {     // toUpperCase转换成大写
    // 发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText) // 把json字符串转成JS对象
      options.success(result)   
    }
  }
}

测试.html:

  <script src="./js/itheima.js"></script>

  <script>
    // 测试GET请求：
    itheima({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      data: {
        id: 1
      },
      success: function (res) {
        console.log(res)
      }
    })


    // 测试POST请求：
    // itheima({
    //   method: 'post',
    //   url: 'http://www.liulongbin.top:3006/api/addbook',
    //   data: {
    //     bookname: '水浒传',
    //     author: '施耐庵',
    //     publisher: '北京图书出版社'
    //   },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })
  </script>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/174825.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

使用MQTT fx测试云服务器的 mosquitto 通讯

使用MQTT fx测试云服务器的 mosquitto 通讯

文章目录一.MQTT.fx介绍二.MQTT.fx安装教程三.使用MQTT.fx测试云服务器的 mosquitto 通讯一.MQTT.fx介绍 MQTT.fx是一款基于Eclipse Paho&#xff0c;使用Java语言编写的MQTT客户端工具。支持通过Topic订阅和发布消息&#xff0c;用来前期和物理云平台调试非常方便。 二.MQTT…
阅读更多...
【数据结构——顺序表的实现】

【数据结构——顺序表的实现】

前言&#xff1a; 在之前我们已经对复杂度进行的相关了解&#xff0c;因此现在我们将直接进入数据结构的顺序表的相关知识的学习。 目录1.线性表2.顺序表2.1概念及结构2.2 接口实现2.2.1.打印顺序表2.2.2初始化顺序表2.2.3.容量的检查2.2.4.销毁顺序表2.2.5.尾插操作2.2.6.尾删…
阅读更多...
Ubuntu下的LGT8F328P MiniEVB Arduino开发和烧录环境

Ubuntu下的LGT8F328P MiniEVB Arduino开发和烧录环境

基于 LGT8F328P LQFP32 的 Arduino MiniEVB, 这个板型资料较少, 记录一下开发环境和烧录过程以及当中遇到的问题. 关于 LGT8F328P 芯片参数 8位RISC内核32K字节 Flash, 2K字节 SRAM最大支持32MHz工作频率 集成32MHz RC振荡器集成32KHz RC振荡器 SWD片上调试器工作电压: 1.8V…
阅读更多...
C语言文件操作（3）

C语言文件操作（3）

TIPS 1. 文件是不是二进制文件&#xff0c;不是后缀说了算&#xff0c;而是内容说了算 2. 文件的随机读写 文件的随机读写也就是说我指哪打哪 fseek() 人为调整指针指向的位置 1. 根据文件指针FILE*的当前位置和你给出的偏移量来让它这个文件指针呢定位到你想要的位置上…
阅读更多...
Flutter 这一年：2022 亮点时刻

Flutter 这一年：2022 亮点时刻

回看 2022&#xff0c;展望 Flutter Forward 2022 年&#xff0c;我们非常兴奋的看到 Flutter 社区持续发展壮大&#xff0c;也因此让更多人体验到了令人难以置信的体验。每天有超过 1000 款使用 Flutter 的新移动应用发布到 App Store 和 Google Play&#xff0c;Web 平台和桌…
阅读更多...
实战打靶集锦-002-SolidState

实战打靶集锦-002-SolidState

**写在前面&#xff1a;**谨以此文纪念不完美的一次打靶经历。 目录1. 锁定主机与端口2. 服务枚举3. 服务探查3.1 Apache探查3.1.1 浏览器手工探查3.1.2 目录枚举3.2 JAMES探查3.2.1 搜索公共EXP3.2.2 EXP利用3.2.2.1 构建payload3.2.2.2 netcat构建反弹shell3.2.3 探查JAMES控…
阅读更多...
三十一、Kubernetes中Service详解、实例第一篇

三十一、Kubernetes中Service详解、实例第一篇

1、概述 在kubernetes中&#xff0c;pod是应用程序的载体&#xff0c;我们可以通过pod的ip来访问应用程序&#xff0c;但是pod的ip地址不是固定的&#xff0c;这也就意味着不方便直接采用pod的ip对服务进行访问。 为了解决这个问题&#xff0c;kubernetes提供了Service资源&…
阅读更多...
NX二开ufun函数UF_MODL_ask_curve_points(获取曲线信息)

NX二开ufun函数UF_MODL_ask_curve_points(获取曲线信息)

根据曲线tag&#xff0c;返回曲线相关信息&#xff1a;弦宽容、弧度、最大步长、点数组的点。 实例返回结果截图如下&#xff1a; 实例创建曲线截图如下&#xff1a; 1、函数结构 int UF_MODL_ask_curve_points &#xff08;tag_t curve_id&#xff0c; double ctol&#xf…
阅读更多...
【SpringCloud19】SpringCloud Alibaba Sentinel实现熔断与限流

【SpringCloud19】SpringCloud Alibaba Sentinel实现熔断与限流

1.概述 官网 中文文档 1.1 是什么 一句话解释&#xff0c;之前我们讲解过的Hystrix 1.2 怎么下 下载网址 1.3 作用 1.4 如何使用 官网学习 服务使用中的各种问题&#xff1a; 服务雪崩服务降级服务熔断服务限流 2.安装Sentinel控制台 2.1 组成部分 核心库&#x…
阅读更多...
Golang之实战篇(1)

Golang之实战篇(1)

"千篇一律&#xff0c;高手寂寞。几十不惑&#xff0c;全都白扯"上篇介绍了golang这门新的语言的一些语法。那么我们能用golang简单地写些什么代码出来呢&#xff1f;一、猜数字这个游戏的逻辑很简单。系统随机给你生成一个数&#xff0c;然后读取你猜的数字&#xf…
阅读更多...
老杨说运维 | AIOps如何助力实现全面可观测性（上）

老杨说运维 | AIOps如何助力实现全面可观测性（上）

前言&#xff1a; 嗨&#xff0c;今天是大年三十&#xff0c;大家是不是已经在家坐享团圆之乐了&#xff1f;还是说在奔向团圆的路上呢&#xff1f;不论如何&#xff0c;小编先祝大家新年如意安康&#xff0c;平安顺遂~ 熟悉我们的朋友肯定都知道&#xff0c;关于《老杨说运维…
阅读更多...
30.字符串处理函数

30.字符串处理函数

文章目录1.测字符串长度函数2.字符串拷贝函数1.strcpy函数2.strncpy函数3.字符串追加函数1.strcat函数2.strncat函数4.字符串比较函数1.strcmp函数2.strncmp函数5.字符查找函数1.strchr函数2.strrchr函数6.字符串匹配函数7.空间设定函数8.字符串转换数值9.字符串切割函数strtok…
阅读更多...
【Java开发】Spring Cloud 04 ：服务治理Nacos

【Java开发】Spring Cloud 04 ：服务治理Nacos

本章节正式进入 Spring Cloud 环节了&#xff0c;首先介绍微服务架构中一个最重要的原理概念&#xff1a;服务治理&#xff0c;在概念讲解之后&#xff0c;讲解介绍 Nacos 服务注册中心的体系结构。1 服务治理1.1 服务治理介绍首先通过一个例子告诉你服务治理解决了什么问题。比…
阅读更多...
GD32F4——外部中断

GD32F4——外部中断

一、NVIC中断系统 Cortex-M4集成了嵌套式矢量型中断控制器&#xff08;Nested Vectored Interrupt Controller&#xff0c;NVIC&#xff09;来实现高效的异常和中断处理。 中断系统包含外部中断、定时器中断、DMA中断和串口中断等。 二、EXTI外部中断 EXTI&#xff08;中断…
阅读更多...
go的基本语法介绍之变量的声明与初始化

go的基本语法介绍之变量的声明与初始化

1.常见基本数据类型 uint8&#xff1a;无符号8位整形&#xff0c;取值范围&#xff1a;0-255 uint16&#xff1a;无符号16位整形&#xff0c;取值范围&#xff1a;0-65535 uint32&#xff1a;无符号32位整形&#xff0c;取值范围&#xff1a;0-4294967295 uint64&#xff1…
阅读更多...
opencv arm交叉编译与仿真验证详细流程

opencv arm交叉编译与仿真验证详细流程

【关键内容】 1.将opencv编译为能在arm上运行的库 2.在没有板子的情况下&#xff0c;仿真验证opencv库 1.将opencv编译为能在arm上运行的库 1.在下方链接中选择某个版本 Releases - OpenCVhttps://opencv.org/releases/点击“Sources”即可开始下载&#xff0c;得到opencv-…
阅读更多...
「数据结构、逻辑结构、物理结构」基本概念简析

「数据结构、逻辑结构、物理结构」基本概念简析

前言 前言&#xff1a;简析数据结构、逻辑结构、物理结构。 文章目录前言一、数据结构1. 简介2. 数据3. 结构4. 分析5. 分类1&#xff09;线性结构&#xff08;线性表&#xff09;2&#xff09;树结构3&#xff09;图结构二、逻辑结构与物理结构1. 为什么要有逻辑结构和物理结构…
阅读更多...
【leetcode合集】如何知道自己是否掌握了数组与链表？试试这几道题目吧！

【leetcode合集】如何知道自己是否掌握了数组与链表？试试这几道题目吧！

目录 1.数组题目合集 1.1 leetcode.27 移除元素 1.2 leetcode.26 删除有序数组中的重复项 1.3 leetcode.88 合并两个有数数组 2.链表题目合集 2.1 leetcode.203 移除链表元素 2.2 leetcode.206 反转链表 2.3 leetcode.876 链表的中间结点 2.4 牛客 链表中倒数第k个结点…
阅读更多...
零基础学JavaWeb开发（十七）之 mybatis（2）

零基础学JavaWeb开发（十七）之 mybatis（2）

5、MyBatis - 映射文件标签 5.1、映射文件的顶级元素 select&#xff1a;映射查询语句 insert&#xff1a;映射插入语句 update&#xff1a;映射更新语句 delete&#xff1a;映射删除语句 sql&#xff1a;可以重用的 sql 代码块 resultMap&#xff1a;最复杂&#xff0c…
阅读更多...
章鱼网络 2022 虎年全回顾

章鱼网络 2022 虎年全回顾

全长5606字&#xff0c;预计阅读20分钟2022年对章鱼网络而言颇为特别。这是章鱼网络建设应用链多链生态历程的第一年&#xff0c;整个 Web3 行业都经历了极其糟糕的市场环境&#xff0c;但是我们在「生态建设」、「基础设施优化」、「社区治理」和「市场拓展」等都有长足进展&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023