了解 Ajax
什么是Ajax
Ajax 的全称是 Asynchronous Javascript And XML（异步JavaScript和XML）。
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
为什么学习 Ajax
之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax 能让我们轻松实现网页与服务器之间的数据交互。
Ajax 典型应用场景
- 用户名检测：注册用户时，通过 Ajax 的形式，动态检测用户名是否被占用。
- 搜索提示：当输入搜索关键字时，通过 Ajax 的形式，动态加载搜索提示列表。
- 数据分页显示：当点击页码值的时候，通过 Ajax 的形式，根据页码值动态刷新表格的数据。
- 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 Ajax 的形式，来实现数据的交互。
Ajax 的优点
Ajax 允许我们在不刷新整个网页的前提下，更新部分网页内容（局部加载）。
JS 原生 Ajax
get 请求
// 1. 创建请求对象
let xhr = new XMLHttpRequest();
// 2. 设置请求方法和请求的url接口地址
xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=2', true);
// 3. 监听响应事件，当得到响应式执行
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2/d{2}$/.test(xhr.status)) {
console.log(xhr.responseText);
}
};
// 4. 发送请求，只有执行这步时才会发送上面设置的请求
xhr.send()
post 请求
// 1. 创建请求对象
let xhr = new XMLHttpRequest();
// 2. 设置请求方法和请求的url接口地址
xhr.open("post", "http://www.liulongbin.top:3006/api/addbook");
// 3. 设置请求头（在复杂参数时必须使用）
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded", true)
// 4. 监听响应事件，当得到响应式执行
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2/d{2}$/.test(xhr.status)) {
console.log(xhr.responseText);
}
};
// 5. 发送请求并携带post参数，只有执行这步时才会发送上面设置的请求
xhr.send("bookname=test&author=brokyz&publisher=test");
JQuery 中的 Ajax
简介
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了Ajax的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
$.get()$.post()$.ajax()
$.get()
jQuery 中$.get()函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。$.get()函数的语法如下：
$.get(url, [data], [callback])
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 要请求的资源地址 |
| data | object | 否 | 请求资源期间要携带的参数 |
| callback | function | 否 | 请求成功执行的回调函数 |
demo：
$(function () {
$("button").on("click", function () {
$.get("https://autumnfish.cn/api/joke/list", { num: 10 }, function (res) {
console.log(res);
});
});
});
$.post()
jQuery 中$.post()函数的功能弹一，专门用来发起 post 请求，从而向服务器提交数据。
$.post()函数的语法如下：
$.post(url, [data], [callback])
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 要提交数据的地址 |
| data | object | 否 | 要提交的数据 |
| callback | function | 否 | 请求成功执行的回调函数 |
demo：
$(function () {
$("button").on("click", function () {
$.post("https://mock.apifox.cn/m1/1301638-0-default/pet", { name: 'brokyz', status: 'sold' }, function (res) {
console.log(res);
});
});
});
$.ajax()
使用$.ajax()发起 GET 请求：
$(function () {
$.ajax({
type: 'GET',
url: 'https://autumnfish.cn/api/joke/list',
data: {num: 10},
success: function(res) {
console.log(res);
}
})
});
使用$.ajax()发起 POST 请求：
$(function () {
$.ajax({
type: 'POST',
url: 'https://mock.apifox.cn/m1/1301638-0-default/pet',
data: { name: 'brokyz', status: 'sold' },
success: function(res) {
console.log(res);
}
})
});
form 表单与 Ajax
简介
表单在网页中主要负责数据采集功能。HTML中的
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/279114.html