JavaScript Ajax技术 

1、Ajax需求,例子。
   -----------------------ViewVideo.ashx
   contex.Response.ContentType="text/html";
   string strIsPostBack=context.Request["IsPostBack"];
   bool isPostBack=Convert.ToBoolean(context.Request["IsPostBack"]);
   if(string.IsNullOrEmpty(strIsPostBack))
   {
     ispostBack=false;
    }     
    else
   {
     isPostBack=Convert.ToBoolean(strIsPostBack);
    }
    
    if(isPostBack)//如果是返回来的页面，则要统计
    {//投票
       string zan=context.Request["Zan"];
       if(string.IsNullOrEmpty(zan))
       {
           SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
           context.Response.Redirect("ViewVideo.ashx");
        }
        else
        {
           SqlHelper.ExecuteNonQuery("Update  T_ZanCai set ZanCount=ZanCount+1");
           context.Response.Redirect("ViewVideo.ashx");
        }
    }
    else//如果只是进入这个页面，直接读出来。
    {
       int zanCount=(int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");
       int caiCount=(int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
       var data=new {ZanCount=zanCount,CaiCount=caiCount};
       string html=CommonHelper.RenderHtml("ViewVideo.htm",data);
       context.Response.Write(html);
    }

   -----------------------ViewVideo.htm
   <body>
         <video src="diaosi.mp4" autoplay controls></video>//设置自动播放，html5里面的 
         <form action="ViewVideo.ashx" method="post">
         <input type="hidden" name="IsPostBack" value="true"/>//设置隐藏字段，判断赞和踩
         <p><input type="submit" name="Zan" value="赞"/>$Model.ZanCount</p>
         <p><input type="submit" name="Cai" value="踩"/>$Model.CaiCount</p>
         </form>
   </body>
   ----------------------Test1.mdf
   ZanCount int 允许为空
   CaiCount int 允许为空
   //这样就实现了赞和踩，但是。每点一次都要刷新重新进入视频。要实现Ajax刷新。

2、在HTML中使用JavaScript创建，XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据。就像

JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出，Http的请求和获得服务器的返回数据，

这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。

3、XMLHTTPRequest对象的用法。
   ------------------------------------------------------ViewVideo2.htm重新弄个页面
   <head>
   <script type="text/javascript">
     function zan()
     {
      var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject

('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性。XHR，不同浏览器创建xmlhttprequest不一样，

这种方法是兼容好多浏览器的创建。
      xmlhttp.open("POST", "ZanCai.ashx?action=Zan", true); 
      //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求
      //DRY：不要复制粘贴代码 要尽量封装成js库。
      //AJAX是异步的，并不是等到服务器端返回才继续执行
      xmlhttp.onreadystatechange = function (){
          if (xmlhttp.readyState == 4) 
         //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）

、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
          {
            if (xmlhttp.status == 200) //如果Http状态码为200则是成功
            {
              //alert(xmlhttp.responseText);
             document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;   
             //只有返回成功了，并且200才进行处理。                        //responseText为服务

器端返回的报文正文
             }
             else
             {    
               alert("AJAX服务器返回错误！");
              }
           }
      }
      //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
      xmlhttp.send(); 
      //这时才开始发送请求。并不等于服务器端返回。请求发出去了，我不等！去监听      

onreadystatechange吧！
      }  
   </script>
   </head>
   <body>
     <video src="diaosi.mp4" autoplay controls></video>//设置自动播放，html5里面的 
      <p>
       <input type="submit" name="Zan" value="赞" onclick="zan()"/>//加入一个onclick
       <label id="ZanCount"></label>
      </p>
      <p>
       <input type="submit" name="Cai" value="踩"/>
         <label id="CaiCount">
        </lable>
      </p>
   </body>
   ---------------------------------------------ZanCai.ashx
   string action=context.Request["action"];
   if(action=="Zan")
   {
      SqlHelper.ExecuteNonQuery("Update  T_ZanCai set ZanCount=ZanCount+1");//加1
      int zanCount=(int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");//取最新
      context.Response.Write(zanCount);  
    }
    else
    {
      SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
      int caiCount=(int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
      context.Response.Write(caiCount);
    }

4、封装Ajax请求。不用写那么一堆。可以封装Ajax库。
   添加文件夹，建立JS文件。
   ------------------------------------------ajax.js
   function ajax(data,onsuccess){
    //onsuccess是指向function的变量，类似于C#委托，data是指向一个字符串

    function ajax(url,onsuccess){//先假定onsuceess就只有一个参数，就是一个返回的报文。
     var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject

('Microsoft.XMLHTTP'); 
      xmlhttp.open("POST", "url", true); 
      xmlhttp.onreadystatechange = function (){
          if (xmlhttp.readyState == 4) 
          {
            if (xmlhttp.status == 200)
            {
               //onsuccess();//处理成功后的逻辑是变的。
               //document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;
                onsuccess(xmlhttp.responseText);
              //假定onsuceess就只有一个参数，就是一个返回的报文。则可以这样写，直接把报文传过去

。
             }
             else
             {    
               alert("AJAX服务器返回错误！");
              }
           }
      }
      xmlhttp.send(); 
      }    
   }

5、做Cai的Ajax-----------------------------------ViewVideo2.htm
   <script type="text/javascript" src="js/ajax.js">//路径为什么不../js/ajax.js
   </script>
    function cai()
    {
      ajax("ZanCai.ashx?action=Cai",function(resText){
       document.getElementById("CaiCount").innerHTML=resText;});//为什么不../ZanCai.ashx?
     }
     ----------------------<input type="button" name="Cai" value="踩" onclick="cai()">

6、5中的路径问题，为什么不同的文件夹，调用的时候没有..呢?
   <video src="diaosi.mp4" autoplay controls></video>//给我我这个文件夹下的diaosi.mp4

 

posted on 2014-04-13 22:59  钟灵毓秀的家园  阅读(229)  评论(0)    收藏  举报

导航