您的位置：首页 > 其它

使用AJAX实现优酷视频播放时留言不刷新

2012-03-02 17:35 501 查看

各位童鞋我们试想一下，如果你在网页上看视频，看到有感而发时，这时你你对视频进行评论后，吧唧！整个页面刷新，你还得从头看视频，很蛋疼是吧。避免这种情况发生很简单，只要我们将评论部分使用AJAX做就可以了。

效果图：

下边将代码共享给大家:

主要功能文件有三个:

__________________________________________________________________________________________________________________

index1.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>无标题文档</title>

<style>

#conmment{

width:500px;

height:400px;

background-color:#FC3;}

</style>

<script src="Scripts/ajaxUtil.js" language="javascript" type="text/javascript"></script>

<script src="../../Scripts/swfobject_modified.js" type="text/javascript"></script>



<script language="javascript" type="text/javascript">

//此函数test()是获取textarea输入的值并创建url，调用get函数，将获取的值和url并且还有听readyState值为4时调用的函数名当参数传递过去

function test(){

//调用$$函数，传textarea的id com让函数返回textarea对象以便获取textarea中输入的值

var comment=$$("com");

//初始化url

var url="ajax-youku-server.php";

//定义变量params来获取textarea的值（comment.value）

var params="comment="+encodeURI(comment.value);

//调用get函数，将获取的值和url并且还有听readyState值为4时调用的函数名当参数传递过去

get(url,params,processCommentData);

}

//此函数processCommentData就是将php返回来的值做处理，

function processCommentData(xhr){

//获取div对象

var div= document.getElementById("id1");

//创建p标签

var p=document.createElement("p");

//用返回的值产生一个文本节点

var text=document.createTextNode("评论内容："+xhr.responseText);

//将文本添加到p元素

p.appendChild(text);

//将段落标记追加到div中

div.appendChild(p);

}

</script>

</head>

<body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1003" height="240" id="FlashID" title="aaa">

<param name="movie" value="banner.swf" />

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="7.0.70.0" />



<param name="expressinstall" value="../../Scripts/expressInstall.swf" />





<object type="application/x-shockwave-flash" data="banner.swf" width="800" height="220">



<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="7.0.70.0" />

<param name="expressinstall" value="../../Scripts/expressInstall.swf" />



<div>

<h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>

</div>



</object>



</object>

<hr>

<textarea cols="95" rows="5" id="com"></textarea><br>

<input type="button" value="我来说几句" onclick="test()">

<div id="id1" style="width:800px; height:150px; background:#C9C;"></div>

<script type="text/javascript">

swfobject.registerObject("FlashID");

</script>

</body>

</html>

______________________________________________________________________________________________________________________________

ajaxUtil.js

//此文件是封装好的一个ajax功能函数文件

function get(url1,params,methodName){

/*

！！！！！！！！！！！！！！这个函数是关键，这个函数包括初始化对象，请求的路径，

ajax使用的基本步骤：

1、初始化ajax引擎

2、封装url（设定要请求的路径）

3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）

4、将要请求的信息通过引擎发送到服务器进行处理

5、监听服务器返回给ajax引擎的处理状态

6、判断是否交互完毕，如果交互完毕则取出返回的数

*/

//初始化ajax引擎

var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。

//重组URL的值，将请求路径和获取的参数一并传过去

//在这Math.random（）的防止缓存重复

var url=url1+"?"+params+"&r="+Math.random();

//alert(url);

//打开引擎

xhr.open("get",url,true); //readyState=1

//发送请求

xhr.send(null); //readyState=2

//监听readyState值的改变，每次改变都会执行下面额函数

xhr.onreadystatechange=function (){

//如果等于4，表明交互完毕，我们可以取出服务器返回的内容

if(xhr.readyState==4){

//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName

methodName(xhr);

}

}

}

//$$（）方法用于方便取出 id="id" 的对象

function $$(id){

return document.getElementById(id);

}

________________________________________________________________________________________________________________________

ajax-youku-server.php

<?php

//省略了插入数据库步骤

echo $_GET['comment'];

?>

___________________________________________________________________________________________________________________________

注意：视频没链接，但整个程序的思路很明显了，希望大家看懂后自己能写出更加优化的代码分享给大家！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航