ajax load的效果

最近开始学习jquery,利用jquery进行ajax的操作要方便的多了,下面的实例是一个简单的load效果。参考了 这篇文章。利用jquery发起 ajax请求,是很容易的,在参考了上面那篇文章后,就很容易就做一个demo出来。

这就是站在jquery的”肩上“的好处,基本就不用你做那些“底层”的工作了,这也是为什么jQuery号称“The Write Less, Do More”了!

demo的效果很简单,就是发起一个GET请求,在请求过程中显示loading的图片,服务器处理GET请求返回一段html代码(当然,在这里是没有返回html,实际会有的),然后loading状态消失,显示返回的html代码就ok。

这样就很简单的完成了一个ajax实例了。

相关代码如下:

html文件 ajaxload.html
[cce_html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>ajax loading 效果</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<style type=”text/css”>
#loadingImg{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-120px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#btn’).click(function (){
//$(‘#selectclass’).change( function (){
$.ajax({
url: ‘ajaxload.php’,
cache: false,
dataType: ‘html’,
type:’GET’,
data: { name: $(‘#name’).val(),selectclass: $(‘#selectclass’).val()},
error: function(xhr) {
alert(‘Ajax request 發生錯誤’);
},
success: function(response) {
$(‘#msg’).html(response);
$(‘#msg’).fadeIn();
}
});
});
$(‘#clean’).click(function(){
$(‘#msg’).html(“”);
// document.getElementById(‘msg’).innerHTML = “”;
});
$(“#loadingImg”).ajaxStart(function(){
$(this).show();
});
$(“#loadingImg”).ajaxStop(function(){
$(this).hide();
});
})
</script>
</HEAD>
<BODY>
<div id=”loadingImg” style=”display:none”><img src=”loading.gif”> loading…</div>
<br><br><br>
<div align=”center”>
Enter your name <br>
<input type=”text” id=”name”> <br>
<select id=”selectclass”>
<option value=”1″>3.1</option>
<option value=”2″>3.2</option>
<option value=”3″>3.3</option>
<option value=”4″>3.4</option>
<option value=”5″>3.5</option>
</select><br>
<input type=”button” value=”send” id=”btn”>
<input type=”button” value=”reset” id=”clean”>

<br><br><br>
<div id=”msg”> </div>
</div>
</BODY>
</HTML>
[/cce_html]
ajaxload.php
[cce_php]
<?php
$myname = $_GET[‘name’];
$myclass = $_GET[‘selectclass’];
sleep(1); //为了 ajax loading效果,所以延迟5秒
echo “You input name is $myname <br>”;
echo “You select class is $myclass <br>”;
?>
[/cce_php]
ajax loading 时需要用到的一些图片可以在这里ajaxload图片库找到。

让jquery也和swfonject一样插入视频

大家正在做网站SEO时,都会用到swfobject来插入相关的flash的吧,然后再做SEO的内容。

那么如果是视频呢?可以像flash一样插入到网页中吗?

答案当然是可以的,因为我有jquery这样的利器。利用jquery我写了一个简单的扩展,像swfobject一样插入视频。

支持youku 和youtube的视频,支持自定义宽度。

代码如下 :

[cce_html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video   Object</title>
<style media="screen" type="text/css">
#video{
    width:480px;
    height:400px;
    margin:0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="video.js"></script>
  <script type="text/javascript">
 $(function(){
           $("#video").videobject({id:'XMTQ4NTM5MjYw'});
     });
  </script>
</head>
<body>
<div  id="video">测试代码</div>
</body>
</html>
[/cce_html]

首先在页面引入jquery在google Libraaries API 上的库文件。然后就是我编写的一个扩展,该扩展的名字叫videobject,首先设置了扩展的默认设置,为了简化复杂的参数列表,jquery建议使用这种简化参数列表的形式,就是选项散列对象,即key/value,利用jquery自带的$.extend()函数合并参数,防止传递null或者 undefined的参数进来,在这里,我设置了flash,id,url,width,height等参数。

flash:需要插入的视频代码,可替换部分内容。

id:视频的id
如优酷的视频  查找 id 如

视频地址为http://player.youku.com/player.php/sid/XMTY0NzY4NjI4 /v.swf  则
即为id

url:此参数来区分是视频的类型,如优酷为youku,youtube为ytb

width:视频的宽度

height: 视频的高度

然后再声明了一个匿名函数(关于js匿名函数这里有比较好的分析),声明两个变量分别保存了,youku和youtube的视频通用的url地址,通过视频的id的长度来判断替换不同的视频的类型。然后就根据id来插入不同的<object>对象,最后返回当前的对象,先清空当前的div的内容,然后插入填充好了的<object>对象。

video.js 源代码

[cce_js]
/*
 *videoobject version: 2.0 beta
 * 利用jquery 插入视频 支持自定义宽度和高度 支持优酷和youtube视频
 *用法$("div的id").videoobject(' 视频代码','类型代码','宽度','高度');
 *
 *视频代码:如http://player.youku.com /player.php/sid/XMTcwMDMxNTA4/v.swf  XMTcwMDMxNTA4即为视频代码 13位
 *默认视频的  宽度:480  高度:400
 *
 *支持 长地址  默认高度和宽度  支持优酷的自动播放
 *如优酷的视频  查找 id 如
 * 视频地址为http://player.youku.com/player.php/sid/XMTY0NzY4NjI4 /v.swf  则XMTY0NzY4NjI4即为id
 *调用方式:以youku为例
 *$("#video").videobject({id:'XMTY0NzY4NjI4'});
 *$("#video").videobject({id:'XMTY0NzY4NjI4',url:'youku'});
 *
 */
(function($){
        $.fn.videobject = function (callerSettings){
        var settings = $.extend({
            flash:'<object width="mywidth" height="myheight" type="application/x-shockwave-flash" data="myurl" id="youku_player" style="visibility: visible;"><param name="quality" value="high"><param name="allowScriptAccess" value="always"><param name="flashvars" value="playMovie=true&isAutoPlay=true"></object>',
            id:'XMTcwMDMxNTA4',
            url:'youku',
            width:'480',
            height:'400'
        },callerSettings||{});
        var showvideo = function(uri){
            var yk = 'http://player.youku.com/player.php/sid/myid/v.swf';
            //var yk ='http://static.youku.com/v/swf/qplayer.swf?VideoIDS=myid=&isAutoPlay=true&isShowRelatedVideo=false&embedid=-&showAd=0';
            var ytb ='http://www.youtube.com/v/myid&hl=en_US&fs=1&autoplay=1';
            // urlij жΪyouku or youtube
            if(uri.length ==13){settings.id = yk.replace(/myid/,uri);};//youku
            if(uri.length ==11){settings.id = ytb.replace(/myid/,uri);};//youtube
        return uri == 'youku'?settings.flash.replace(/myurl/,settings.id).replace(/mywidth/,settings.width).replace(/myheight/,settings.height):settings.flash.replace(/myurl/,settings.id).replace(/mywidth/,settings.width).replace(/myheight/,settings.height);
        };
return this.empty().html(showvideo(settings.id));
        }
})(jQuery);
[/cce_js]