注册 登录
编程论坛 → JavaScript论坛

反向Ajax扫盲贴(1)

wangnannan 发布于 2015-05-27 10:54， 8603 次点击
先试着开一帖吧 自己总结了一下 废话少说 开场白省去（不喜欢 有种给人装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 编辑 ]
9 回复
#2
wangnannan2015-05-27 10:55
程序代码：
<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>  
#3
wangnannan2015-05-27 10:56
/// <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;              }          }      }  
#4
wangnannan2015-05-27 10:56
粘的有点乱了 后台主要是取数据 然后能结合线程sleep 线程优化呢 是一门学问 这个在这个帖子里就不讲了

[ 本帖最后由 wangnannan 于 2015-5-27 11:00 编辑 ]
#5
wangnannan2015-05-27 10:58
扫盲一下
什么是长连接、长轮询
用通俗易懂的话来说，就是客户端不停的向服务器发送请求以获取最新的数据信息。这里的“不停”其实是有停止的，只是我们人眼无法分辨是否停止，它只是一种快速的停下然后又立即开始连接而已。
#6
wangnannan2015-05-27 10:58

给大家提供几个轮询的套餐
小学生版
轮询：客户端定时向服务器发送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 编辑 ]
#7
wangnannan2015-05-27 10:58
长连接、长轮询一般应用与WebIM、ChatRoom和一些需要及时交互的网站应用中。其真实案例有：WebQQ、Hi网页版、Facebook IM等。
用好了也很强大


[ 本帖最后由 wangnannan 于 2015-5-27 11:03 编辑 ]
#8
hu9jj2015-05-29 07:04
好贴，跟着学习！
#9
wmf20142015-05-29 10:16
楼主，你好厉害啊！
不懂
#10
不懂才问2015-05-30 13:55
学习中，收藏！！！
1
©2025, BC-CN.NET
电脑版