文章目录
- 一、Ajax是什么？
-
二、Ajax在jQuery中的使用
- 1.基本写法
- 2.使用案例
- 总结
一、Ajax是什么？
1.概念
Ajax（Asynchronous JavaScript and XML）是一种用于在Web页面上进行异步数据交换的技术。它允许网页在不重新加载整个页面的情况下与服务器进行通信和交换数据。Ajax通常使用JavaScript来实现，但不一定要与XML一起使用，也可以与JSON等其他数据格式一起使用。
注意：ajax不是新的编程语言，它是将现有方法集合起来使用的一个整体，没有固定的写法，在不同环境中写法不同。
通常，Ajax 的使用场景包括：
-
表单验证：在用户填写表单时，可以使用 Ajax 来验证数据的有效性，而无需重新加载整个页面。
-
动态内容加载：当用户与网页进行交互时，可以使用 Ajax 在后台加载新的内容，例如在滚动到页面底部时加载更多的内容。
-
实时更新：网页中的某些部分需要实时更新，比如社交媒体的新消息提醒或在线游戏中的实时动态。
-
自动完成和搜索建议：在搜索框中输入内容时，可以使用 Ajax 来实时获取匹配的搜索结果并显示在下拉菜单中。
要使用 Ajax，通常需要以下步骤：
-
创建 XMLHttpRequest 对象：JavaScript 中创建 XMLHttpRequest 对象，用于与服务器进行通信。
-
发送请求：使用 XMLHttpRequest 对象发送 HTTP 请求到服务器，可以是 GET、POST 或其他类型的请求。
-
处理响应：在接收到服务器的响应后，通过 JavaScript 处理响应数据，并更新页面的相应部分。
现代的 JavaScript 框架和库（如jQuery、React、Vue.js等）都提供了更简单和便捷的方式来实现 Ajax。Ajax 技术的广泛应用使得创建动态、交互式的网页变得更加容易和灵活。
2.做ajax请求需要哪些准备
接口文档说明（接口就是一种功能）
1. 接口地址
2. 请求方式
3. 是否传递参数
4. 响应的数据 (1.txt 1.js 1.xml 1.json)
3.ajax的作用
1)异步请求，局部更新页面
2)读取文档内容
3)在同源策略环境下使用(协议://IP:端口)，否则就是后端程序员做了资源跨域共享(cors)
4)在跨域的环境下是不能直接使用ajax
二、Ajax在jQuery中的使用
1.基本写法
代码如下：
$.ajax({
url: "",// 接口地址
type: "",// 请求方式 GET POST
async: true, // true 表示异步
data: {}, // 是否传参 填写参数的地方
dataType: "", // 1）响应数据的格式 2） 是否跨域 【jsonp】
beforeSend: function () { },// 请求之前的回调
su***ess: function () { },// 请求成功的回调
error: function () { }, // 请求失败的回调
***plete: function () { } // 请求完成的回调
})2.使用案例
注：本案例使用的数据接口来自tianqiapi.***,使用本案例需要自行创建账户获取接口文档
代码如下：
<!DOCTYPE html>
<html lang="zh-***">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-***patible" content="ie=edge">
<title>基本模板</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.wrap {
width: 600px;
margin: 0 auto;
}
.wrap>div {
margin-top: 10px;
}
.search input {
height: 44px;
width: 500px;
padding-left: 15px;
outline: none;
font-size: 16px;
border: 1px solid #***c;
}
.list p {
height: 40px;
line-height: 40px;
text-align: center;
display: none;
}
.list li {
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #***c;
}
</style>
</head>
<body>
<div class="wrap">
<div class="search">
<input type="text" placeholder="请输入城市" class="inp">
</div>
<div class="city">
<h3>城市: <span class="city_name">广州</span></h3>
</div>
<div class="list">
<p class="msg">暂无该城市的天气信息~~</p>
<div><img class="picture" style="width: 50px;" src="./assets/wea/yu.png" alt=""></div>
<ul class="wea_info">
<!-- 动态渲染 -->
</ul>
</div>
</div>
<script src="./libs/jQuery/jQuery.min.js"></script>
<script>
// 模板函数
function template(weatherobj){
var str = '';
str += `
<li>日期: <span>${weatherobj.date}</span></li>
<li>星期: <span>${weatherobj.week.slice(-1)}</span></li>
<li>天气: <span>${weatherobj.wea}</span></li>
<li>温度: <span>${weatherobj.tem_night}°C ~ ${weatherobj.tem_day}°C</span></li>
<li>风向: <span>${weatherobj.win}</span></li>
`
// 获取路径
src = `./assets/wea/${weatherobj.wea_img}.png`
// 渲染字符串
$(".wea_info").html(str);
$(".city_name").html(weatherobj.city);
$(".picture").attr("src", src);
}
$(".inp").on("keydown",function(e){
// console.log(e)
// 判断用户是否按下回车按键
if(e.code === "Enter") {
// 获取输入框的值
var city2 = $(".inp").val();
// 判断是否有值
if(city2 == "") {
return false;
}
// 请求接口数据
// ajax 有读取文档的作用(本地/远程)
$.ajax({
url: "http://v1.yiketianqi.***/free/day?appid=(你的appid)&appsecret=(你的appsecret)&unescape=1",
data: {// 提交参数给后端
city: city2
},
type: "get",// 特别提醒， 这个type参数，由什么决定? 1. 后端程序员决定采用何种方式就是何种方式 2. 本地文档就是get
su***ess: function(content){
console.log("文档内容:",content);
// 调用模板函数
template(content);
// 重置输入框
$(".inp").val("");
},
error: function(err){
console.log("请求失败")
}
})
}
})
</script>
</body>
</html>