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

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

效果图：

下边将代码共享给大家:

主要功能文件有三个:

__________________________________________________________________________________________________________________

index1.html

无标题文档

#conmment{

width:500px;

height:400px;

background-color:#FC3;}

//此函数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);

}

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

---

swfobject.registerObject("FlashID");

______________________________________________________________________________________________________________________________

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){//动态调用方法，为什么说是动态呢？方法的名称是个变量methodNamemethodName(xhr);

}

}

}//$$()方法用于方便取出 id="id" 的对象function $$(id){

return document.getElementById(id);

}

________________________________________________________________________________________________________________________

ajax-youku-server.php

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

echo $_GET['comment'];

?>

___________________________________________________________________________________________________________________________

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