关于jquery AJAX
AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX=异步(Asynchronous)异步Javascript和XML(json)
jQuery - AJAX load() 方法:
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
AJAX运用
1 获取外部文件的方法:load()
在load()方法中cellback是一个可选的参数,在load方法完成后所需要执行的
回调函数。cellback的回调函数的参数设置:
responseTxt:回复,答复。相应内容。包含回调成功的结构内容
statusTxt:是否回调成功,用true和false表示
eg,load加载完成后显示一个提示框,rgload显示成功,则显示一个“外部文件显示成功”
如果失败,显示“错误信息”。
node: 成功:“success”,失败:“error”
url = 'demo1.txt';
$(".div").load(url,function(response,statusTxt){
if(statusTxt == "success"){
alert("外部内容加载成功");
}
if(statusTxt == "error"){
alert("外部内容加载失败");
}
});
②使用jQuery——AJAX的get(),post()方法,主要用于通过http get或post请求
从服务器里面请求数据
GET:从指定的资源获取/请求数据,GET基本上是用于从服务器获取数据,直接显示在链接上,安全性低
POST:向服务器提交要处理的数据,POST也可以从服务器获取数据,并且常用于 连同请求一起 发送数据,而且不会有缓存(cookies)数据,隐秘性传输安全性高
2 ajax—>get()方法,语法:$(‘selector’).get(url,cellback)
URL:是必须参数
cellback:是可选参数
eg:使用get方法从服务器的文件中获取数据
PS:load(),get(),post()的区别,
在于load()不是全局的方法,get()和post()是全局变量
这也是为什么在get()和post()的前面不用写选择器
总结:jQuery ajax中的load方法将返回的数值放在指定的元素中,不是全局函数
get同样是jQuery ajax中的函数,他的作用把返回的数据交给用户处理,是全局函数
load的实现几乎等同于get的实现,在ajax获取机制上没有差别
load方法的另一个和get的重要区别:load可以指定要插入文档的某个部分(如:load(“demo.txt #p1”))
3 图片轮播:(通过CSS3的animation属性以及 @keyframes规则实现和通过Jquery的新形式实现)
通过CSS3的animation属性以及 @keyframes规则实现:
CSS3当中的@keyframes和animation,@keyframes规则—用于创建动画,在@keyframes中规定某个CSS样式,就能创建
由当前样式逐渐变成新样式的动画效果。
@keyframes 语法: @keyframes 函数名(自定义)
例:
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
注意:CSS3 动画用@keyframes规则传创建动画时,需要将其(函数名)绑定到某个选择器,否则不会产生动画效果
通过Jquery的新形式实现:
轮播图代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#screen{height:9999px;width:9999px;animation:myfirst 8s;}
#screen img{float:left;}
#main{height:300px;width:200px;overflow:hidden;}
@keyframes myfirst {
25%{transform:translateX(0px)}
30%{transform:translateX(-300px)}
50%{transform:translateX(-300px)}
55%{transform:translateX(-600px)}
75%{transform:translateX(-600px)}
80%{transform:translateX(-900px)}
100%{transform:translateX(-900px)}
}
</style>
</head>
<body>
<div id="main">
<div id="screen">
<img src="background-image/list_1.jpg" height="200"width="300">
<img src="background-image/list_2.jpg" height="200"width="300">
<img src="background-image/list_3.jpg" height="200"width="300">
<img src="background-image/list_4.jpg" height="200"width="300">
</div>
</div>
</body>
</html>