AJAX 使用实践

简介:

 在 Google 地图的使用上,我需要根据数据库中控制命令表(T_ZK_CtrlMsg)的记录行数,控制某一发送指令面板DIV是否显示。

指令面板DIV的代码如下:

复制代码
< div class ="monitor_show" >
< div id ="DIV_Map" style ="width:712px;height:456px;" ></ div >
<!-- 透明浮出层 -->
< div id ="jmp_show" class ="jmp_show" >
< b ></ b >
< div class ="jmp_title2" >
< h3 > < a href ="###" id ="a_size" onclick ="xg_showhidden('jmp_list',this);" class ="jmp_min" title ="最大化" >最大化 </ a >遥测指令发送 </ h3 >

<label><input type="radio" id="RBD_Point" name="RBD_Select" checked="checked" onclick="MarkerSelect('point');" />点选</label>
<label><input type="radio" id="RBD_Polygon" name="RBD_Select" onclick="MarkerSelect('polygon');" />框选</label>
<label><input type="radio" id="RBD_SelectAll" name="RBD_Select" onclick="MarkerSelect('all');" />全选</label>

<asp:Button ID="BTN_4102" runat="server" Text="查询" OnClick="BTN_4102_Click" />
<asp:Button ID="BTN_4103" runat="server" Text="发送" OnClick="BTN_4103_Click" />
</div>

<ul id="jmp_list" style="display:none">
<asp:RadioButtonList ID="RDL_Order" runat="server">
<asp:ListItem Text="" Value=""></asp:ListItem>
</asp:RadioButtonList>
</ul>
</div>
</div>

复制代码

注意:我需要在如下这个超链接中,去服务器端判断是否显示ID 为 jmp_list 的服务器控件是否显示。

<h3><a href="###" id="a_size" onclick="xg_showhidden('jmp_list',this);" class="jmp_min" title="最大化">最大化</a>遥测指令发送</h3>

接下来,我们看看JavaScript 中 xg_showhidden() 做了些什么。

复制代码

<script>

var xmlhttp;
function initXmlHttp(){
if(window.ActiveXObject){ //IE
xmlhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){ //非IE
xmlhttp = new window.XMLHttpRequest();
}
}
window.onload = initXmlHttp;

function sendRequest(_url){
//参数
xmlhttp.open("GET",_url + "?ajax=ajax&" + new Date().getTime());
xmlhttp.onreadystatechange = funState;
xmlhttp.send(null);
}

function funState(){
if( xmlhttp.readyState == 4)
{
if( xmlhttp.status == 200 || // 200 成功
xmlhttp.status == 0) //本机测试可能为0。
{
var re = xmlhttp.responseText;
document.getElementById("runPanelShow").value = re;
}
}
}
var obj1;
function GetCtrlInstruct(id,el){

obj1 = new Object();

obj1.Id = id;

obj1.El = el;

//发送

sendRequest("Run_Ctrl.ashx");

var tidck = window.setTimeout(function(id,el){
var v_Show = document.getElementById("runPanelShow").value;

if(v_Show == "false"){
window.clearTimeout(tidck);
// 指令过多,false
alert("等待发送的指令过多,请稍后再试 ...");
}
if(v_Show == "true"){
window.clearTimeout(tidck);
//var objbox = document.getElementById('jmp_list');

var objbox = document.getElementById(obj1.Id);

objbox.style.display="";
//var el = document.getElementById('a_size');
//el.title="最小化";

obj1.El.title = "最小化";

}
},1000);
}

function xg_showhidden(id,el) {
var objbox = document.getElementById(id);
if (objbox.style.display=="") {
objbox.style.display="none";
el.title="最大化";
}
else {
//xg 2011.12.21
GetCtrlInstruct(id,el);  
}
}
</script>
<input type="hidden" id="runPanelShow" name="runPanelShow" value="" />

复制代码

注意:

> 最后一个隐藏域是用来保存服务器处理的结果。

> 而 GetCtrlInstruct() 函数中,我使用了window.setTimeout() 函数每隔1秒钟就去询问服务器的处理结果,直到获得结果,才用

window.clearTimeout(tidck) 函数结束该计时器。

服务器端只是需要处理的结果数据。一开始,我就直接写在该页面对应的asp.cs文件中。

结果是,返回的不但有结果数据,接下来还有该页面的整个数据。于是,我才用了ashx 文件(Run_Ctrl.ashx),代码如下:

复制代码
namespace prj_ZK
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Run_Ctrl : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain ";
// context.Response.Write("Hello World");

// ----------------------- xg -------------------------
// 判断发送指令个数
if (context.Request.HttpMethod == " GET ")
{
string str = context.Request.QueryString[ 0];
if (str == " ajax ")
{
int num = new ZK_BLL.CtrlMsg_BLL().Get_CtrlMsg_WaitSend_Num();
if (num >= 30)
{
context.Response.Write( " false ");
}
else context.Response.Write( " true ");
}
}
// ----------------------- xg -------------------------

}

public bool IsReusable
{
get
{
return false;
}
}
}
}

复制代码


服务器端很简单,只是从数据库获得控制命令表的记录行数:

select count( *) from T_ZK_CtrlMsg

然后和 30 这个阀值比较大小,决定返回的是 true 还是 false 给 ID 为runPanelShow 的 hidden 控件。




本文转自钢钢博客园博客,原文链接:http://www.cnblogs.com/xugang/archive/2011/12/22/2298229.html,如需转载请自行联系原作者

相关文章
|
3月前
|
XML 前端开发 JavaScript
Ajax的基础使用
Ajax的基础使用
27 0
|
9月前
|
前端开发 JavaScript
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
AJAX-day03-AJAX进阶
|
10月前
|
XML 前端开发 JavaScript
前端|AJAX入门
前端|AJAX入门
69 0
|
数据采集 XML 前端开发
【Ajax入门技术】了解Ajax
【Ajax入门技术】了解Ajax
99 0
【Ajax入门技术】了解Ajax
|
XML 前端开发 JavaScript
|
前端开发
Ajax学习
本文主要讲Ajax学习
|
JavaScript 前端开发 UED
学习Ajax
一、Ajax优缺点 优点:①页面局部刷新数据,用户体验感好;②所有浏览器都支持,不需下载额外插件;③使用异步方式与服务器通信;④减轻了服务器压力,加快了响应速度,体现ajax是按需获取数据的。
|
XML JavaScript 前端开发
ajax学习小结
ajax学习小结 一、Ajax Asynchronous JavaScript And XML = 异步的 JavaScript 及 XML。 目的:使得整个页面不刷新也能出现效果。
960 0
|
前端开发 缓存 JavaScript
ajax基础
最简单的get提交方式 首先在前端页面书写一个文本框用来获取用户输入的值,再创建一个空的div框用来接收回调函数所显示的值并且都要定义一个id的属性值,因为ajax获取值和传值的时候需要用到id而不是name也不是class 并且在jQuery中定义变量接收值时使用的是var 2018-01-08 14-18-37 的屏幕截图.
923 0
|
Web App开发 前端开发 JavaScript
Ajax的简单学习
ajax的核心是 XMLHttpRequest html引用外部的时候这些要放在最后 好处如下: 1.加快网页加载速度 2.
876 0