Web实训——5.17

最新推荐文章于 2023-03-30 12:21:44 发布

是在为难我静香

最新推荐文章于 2023-03-30 12:21:44 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/txy114116/article/details/90319128

版权

课堂笔记

jQuery中的AJAX:
1,AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
2,应用案列：谷歌地图，优酷视频，人人网。
3,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参数规定与请求一同发送的查询字符串（键值对集合）
AJAX运用:
1,获取外部文件的方法：load（）
①、在load（）方法中cellback是一个可选的参数，在load方法完成后所需要执行的回调函数
cellback的回调函数的参数设置：
responseTxt：回复，答复。相应内容。包含回调成功的结构内容
statusTxt：是否回调成功，用true和false表示
eg，load加载完成后显示一个提示框，rgload显示成功，则显示一个“外部文件显示成功”
如果失败，显示“错误信息”。
②、使用jQuery——AJAX的get()，post()方法，主要用于通过http get或post请求
从服务器里面请求数据
GET：从指定的资源获取/请求数据，GET基本上是用于从服务器获取数据，直接显示在链接上，安全性高。
轮播图：

<!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="11.jpg" height="200px" width="300px"/>
        <img src="22.jpg" height="200px" width="300px"/>
        <img src="33.jpg" height="200px" width="300px"/>
        <img src="44.jpg" height="200px" width="300px"/>
    </div>
</div>
</body>
</html>

效果图：
在这里插入图片描述