ToB企服应用市场:ToB评测及商务社交产业平台

标题: Ajax基础篇01---服务器的根本概念与初识Ajax，web应用体系开辟 [打印本页]

作者: 丝 时间: 2024-9-29 02:38
标题: Ajax基础篇01---服务器的根本概念与初识Ajax，web应用体系开辟
3️⃣ Ajax 是一种用于创建快速动态网页的技能。通过在后台与服务器举行少量数据互换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部门举行更新。
1.2 为什么要学Ajax

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

1.3 Ajax的典型应用场景

1️⃣ 用户名检测：注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用；
2️⃣ 搜索提示：当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表；
3️⃣ 数据分页显示：当点击页码值的时候，通过 Ajax的形式，根据页码值动态刷新表格的数据；
4️⃣ 数据的增删改查：数据的添加、删除、修改、查询操纵，都需要通过 Ajax的形式，来实现数据的交互；

（2）jQuery中的Ajax

2.1 了解jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，以是 jQuery 对 XMLHttpRequest 举行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度；
jQuery 中发起 Ajax 哀求最常用的三个方法如下：

$.get()
$.post()
$.ajax()

2.2 $.get()函数的语法

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 哀求，从而将服务器上的资源哀求到客户端来举行使用；
$.get() 函数的语法如下：
$.get(url, [data], [callback])
三个参数各自代表的含义如下：
| 参数名 | 参数范例 | 是否必选 | 说明 |
| — | — | — | — |
| url | string | 是 | 要哀求的资源地址 |
| data | object | 否 | 哀求资源期间要携带的参数 |
| callback | function | 否 | 哀求乐成时的回调函数 |
2.2.1 $.get()发起不带参数的哀求

使用 $.get() 函数发起不带参数的哀求时，直接提供哀求的 URL 地址和哀求乐成之后的回调函数即可；
完备代码演示如下：
Document 发起不带参数的GET哀求
显示效果如下：

2.2.2 $.get()发起带参数的哀求

使用 $.get() 函数发起带参数的哀求时，完备代码演示如下：
Document 发起带参数的GET哀求
显示效果如下：

2.3 $.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 哀求，从而向服务器提交数据。
$.post()函数的语法如下：
$.post(url, [data], [callback])
三个参数各自代表的含义如下：
| 参数名 | 参数范例 | 是否必选 | 说明 |
| — | — | — | — |
| url | string | 是 | 提交数据的地址 |
| data | object | 否 | 要提交的数据 |
| callback | function | 否 | 数据提交乐成时的回调函数 |
2.3.1 $.post()向服务器提交数据

使用 $post() 向服务器提交数据的完备代码演示如下：
Document 发起POST哀求
显示效果如下：

2.4 $.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 哀求举行更详细的设置。
$.ajax() 函数的根本语法如下：
$.ajax({
type: ‘’, // 哀求的方式，比方 GET 或 POST
url: ‘’, // 哀求的 URL 地址
data: { },// 这次哀求要携带的数据
success: function(res) { } // 哀求乐成之后的回调函数
})
2.4.1 使用$.ajax()发起GET哀求

使用 $.ajax() 发起 GET 哀求时，只需要将 type 属性的值设置为 'GET' 即可；、
完备代码演示如下：
Document 发起GET哀求
2.4.2 使用$.ajax()发起POST哀求

使用 $.ajax()发起 POST 哀求时，只需要将 type 属性的值设置为 'POST' 即可；
完备代码演示如下：
Document 发起GET哀求

（3）接口

3.1 接口的概念

使用 Ajax 哀求数据时，被哀求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有哀求方式。
3.2 分析接口的哀求过程

1️⃣ 通过GET方式哀求接口的过程

2️⃣ 通过POST方式哀求接口的过程

3.3 接口测试工具

3.3.1 什么是接口测试工具

1️⃣ 为了验证接口能否被正常被访问，我们常常需要使用接口测试工具，来对数据接口举行检测。
2️⃣ 利益：接口测试工具能让我们在不写任何代码的情况下，对接口举行调用和测试。

3.3.2 下载并安装PostMan

PostMan 的官方下载网址：https://www.postman.com/downloads/，下载所需的安装程序后，直接安装即可。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)