什么是AJAX,我对于AJAX的理解就是,当你网页中的某个功能,需要请求一条数据,在加载这个数据的时候(比如说显示一个额外的小卡片栏,或者是加载某一块的内容时),不用整个网页都要重新加载,来获取这个数据,这样可以更加有效的节省资源,这种感觉就像是,选择一家快递,其中一个人选择了一个小快递公司,这个公司送快递需要你自己去服务点拿快递,而你选择了大快递公司,送货上门,而且价钱都一样或者更少。
load()方法
因为本人也是在自学中,对于很多知识的理解可能不是很透彻,所以我对load()方法的理解就是,从其他网页加载当前网页所需的内容。以下代码是我从视频中学习的内容。
//html中相关代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="trigger">协议</button>
<div id="card" style="display: none">
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="JS/main.js"></script>
</body>
</html>
var trigger = $('#trigger');
var card = $('#card');
var loaded = false; //定义一个loaded变量并赋值false,我的理解就是定义一个flag
trigger.on('click',function () { //当用户点击按钮触发事件
if(card.is(':visible'))//判断id为card的div是否已经显示
{
card.slideUp();//如果id为card的div内容没有显示,那么就显示,否则执行以下代码
}
else{
if(!loaded) //如果loaded没有加载,就执行以下代码
{
card.load('result.html');//id为card的div加载result.html中的内容
loaded = true;//并且让loaded为true
}
card.slideDown();//如果已经加载过result.html中的内容,那么就直接显示,不在请求
}
//toggle();
});