WEB页面设计实训课堂笔记06DYL

JQuery AJAX学习

课堂练习及相关代码：

html

    
    
    
    



获取外部文本
获取指定外部文本信息
获取外部信息有无回调函数
获取数据状态

 demo.php

demo1

123
12345678

 运行情况

获取外部文本

获取指定外部文本信息

获取外部信息有无回调函数

获取数据状态

一、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参数规定与请求一同发送的查询字符串（键值对集合）

图片轮播学习

1、通过CSS3的animation属性以及 @keyframes规则实现。首先学习 CSS3当中的@keyframes和animation
    <1>@keyframes规则---用于创建动画，在@keyframes中规定某个CSS样式，就能创建,由当前样式逐渐变成新样式的动画效果。
    <2>浏览器支持：Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation属性以及 @keyframes规则、chrome、Safari 需要加前缀     "-webkit-"
* IE9 以及更早的版本，不支持 animation属性以及 @keyframes规则
练习一：

实现效果：

练习二：

效果实现：

→→→