本次课程主要学习AJEX 知识点如下:
一、AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),简单来说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
二、应用案例:谷歌地图、优酷视频、人人网等
1.jQuery-AJAX load()方法
*jquery ajax中的load方法将返回的数据放在指定的元素中,不是全局函数。
* get()同样是jquery的ajax的函数,它的作用把返回的数据交给用户处理,是全局函数
*
* load 的实现几乎等同于get的实现,在ajax获取机制上没有区别。
* load方法的另一个和get 的重要区别:load可以指定要插入文档的某个部分。
2.JQuery—AJAX 的get()和post()方法:
主要用于通过HTTP GET 或 POST请求
* 从服务器里面请求数据。
* GET: 从指定的资源请求数据,GET基本上用于从服务器获取数据
* POST: 向指定的资源提交要处理的数据,POST也可以从服务器获取数据,并且
* 常用于连同请求一起发送数据。不会缓存(cookie)数据
语法:
$(selector).load(URL.data.callback)
必须的URL参数规定加载的地址
可选的data参数规定与请求一同发送的查询字符串(键值对集合)
**
三、获取外部文件的方法: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)数据,隐秘性传输安全性高
四、轮番图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#screen{
animation: myfirst 8s;
height:9999px;
width: 9999px;
}
#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="images/list_1.jpg" height="200px" width="300px"/>
<img src="images/list_2.jpg" height="200px" width="300px"/>
<img src="images/list_3.jpg" height="200px" width="300px"/>
<img src="images/list_4.jpg" height="200px" width="300px"/>
</div>
</div>
</body>
</html>
实现效果如下: