Web实训知识点-0518

最新推荐文章于 2023-12-28 22:11:24 发布

UchihaHONEY

最新推荐文章于 2023-12-28 22:11:24 发布

阅读量115

点赞数 1

本文链接：https://blog.csdn.net/UchihaHONEY/article/details/90318476

版权

本次课程主要学习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>

实现效果如下：
在这里插入图片描述

UchihaHONEY

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点-0518

本次课程主要学习AJEX 知识点如下：一、AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。二、应用案例：谷歌地图、优酷视频、人人网等1.jQuery-AJAX load()方法 *jquery ajax中的load方法将...
复制链接

扫一扫