标题:反向Ajax扫盲贴(1)
只看楼主
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
结帖率:80.91%
 问题点数:0 回复次数:9 
反向Ajax扫盲贴(1)
先试着开一帖吧 自己总结了一下 废话少说 开场白省去(不喜欢 有种给人装X的感觉 我还是低调点) 我直接说知识点
ajax不用说了 异步的JavaScript和XML 常用的数据 json 与JavaScript语法很接近,且消耗更少带宽 这个自不必细解释 如下代码Ajax请求通过某个地方的邮政编码来检索该地的名称
程序代码:
var url ='http://www.'
  + $('#postalCode').val() +'&country='
  + $('#country').val() +'&callback=?';
  $.getJSON(url, function(data) {
  $('#placeName').val(data.postalcodes[0].placeName);
}); 

那反向Ajax通信技术 又是什么呢 我简单的说让大家明白 就是能够从服务器端向客户端发送数据 服务器就可以尽可能快地向客户端发送事件也就是低延迟通信 (一般都这么叫吧)。
那么反向Ajax方式都包括哪几种呢  1 轮询  2 Comet(不懂直接理解为 服务器推)3PiggyBack(什么是PiggyBack 三两句话说不完 下下贴再说吧)

1 轮询
假设有个未使用AJAX的Web页面 使用<meta>刷新标签,每隔数秒就更新这个页面 这就是所说的轮询 客户端定时轮询服务器,看是否存在更新,并且显示服务器传回的当前信息 在网页上 使用一些简单的JavaScript代码以持续地更新页面,就可以实现相同的事情。确实,能够从表面实现所谓的推送,这就是轮询技术
轮询技术是两种主动式反向Ajax方法的一种 客户端在每个时间周期内向服务器发送请求 看看服务器端有没有数据更新 如果有,就向服务器请求数据

上面的都是轮询的解释 这个大家一看就懂  就这
程序代码:
<mce:script type="text/javascript"><!--
69.        function getData() {//获取留言数据
70.            var temp = "";
71.            $.getJSON("Data.aspx", { ID: "2", time: new Date() }, function (json) {//利用ajax返回json的方式
72.                if (json.length > 0) {//返回有数据
73.                    $("#news").html(" <font color='Red'>有新消息:</font>");
74.                    for (var i = 0; i < json.length; i++) {//循环json,生成需要的标签
75.                        temp += "<li id='" + json[i].ID + "' ><img src="../img/t.gif" mce_src="img/t.gif" style='height: 14px; width: 14px' /><a  href="#" mce_href="#" onclick='getHref(" + json[i].ID + "); return false;' >" + json[i].SendID + "给您留言了</a></li>";
76.                    }
77.                    $("#info li").remove(); //移除之前的元素li
78.                    $("#info").append(temp); //追加新的
79.                    $("li").hide(); //隐藏全部,只显示前2条
80.                    $("li:eq(0)").show();
81.                    $("li:eq(1)").show();
82.                }
83.                else {
84.                    $("#news").html(" <font color='#999'>无新消息:</font>"); //无数据时的提示
85.                }
86.            })
87.        };
88.        $(function () {//间隔3s自动加载一次
89.            getData(); //首次立即加载
90.            window.setInterval(getData, 3000); //循环执行!!
91.            }
92.         );
93.        function getHref(id) {//重定向页面并且移除当前li标签
94.            location.href = 'ShowAndRe.aspx?ID=' + id;
95.            $(document.getElementById(id)).remove();
96.        }
97.    
98.// --></mce:script>
99.</head>
种方式我举一个例子
消息盒子 这种就是常用的AJAX轮询方式
当然轮询好坏呢 完全取决于个人怎么用 有的人说好有的人说不好
我举个例子
假如客户端每10秒进行一次请求,客户端数量少的时候没关系,如果数量多的话,那么每10秒就有这么多用户进行请求,每个请求都要连接数据库,是不是耗费资源太大,性能太低?
用户打开多个页面,每个页面都进行Ajax长轮训的话,服务器就要处理用户数量*N的请求,这样耗费资源更大 ???

轮询如何优化???
其实如果优化的话呢 一般是加大轮询时间,另外对服务器端的程序进行优化,比如用户有新消息的用户id放在内存里面缓存,而不是每次都读取数据库 另外在结合缓存呢 效果更好一些
现在轮询主要用法嗯 是长轮询
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求。
缺点:服务器hold连接会消耗资源。

我举个例子给大家看看什么是长轮询






 

[ 本帖最后由 wangnannan 于 2015-5-27 11:08 编辑 ]
搜索更多相关主题的帖子: 邮政编码 country 开场白 知识点 ajax 
2015-05-27 10:54
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 
程序代码:
<script type="text/javascript">         
var userID = 0;         
function SendXHR() {             
$.ajax({                 
type: "post", //AJAX请求类型                 
url: "LongPollingServer.ashx", //请求url                 
cache: false,  //无缓存                 
timeout: 1000 * 80,  //AJAX请求超时时间为60秒                 
data: { time: 60, userID: userID }, //参数time时间为最多等待(后台保持)时间(60秒无论是否有数据立即返回),单位为秒。userID判断诗句是否为新数据的标识                 
success: function (data, textStatus) {                     
var obj = document.getElementById("NameDisplay");                      //判断返回成功还是失败  如果后台保持连接的时间一到并且没有新数据就会返回fail开头失败的数据                     
if (data != null && data != "" && !(data.indexOf("fail") != -1)) {                         
var strarr = data.split(",");                         // alert(strarr[0]);                         
userID = strarr[0];                        

 obj.innerHTML = "亲!有新用户注册哦!用户名:" + strarr[1];                      }                     
else {                         
obj.innerHTML = "亲!暂无新用户注册哦";                     
}                     
SendXHR();//请求后立即发起AJAX请求                  },                
 error: function (XMLHttpRequest, textStatus, errorThrown) {                     
//New Error do something                     
if (textStatus == "timeout") {                          //超时间                         
SendXHR();                     
}                

 }             

 });        

 }         
window.onload = function () {             
SendXHR();         
}      </script>  

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:55
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 
/// <summary>      /// AJAX长轮询后台处理页面      /// 主要用于保持连接      /// 有数据返回,无数据继续保持连接超时返回      /// author:bluescreen      /// Date  :2013-03-14      /// blog:http:// 请不要关注代码编写规范等一些问题。这仅仅是一个DEMO      /// 还存在诸多问题      /// </summary>      public class LongPollingServer : IHttpHandler      {           public void ProcessRequest(HttpContext context)          {             /*              context.Response.ContentType = "text/plain";              context.Response.Write("Hello World");*/             int SendTime = 0;  //最多等待时间              int userID = 0;    //上一次的用户ID              if (context.Request.Form["time"] != null&&context.Request.Form["time"].ToString()!="")              {                  SendTime =int.Parse(context.Request.Form["time"].ToString());//接收传来的的后台要保持时间              }              if (context.Request.Form["userID"] != null && context.Request.Form["userID"].ToString() != "")              {                  userID = int.Parse(context.Request.Form["userID"].ToString());              }              int i = 0;//计算超时时间(秒)              while (true)              {                  Thread.Sleep(1000);//停留一千毫秒(1秒)                  i++;                  if (i < SendTime)                  {                      if (NameStr(userID) != "")                      {                          context.Response.Write(NameStr(userID));                          break;                      }                  }                  if (i == SendTime)                  {                      context.Response.Write("fail:无数据");                      break;                  }              }          }          /// <summary>          /// 获得用户名          /// </summary>          /// <param name="userID"></param>          /// <returns></returns>          private string NameStr(int userID)          {              string result = string.Empty;              string Sqlstr = "select top 1 ID,UserName from AjaxPolling   Order by ID desc";              DataSet ds = new DataSet();              ds = SQLHelper.Query(Sqlstr, null);              if (ds != null)              {                  if (ds.Tables[0].Rows.Count >= 1)                  {                      if (int.Parse(ds.Tables[0].Rows[0][0].ToString()) != userID || 0 ==int.Parse(ds.Tables[0].Rows[0][0].ToString()))                      {                          result = ds.Tables[0].Rows[0][0].ToString() + "," + ds.Tables[0].Rows[0][1].ToString();                      }                  }              }               return result;          }          public bool IsReusable          {              get             {                  return false;              }          }      }  

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:56
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 
粘的有点乱了 后台主要是取数据 然后能结合线程sleep 线程优化呢 是一门学问 这个在这个帖子里就不讲了

[ 本帖最后由 wangnannan 于 2015-5-27 11:00 编辑 ]

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:56
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 
扫盲一下
什么是长连接、长轮询
用通俗易懂的话来说,就是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它只是一种快速的停下然后又立即开始连接而已。

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:58
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 

给大家提供几个轮询的套餐
小学生版
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
实例:适于小型应用。
 
高大尚版
长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资源小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。
实例:WebQQ、Hi网页版、Facebook IM。
 
 
附带两个知识点扫盲
长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对方便。
缺点:服务器维护一个长连接会增加开销。
实例:Gmail聊天
 

Flash Socket:在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信,而不是伪即时。
缺点:客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。
实例:网络互动游戏。


[ 本帖最后由 wangnannan 于 2015-5-27 11:02 编辑 ]

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:58
wangnannan
Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18
等 级:贵宾
威 望:87
帖 子:2545
专家分:9359
注 册:2007-11-3
得分:0 
长连接、长轮询一般应用与WebIM、ChatRoom和一些需要及时交互的网站应用中。其真实案例有:WebQQ、Hi网页版、Facebook IM等。
用好了也很强大


[ 本帖最后由 wangnannan 于 2015-5-27 11:03 编辑 ]

出来混,谁不都要拼命的嘛。 。拼不赢?那就看谁倒霉了。 。有机会也要看谁下手快,快的就能赢,慢。 。狗屎你都抢不到。 。还说什么拼命?
2015-05-27 10:58
hu9jj
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:红土地
等 级:贵宾
威 望:396
帖 子:11713
专家分:43267
注 册:2006-5-13
得分:0 
好贴,跟着学习!

活到老,学到老! http://www. E-mail:hu-jj@
2015-05-29 07:04
wmf2014
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:216
帖 子:2039
专家分:11273
注 册:2014-12-6
得分:0 
楼主,你好厉害啊!
不懂

能编个毛线衣吗?
2015-05-29 10:16
不懂才问
Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
来 自:大草原
等 级:贵宾
威 望:29
帖 子:1501
专家分:6573
注 册:2010-7-5
得分:0 
学习中,收藏!!!

报告老师,我低头不是因为我在装低调,是你问的问题,我真的不会答,,,
2015-05-30 13:55



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-445825-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.094958 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved