ajax异步刷新例子—播放视频

最新推荐文章于 2021-08-06 17:45:23 发布

李晓娜

最新推荐文章于 2021-08-06 17:45:23 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：【B/S】

本文链接：https://blog.youkuaiyun.com/u010955843/article/details/42344079

不论是看电视剧还是新闻之类的视频，出于读者或者用户的某种对于视频的感受，我们可以点击一下发表一下自己的意见，比如说博客上的“顶”或者“赞”，“踩”，影视剧的评判“赞”，“踩”等等，还有优酷、土豆视频播放器下面的发表评论等等都是我们常见的东西。

细心的你可能会发现，当我们点击赞、踩或者发现评论的时候页面并不会全部刷新或者说页面重新加载，只是赞或者踩的次数加一又或者评论的数目加多并且发布出来而已。

这是怎么实现的，没错这就是ajax技术，其实随处可见ajax技术，只要我们在刷新的时候不是整个页面的刷新，那么用到的就是ajax技术，这样的技术考虑了人的心理，谁都不希望自己点个赞或者踩视频从新播放吧。

1.实例展现

下面以播放视频赞或者踩为例，来看看ajax是如何实现这一功能的吧。

Ø 首先建立HTML页，命名为videoView，代码如下：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><strong><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style  type="text/css">
        video {
            width:300px;
            height:200px;
        }
    </style>
    <script src="js/ajax.js" type="text/javascript"></script>
        <script type="text/javascript">
            function zan() {
                var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性。XHR
                xmlhttp.open("POST", "ZanCai.ashx?action=Zan", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求

                //DRY：不要复制粘贴代码
                //AJAX是异步的，并不是等到服务器端返回才继续执行
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
                    {