web实训——0514_web实训系统-CSDN博客

本文链接：https://blog.csdn.net/tyc5201314like/article/details/90318880

ajax学习

1.什么是jquery AJAX?

AJAX=异步(Asynchronous)异步Javascript和XML（json）
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
应用案列：谷歌地图，优酷视频，人人网。
2.jQuery - AJAX load() 方法
jQuery load() 方法：load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

一：AJAX运用

1. 这是示例文件（"demol.txt"）的内容：
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
2.下面的例子把 "demo.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo1.txt #p1")

3.可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
4. 首先load()方法完成后显示一个提示框，如果load方法执行成功，则显示"外部内容加载成功"
如果失败，显示'错误信息'

5.JQuery---AJAX 的get()和post()方法: 主要用于通过HTTP GET 或 POST请求
从服务器里面请求数据。
GET: 从指定的资源请求数据，GET基本上用于从服务器获取数据
POST: 向指定的资源提交要处理的数据，POST也可以从服务器获取数据，并且
常用于连同请求一起发送数据。不会缓存(cookie)数据。
ajax---> get()方法，语法： $("selector").get(url,callback)
url ---必须参数， callback----可选参数
eg: 使用get()方法从服务器上的一个文件中获取数据

node ：成功 "success" 失败‘error’

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        
        $(document).ready(function(){ 
            $("#div1").mouseover(function(){
                url = "demo1.txt"
                $("#div1").load(url)
            })
            $("#div1").mouseout(function(){
                $("#div1").html(" ")
            })
            $("#button1").click(function(){
                url = "demo1.txt"
                $("#div1").load(url)
            })
            
            $("#button2").click(function(){
                $("#div1").load("demo1.txt #p1")
            })
        
            $("#button3").click(function(){
                $("#div1").load("demo1.txt",function(responseTxt,statusTxt){
                    if(statusTxt =='success'){
                        alert("外部内容加载成功")
                    }
                    if(statusTxt =='error'){
                        alert('错误信息')
                    }
                })
            })
 
         
            $("#button4").click(function(){
                jQuery.get("demo.php",function(data,status){
                    alert("数据："+data+"\n状态："+status)
                })
            })
       
    </script>
</head><body>
<div id="div1" style="background-color: rgb(204,204,153);
width: 200px;height:400px;overflow: scroll"></div>
<button id="button1">获取外部信息</button>
<button id="button2">获取指定外部信息</button>
<button id="button3">获取外部信息有回调函数</button>
<button id="button4">发送HTTP get请求并获取返回结果</button>
 
 
</body>
</html>

代码总结： jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。 get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数 load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。 load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。

二：图片轮播

方法一: 通过CSS3的animation属性以及 @keyframes规则实现
首先学习 CSS3当中的@keyframes和animation
@keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建
由当前样式逐渐变成新样式的动画效果。
浏览器支持：
Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则
chrome、Safari 需要加前缀 "-webkit-"
注： IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则
@keyframes 语法：
@keyframes 函数名(自定义){
内容
}
eg：
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
CSS3 动画
用@keyframes规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果。

运用知识：

animation属性：是设置动画的一种元素。

transform属性：是图片改变的一种变形属性，该任务运用属性中的平移属性translate属性。

代码如下：

<!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>