XMLHTTPREQUEST收藏

最新推荐文章于 2025-06-18 13:23:59 发布

翻译最新推荐文章于 2025-06-18 13:23:59 发布 · 592 阅读

文章标签：

#xmlhttprequest #function #class #string #null #internet

本文介绍了一种基于AJAX的通信机制实现方案，包括XMLHttpRequest连接池管理、前后端交互流程及客户端界面更新机制。利用POST请求方式实现数据传输，并通过定时器定期向服务器请求最新数据。

创建名为：____________ScriptAjaxBase.js的JS文件，代码如下

//************************************************************************************ //创建XMLHttpRequest连接池 //************************************************************************************ //使用literal语法定义一个对象：XMLHttp var XMLHttp = { //定义第一个属性，该属性用于缓存XMLHttpRequest对象的数组 XMLHttpRequestPool: [], //对象的第一个方法，该方法用于返回一个XMLHttpRequest对象 getInstance:function() { // 从XMLHttpRequest对象池中取出一个空闲的XMLHttpRequest for (var i = 0; i < this.XMLHttpRequestPool.length; i ++) { //如果XMLHttpReuqest的readyState为0，或者为4， //都表示当前的XMLHttpRequest对象为闲置的对象 if (this.XMLHttpRequestPool[i].readyState == 0 || this.XMLHttpRequestPool[i].readyState == 4) { return this.XMLHttpRequestPool[i]; } } //如果没有空闲的，将再次创建一个新的XMLHttpRequest对象 this.XMLHttpRequestPool[this.XMLHttpRequestPool.length] = this.createXMLHttpRequest(); //返回刚刚创建的XMLHttpRequest对象 return this.XMLHttpRequestPool[this.XMLHttpRequestPool.length - 1]; }, //创建新的XMLHttpRequest对象 createXMLHttpRequest:function() { //对于DOM 2 规范的浏览器 if (window.XMLHttpRequest) { var objXMLHttp = new XMLHttpRequest(); } //对于Internet Explorer浏览器 else { //将Internet Explorer内置的所有XMLHTTP ActiveX控制设置成数组 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP']; //依次对Internet Explorer内置的XMLHTTP控件初始化，尝试创建XMLHttpRequest对象 for(var n = 0; n < MSXML.length; n ++) { try { //如果可以正常创建XMLHttpRequest对象，使用break跳出循环 var objXMLHttp = new ActiveXObject(MSXML[n]); break; } catch(e) { } } } //Mozilla某些版本没有readyState属性 if (objXMLHttp.readyState == null) { //直接设置其readyState为0 objXMLHttp.readyState = 0; //对于哪些没有readyState属性的浏览器，将load动作与下面的函数关联起来 objXMLHttp.addEventListener("load", function () { //当从服务器加载数据完成后，将readyState状态设为4 objXMLHttp.readyState = 4; if (typeof objXMLHttp.onreadystatechange == "function") { objXMLHttp.onreadystatechange(); } }, false); } return objXMLHttp; }, //定义对象的第三个方法：发送请求(方法[POST,GET], 地址, 数据, 回调函数) sendRequest: function (method, url, data, callback) { var objXMLHttp = this.getInstance(); with(objXMLHttp) { try { //增加一个额外的randnum请求参数，用于防止IE缓存服务器响应 if (url.indexOf("?") > 0) { url += "&randnum=" + Math.random(); } else { url += "?randnum=" + Math.random(); } //打开与服务器的连接 open(method, url, true); //对于使用POST请求方式 if (method == "POST") { // 设定请求头 setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); send(data); } //对于采用GET请求 if (method == "GET") { send(null); } //设置状态改变的回调函数 onreadystatechange = function () { //当服务器的相应完成时，以及获得了正常的服务器响应 if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304)) { //当响应时机成熟时，调用回调函数处理响应 callback(objXMLHttp.responseText); } } } catch(e) { alert(e); } } } };

创建名为____________ScriptPageBase.js的JS文件，代码如下

//*********************************************************************************************** //JS界面应用 //*********************************************************************************************** function sendRequest(args) { /* 这里做一下参数说明： 1."POST"---------------------------------固定好了，不要用"GET"吧，两者区别你应该知道 2. args----------------------------------传到后台参数的格式，要有&符号如"&tt=2" 2."Handler.ashx"-------------------------后台处理文件的代码 4."methodCallBack"-----------------------后台代码传过来后,JS代码响应的方法,后他传回来一条数据，通过这个方法处理手写的AJAX机制你应该知道吧，写一下，个人见解，仅供参考 a.创建xmlHttpRequest,并通过它传送数据到后台 b.xmlHttpRequest发送数据后就一直等待后台发送回来的数据 c.处理后台发送回来的数据 */ XMLHttp.sendRequest(msgConfig.method,msgConfig.ashxUrl,args,methodCallBack); } //这里的result就是后台发送回来的数据额，可以是XML格式的，也可以是JSON等，随便你啦 function methodCallBack(result) { if(result!="") { showMsg(eval(result)); } } //登陆开始加载事件 function loadMsg(args) { //initPage(); //在这里弄一个定时器，每隔一段时间就发送一下，（毫秒） sendRequest(args); window.setInterval(function(){sendRequest(args);},msgConfig.timeZone);//5分钟获取一次消息 } function showMsg(msg) { //msg可以是多条消息，取决于JSON字符串 msg=msg[0]; var MSG1 = new CLASS_MSN_MESSAGE(boxConfig.id,boxConfig.width,boxConfig.height,msg.title,msg.sender+msg.content,msg.tip); //************************************* //要实现自己的链接必须重写oncommand //************************************* MSG1.oncommand=function() { MSG1.hide(); linkCommand(msg.id); } MSG1.rect(null,null,null,screen.height-20); MSG1.speed = boxConfig.speed; MSG1.step = boxConfig.step; MSG1.show(); }

____________ScriptMessageBox.js代码：

// //*********************************************************************************************** //窗体代码 //ADD BY YYQ 2010-11-26 //*********************************************************************************************** function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action) { this.id = id; this.title = title; this.caption= caption; this.message= message; this.target = target; this.action = action; this.width = width?width:200; this.height = height?height:120; this.timeout= 1000; this.speed = 20; this.step = 1; this.right = screen.width -1; this.bottom = screen.height; this.left = this.right - this.width; this.top = this.bottom - this.height; this.timer = 0; } /* * 隐藏消息方法 */ CLASS_MSN_MESSAGE.prototype.hide = function() { if(this.onunload()) { var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top; var me = this; if(this.timer>0) { window.clearInterval(me.timer); } var fun = function() { var x = me.left; var y = 0; var width = me.width; var height = 0; if(me.offset>0) { height = me.offset; } y = me.bottom - height; if(y>=me.bottom) { window.clearInterval(me.timer); me.Pop.hide(); } else { me.offset = me.offset - me.step; } me.Pop.show(x,y,width,height); } this.timer = window.setInterval(fun,this.speed) } } /* * 消息卸载事件，可以重写 */ CLASS_MSN_MESSAGE.prototype.onunload = function() { return true; } /* * 消息命令事件，要实现自己的连接，请重写它 * */ CLASS_MSN_MESSAGE.prototype.oncommand = function() { if(this.action) window.open(this.action); this.hide(); } /* * 消息显示方法 */ CLASS_MSN_MESSAGE.prototype.show = function() { var oPopup = window.createPopup(); //IE5.5+ this.Pop = oPopup; var w = this.width; var h = this.height; var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>" str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>" str += "<TR>" str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>" str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>" str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>" str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>" str += "</TR>" str += "<TR>" str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">" str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>" str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>" str += "</DIV>" str += "</TD>" str += "</TR>" str += "</TABLE>" str += "</DIV>" oPopup.document.body.innerHTML = str; this.offset = 0; var me = this; var fun = function() { var x = me.left; var y = 0; var width = me.width; var height = me.height; if(me.offset>me.height) { height = me.height; } else { height = me.offset; } y = me.bottom - me.offset; if(y<=me.top) { me.timeout--; if(me.timeout==0) { window.clearInterval(me.timer); me.hide(); } } else { me.offset = me.offset + me.step; } me.Pop.show(x,y,width,height); } this.timer = window.setInterval(fun,this.speed) var btClose = oPopup.document.getElementById("btSysClose"); btClose.onclick = function() { me.hide(); } var btCommand = oPopup.document.getElementById("btCommand"); btCommand.onclick = function() { me.oncommand(); } } /* ** 设置速度方法 **/ CLASS_MSN_MESSAGE.prototype.speed = function(s) { var t = 20; try { t = praseInt(s); } catch(e){} this.speed = t; } /* ** 设置步长方法 **/ CLASS_MSN_MESSAGE.prototype.step = function(s) { var t = 1; try { t = praseInt(s); } catch(e){} this.step = t; } CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom) { try { this.left = left !=null?left:this.right-this.width; this.right = right !=null?right:this.left +this.width; this.bottom = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height; this.top = top !=null?top:this.bottom - this.height; } catch(e) {} }

____________ScriptMain.js

// JScript 文件 //*********************************************************************************************** //主页面，只需修改此页面参数即可 //*********************************************************************************************** //基本参数 var msgConfig={ timeZone:300000, //获取消息间隔的时间，默认每隔5分钟获取一次 ashxUrl:"Handler.ashx", //AJAX后台事件处理文件路径 method:"POST" //"POST"或"GET" } //样式 var boxConfig={ width:250, //窗体宽度 height:150, //窗体高度 speed:10, //显示速度 step:5, //步长 id:"msg" //ID,可用于document.getElemntById()方法获得对象 } //消息实体对象 //JSON var entityConfig={ title:"", //标题 sender:"", //发送人 content:"", //内容 tip:"" //提示信息 } //*********************************************************************************************** window.onload=function() { //显示对话框方法，若需要传递参数到后台，格式为"&t=12&s=01",以&符号隔开 loadMsg(null); } //点击提示信息内容时的处理函数 function linkCommand(id) { window.open("http://www.baidu.com?id="+id); }

在ASP.NET中新建一般处理文件Handler.ashx，代码如下：

<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; //构建的json数据，注意格式 string data = "[{id:/"001/",title:/"消息提示/",sender:/"张三：/",content:/"你好啊！/",tip:/"提示:您有(1)条新信息，请查收!/"}"+ ",{id:/"002/",title:/"广告/",sender:/" /",content:/" /",tip:/"上海近日发生火灾，死伤惨重！/"}" +"]"; context.Response.Write(data); //context.Response.Write("前台发送的参数："+context.Request["tt"]+",后台返回数据："+"你是大小姐！"); //string[] text = new string[] { "标题","内容",""}; } public bool IsReusable { get { return false; } } }

页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Test</title> <script type="text/javascript" src="js/____________ScriptAjaxBase.js"></script> <script type="text/javascript" src="js/____________ScriptPageBase.js"></script> <script type="text/javascript" src="js/____________ScriptMessageBox.js"></script> <script type="text/javascript" src="js/____________ScriptMain.js"></script> </head> <body> <form id="form1" runat="server"> </form> </body> </html>

客户端回调

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <mce:script type="text/javascript" src="../js/____________ScriptMessageBox.js" mce_src="js/____________ScriptMessageBox.js"></mce:script> <title></title> <mce:script type="text/jscript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Default2 : System.Web.UI.Page,ICallbackEventHandler { protected void Page_Load(object sender, EventArgs e) { //回调GetRegister方法 string CallBackFun = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetRegister", "context"); //创建ServerSum方法,在客户端调用的时候就,会回调GetRegister方法,把参数传给RaiseCallbackEvent(string eventArgument ),最后通过 //GetCallbackResult()方法把返回值传给客户端 string RegisterFun = string.Format("function ServerSum(arg,context){{{0};}}", CallBackFun); Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ServerSum", RegisterFun, true); } string mssage = string.Empty; #region ICallbackEventHandler 成员 public string GetCallbackResult() { string data = "[{id:/"001/",title:/"消息提示/",sender:/"张三：/",content:/"你好啊！/",tip:/"提示:您有(1)条新信息，请查收!/"}" //+ ",{id:/"002/",title:/"广告/",sender:/" /",content:/" /",tip:/"上海近日发生火灾，死伤惨重！/"}" + "]"; return data; } public void RaiseCallbackEvent(string eventArgument) { } #endregion }