request方法详解,css三实施之图片轮播

  楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation。

掌握 Ajax,第 10 部分: 使用 JSON 进行数据传输

以原生方式操作 JavaScript 对象

1:Ext.Ajax.request([Object options]):Number

  本文需要实现效果:(请用chrome打开

文档选项

<tr valign="top"><td width="8"><img alt="" height="1" width="8" src="//www.ibm.com/i/c.gif"/></td><td width="16"><img alt="" width="16" height="16" src="//www.ibm.com/i/c.gif"/></td><td class="small" width="122"><p><span class="ast">未显示需要 JavaScript 的文档选项</span></p></td></tr>

将此页作为电子邮件发送

    options中的一些属性和含义如下:

  1. 图片轮播
  2. 图片自动轮播

级别: 初级

    url:指定请求的服务端url

Transform

  根据我的理解,transform和width、height、background一样,都是dom的属性,不同的是它是css3旗下的,比较屌,能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸,跟canvas上的某些api神似,这么说来transform好像能干些js才能干的事。

  transform分2D变换和3D变换,w3school中有很好的介绍和例子,具体请猛戳:CSS3
2D 转换  CSS3 3D 转换

  为了方便查找,我把w3school上的截图在这里保存一份:图片 1

图片 2

Brett McLaughlin (brett@newInstance.com), 作家兼编辑, O’Reilly Media
Inc.

   params:
指定要传递的参数,可以是一个包含参数名称及值的对象,也可以是类似于name=xx&birthday=1978-1-1的url编码字符串,或者是一个能返回上述两种内容

Transition

  transition的解释是过渡,我的理解是css之间的变换,但是这个变换很屌很平滑,类似动画。举个栗子,一开始某个dom的类是classA,通过某种操作(比如被点击了)后变成了classB,如果没有transition,类之间的变换是很快的,机械般瞬间完成,但是有了transition,这便会是一个很缓和平滑的过程。

  我们通过demo来讲解transition的使用方式。

  写好如下的html文件:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css">  </style>    <img src='http://hanzichi.github.io/img/img0.png' />

  打开来是非常简单的一张图,加上css:

img {    -webkit-transition: all 1s ease-in-out 0s;  }    img:hover {    -webkit-transform:       rotate(360deg)      scale(0.5, 0.5);      opacity: 0;  }

  效果请猛戳:transition变换 (ps:所有demo都没有做兼容
请用chrome打开

  是否很简单?demo中,你只需设定好图片(img标签)原先的属性和hover后的属性,中间的变换过程全由transition搞定!而transition加在某个元素下(demo的transition加在img标签下),仿佛设置了一个监听器,一旦该元素的属性值即将要发生变化,就会自动检查transition中的设定的属性,一旦发现相匹配,则进行平滑的过渡。

  transition有4个属性,语法:transition: property duration
timing-function ***
delay*
 
从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”(默认值:all
0 ease 0 前两个是必须的 后两个可省略)。

  如果不是所有属性都要进行平滑过渡,或者各属性过渡的时间、速度等设置各有需求,可以把要过渡的属性用逗号隔开,demo可写成:

img {    -webkit-transition:       -webkit-transform 1s ease-in-out 0s,      opacity 1s ease-in-out 1s;  }    img:hover {    -webkit-transform:       rotate(360deg)      scale(0.5, 0.5);      opacity: 0;  }

  如果非得把transition的四个属性分开来写,可以这样:

img {    -webkit-transition-property: -webkit-transform, opacity;    -webkit-transition-duration: 1s;    -webkit-transition-timing-function: ease-in-out;    -webkit-transition-delay: 0s;  }  

  我把后三个属性放在一起只写了一个值(因为值一样),你也可以像property一样分开来写用逗号隔开。

  这里再介绍下timing-function的取值。六大取值:(还是盗图w3cschool)

图片 3

图片 4

  • transition中的hover

  相信大家实践了transition后,对于transition到底是直接写在选择器上,还是写在选择器的hover上会表示疑惑,似乎效果一样。其实不然,如果对于一般的hover,也就是鼠标hover前后的过程是为逆过程的话,两种写法效果一致,但是如果hover前后效果不一样的话,transition需要分别加在选择器的hover前后,比如这个demo:猛戳看demo

  也就是说如果hover前后需要不一样的效果,就可以分别写两个transition。比如鼠标hover时颜色渐入2s,hover后渐出5s->猛戳demo

   

  小结:一般transition应用在dom的class变换中,可先行写好机械的变换,然后添加过渡效果。

2007 年 4 月 09 日

                        的函数

Animation

  Animation的解释是动画,加强版的transition。

  如果说transition能实现某些js效果,animation就更像是js了。类似于写一个canvas特效,特效总共比如说多少时间,我们能规定在什么时候该出现什么样的场景,而各个场景间的转换则完全由css3本身负责,而keyframes好比定义了一个js方法。

   主要应用在某个元素需要进行连续的n次css变换。一个简单的demo如下:animation动画

  我们在@keyframes
中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

  通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  1. 规定动画的名称
  2. 规定动画的时长

demo代码:

图片 5图片 6

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css">    img {      /*-webkit-animation: myfirst 5s;*/    }        @-webkit-keyframes myfirst    {      0% {        -webkit-transform:           rotate(0deg)          scale(1, 1);        opacity: 1;      }            50% {        -webkit-transform:           rotate(360deg)          scale(0.5, 0.5);        opacity: 0.5;      }            100% {        -webkit-transform:           rotate(0deg)          scale(1, 1)          translate(300px, 200px);        opacity: 1;      }    }      img {      -webkit-animation: myfirst 5s linear 0s 1 alternate;      /*停在结束位置*/      -webkit-animation-fill-mode: forwards;    }  </style>    <img src='http://hanzichi.github.io/img/img0.png' />

View Code

更多请猛戳 CSS3 动画

在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML
作为数据格式。掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScript
Object
Notation(JSON),以及如何使用它更轻松地在应用程序中移动数据和对象。

   method: 
指定发送Ajax请求使用的method,可以是GET或者POST方式,默认情况下,如果请求中没有传递任何参数,则使用GET,否则使用POST

具体应用:图片轮播

  类似应用可先写好无过渡的代码,然后再在class转换之间添加transition。

  该demo(图片自动轮播)和transition有关的核心代码就几行,而js只是简单的对元素的class进行赋值,动画过程全由css3完成!

img {    position: absolute;    -webkit-transition: all 2s ease-out;  }    .disappear {    opacity: 0;  }    .show {    opacity: 1;  }  

  当img的class从show转换成disappear或者从disappear转换成show时(img标签下的class变换),就会执行transition设置的过渡动画。

  另一个demo的实现也大同小异,有兴趣的可以参考源码:源码请猛戳

如果您阅读了本系列前面的文章,那么应已对数据格式有了相当的认识。前面的文章解释了在许多异步应用程序中如何恰当地使用纯文本和简单的名称/值对。可以将数据组合成下面这样的形式:

  
callback:指定Ajax请求的回调函数,该函数不管是调用成功还是失败,都会执行。传递给回调函数的参数有三个,第一个参数options表示执行request方法时的

总结

  总的来说,transform只是为dom增添一些属性,而如果搭配transition或者animation则能完成一些动画效果,我觉得实际应用较多的应该还是transition,可配合伪类或者click等事件。

  楼主对以上的理解不深,如有出入,还请指出。

  如需了解更多,可以参考这篇 CSS3 Transitions,
Transforms和Animation使用简介与应用展示


firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com

                     
参数,第二个参数表示success请求是否成功,第三个参数表示response用来执行Ajax请求的XMLHttpRequest对象

这样就行了,不需要再做什么了。实际上,Web 老手会意识到通过 GET
请求发送的信息就是采用这种格式。

  
success:指定当Ajax请求执行成功后返回的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequest对象,第二个参数

然后,本系列讨论了 XML。显然,XML
得到了相当多的关注(正面和负面的评价都有),已经在 Ajax
应用程序中广泛使用。关于如何使用 XML 数据格式,可以回顾
本系列前面的文章:

                      表示执行request方法时的options对象

<request>
  <firstName>Brett</firstName>
  <lastName>McLaughlin</lastName>
  <email>brett@newInstance.com</email>
</request>

  
failure: 指定当请求出现错误时执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequest对象,第二个参数表示执行request

这里的数据与前面看到的相同,但是这一次采用 XML
格式。这没什么了不起的;这只是另一种数据格式,使我们能够使用 XML
而不是纯文本和名称/值对。

                   方法时的options对象

本文讨论另一种数据格式,JavaScript Object NotationJSON)。JSON
看起来既熟悉又陌生。它提供了另一种选择,选择范围更大总是好事情。

  scope: 指定回调函数的作用域,默认为浏览器Window

选择的意义

  form:     指定要提交的表单id或者表单数据对象

在深入研究 JSON
格式的细节之前,您应该了解为什么要用两篇文章讨论另一种数据格式(是的,本系列中的下一篇文章也讨论
JSON),尤其在已经了解了如何使用 XML
和纯文本的名称/值对的情况下。其实,原因很简单:解决任何问题的选择越多,找到问题的最佳
解决方案的可能性就越大,这比只能使用一个 解决方案要好得多。

  isUpload: 指定要提交的表单是否是文件上传表单,默认情况下会自动检查。

回顾名称/值对和 XML

  headers: 指定要请求的Header信息

本系列已经用了大量篇幅讨论适合使用名称/值对和 XML
的场合。总是应该首先考虑使用名称/值对。对于大多数异步应用程序中的问题,使用名称/值对几乎总是最简单的解决方案,而且它只需要非常基本的
JavaScript 知识。

 
xmlData: 指定用于发送给服务器的xml文档,如果指定了该属性,则其他地方设置的参数将无效

实 际上,除非有某种限制迫使您转向
XML,否则用不着考虑使用别的数据格式。显然,如果要向需要 XML
格式的输入的服务器端程序发送数据,那么希望使用 XML
作为数据格式。但是,在大多数情况下,对于需要向应用程序发送多段信息的服务器,XML
是更好的选择;换句话说,XML 通常更适合用来 Ajax
应用程序做出响应,而不是 Ajax 应用程序发出请求。

 jsonData:指定需要发送给服务器端的JSON数据,如果指定了该属性,则其他地方设置的要发送的参数值将无效

添加 JSON

 disableCaching:表示是否禁止cache

在 使用名称/值对或 XML 时,实际上是使用 JavaScript
从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下,JavaScript
在很大程度上作为一种数据操纵语言,用来移动和操纵来自 Web
表单的数据,并将数据转换为一种适合发送给服务器端程序的格式。

 

但是,有时候 JavaScript
不仅仅作为格式化语言使用。在这些情况下,实际上使用 JavaScript
语言中的对象来表示数据,而不仅是将来自 Web
表单的数据放进请求中。在这些情况下,从 JavaScript
对象中提取数据,然后再将数据放进名称/值对或 XML,就有点儿多此一举
了。这时就合适使用 JSON:JSON 允许轻松地将 JavaScript
对象转换成可以随请求发送的数据(同步或异步都可以)。

  2:实例代码

JSON
并不是某种魔弹;但是,它对于某些非常特殊的情况是很好的选择。不要认为您不会遇到这些情况。阅读本文和下一篇文章来了解
JSON,这样,遇到这类问题时您就知道该怎么办了。

   login.jsp的代码:


 

回页首
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%  String path = request.getContextPath();  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  %>    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>    <head>      <base href="<%=basePath%>">            <title>Ext.Ajax.request实例</title>         <meta http-equiv="pragma" content="no-cache">   <meta http-equiv="cache-control" content="no-cache">   <meta http-equiv="expires" content="0">       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   <meta http-equiv="description" content="This is my page">      <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>   <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>   <script type="text/javascript" src="ext3.2/ext-all.js"></script>   <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>      <script type="text/javascript">        function login() {         var reqeustConfig = {          url: 'login.action',          form: 'loginForm',          callback: function(options, success, response) {               var msg = ['请求是否成功:', success, '\n', '服务器返回值:', response.responseText];                     alert(msg.join(''));          }         };         Ext.Ajax.request(reqeustConfig);        }   </script>    </head>    <body>       <form id="loginForm" method="post">                     用户名:<input name="username" type="text" /><br/>                          密码:<input name="password" type="password"/><br/>           <input type="button" name="button" id="button" value="提交" onclick="login();"/>           <input type="reset" name="button" value="重置"/>       </form>    </body>  </html>  

JSON 基础

 

简 单地说,JSON 可以将 JavaScript
对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从
Web
客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是
JavaScript 很容易解释它,而且 JSON
可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。

LoginAction接收的方法login为:

简单 JSON 示例

package com.capinfotech.action;    import java.io.IOException;    import javax.servlet.http.HttpServletRequest;  import javax.servlet.http.HttpServletResponse;    import org.Apache.struts2.interceptor.ServletRequestAware;  import org.apache.struts2.interceptor.ServletResponseAware;    import com.opensymphony.xwork2.ActionSupport;    public class LoginAction extends ActionSupport implements ServletRequestAware,    ServletResponseAware {     private static final long serialVersionUID = -2251501394276835795L;      private HttpServletRequest request;   private HttpServletResponse response;     private String username;   private String password;     public String getUsername() {    return username;   }     public void setUsername(String username) {    this.username = username;   }     public String getPassword() {    return password;   }     public void setPassword(String password) {    this.password = password;   }     public void setServletRequest(HttpServletRequest request) {    this.request = request;   }     public void setServletResponse(HttpServletResponse response) {    this.response = response;   }     public void login() {    String msg = " ";    if (username != null && username.equals("admin") && password != null      && password.equals("admin")) {     msg = "恭喜你登录成功!";    } else {     msg = "登录失败";    }      try {     response.getWriter().write(msg);     response.getWriter().flush();    } catch (IOException e) {         }   }  }  

按照最简单的形式,可以用下面这样的 JSON 表示名称/值对:

3:程序效果图

{ "firstName": "Brett" } 

   图片 7

发表评论

电子邮件地址不会被公开。 必填项已用*标注