当前页面位置: » 丰搜网 » 文档中心 » 详细内容
一些奇特的 javascript 功能
在北半球这里，夏天已经过去了。孩子们回到了学校。秋天临近的迹象使小组的成员感染到了这种新入学的情绪。我们什么时候会长大呢？！我们采访了 jay，还有他的女儿，因此他们要伴随 web team talking 走进秋天。您可以期待更多的精彩内容。
除了扔湿纸团、理新发型之外，本月我们研究了 msn® messenger、一些奇特的 javascript 功能、如何更新服务器上的 xml 数据，以及多得让您看不完的短篇集。
如果您愿意学习，请将有关 web 的问题发送给我们，我们会立即对您的问题作答。instant gratification
亲爱的 web team ：
我可以将 msn instant messenger 嵌入在诸如 msn.com 这样的网站上吗？
谢谢，
joshua carroll
web team 的答复：
我们越来越需要一种比 instant gratification 更好的功能，在这一方面，msn messenger 最有说服力。http://www.msn.com 中的 im 功能是使用提供 messenger 功能的两个 microsoft activex ® 控件以及提供 dhtml 用户界面的一些脚本来实现的。为简短起见，假定我要在 intr.net 主页中添加一个小的提要栏，以便在用户登录后列出该用户的联系人（及其连接状态），并在用户未登录时提供登录按钮。下面提供了一个示例，但是为了表明我们不是得到了神（请注意小写字母“o”）的暗示才领悟到这一信息，我们先概述一下所涉及的技术。
由于没有关于这些控件的文档，因此我们需要做一些研究工作来实现我们的目标。首先，我们可以查看 msn.com 使用的代码以获得一些提示。这不是因为缺乏勇气，而是通过艰苦地研究这些代码，我们可以从大体上了解这两个控件的功能，以及我们可以怎样编写自己的代码。我们可以使用的第二个工具（并且是有用得多的工具）是 ole view。ole view 是 microsoft visual studio_ 附带的一个实用工具，它的功能很强大，可以分析并显示 com 对象的类型信息。
因此，我们启动 ole view，找到前面提到的两个控件（其友好名称分别为 msn messenger application 和 msn messenger object），右键单击这两个控件，然后选择 view type information 。该视图将显示对象使用的各个接口和枚举。标记为调度接口的任何接口都应该可用于基于脚本的调用方，因此我们开始着手编码了！
在确保控件正确实例化以后，代码需要做的第一件事情是确定用户是否联机。这是通过检查 messenger object 的 localstate 属性来完成的。该属性从 mstate 枚举（其定义已部分包含在我们的代码中）返回一个值。如果用户未联机，我们将启用调用 messenger application 的 launchlogonui 方法的登录按钮。如果用户已联机，则我们需要使用用户的所有联系人来填充 div。为此，我们循环访问默认列表 (list(0)) 中的每个联系人，并检索其 friendlyname 以及描述其当前状态的 mstate 值，然后新建一个包含此信息的 div。
由于我们要允许用户通过单击列表中的任何联系人来向该联系人发送消息，因此需要以编程方式将 onclick 事件处理程序附加到新 div。该事件处理程序函数 ( sendmessage ) 基本上是 messenger application 的 launchimui 方法的包装。由于 launchimui 将目标联系人作为一个参数，因此我们需要能够确定 messenger object 的默认列表中的哪个联系人与被单击的 div 对应。这时最理想的是使用 expando 属性。我们将联系人在默认列表中的索引附加到新建的、表示该联系人的 div 元素。这样，onclick 处理程序就能够检索到此索引，然后从 messenger object 的列表中抽取正确的联系人并将其传递给 launchimui 。
本示例包含的一项额外功能是在该页加载后处理注销和登录。这是通过处理由 messenger object 激发的 onlocalstatechangeresult 事件来完成的。此事件在 localstate 属性更改时激发（并不太意外）。因此，相应地，我们仅仅查看我们已脱机还是已联机。如果已脱机，需要清空联系人 ui 列表；如果已联机，需要在短暂的 settimeout（确保一切都正确同步）之后调用 populatecontacts 。而且由于 activex 控件依赖于独立 messenger 的运行实例，因此我们的页面还将更新以响应它触发的事件。
至此，您可能已对我们的喋喋不休感到厌烦，那么，请看下面的代码。
＜html＞
＜head＞
＜title＞embedding msn messenger test＜/title＞
＜object classid="clsid:f3a614dc-abe0-11d2-a441-00c04f795683"
codebase="#version=2,0,0,83"
codetype="application/x-oleobject" id="omsgrobj" width="0"
height="0" onuserstatechanged="alert();"＞
＜/object＞
＜object classid="clsid:fb7199ab-79bf-11d2-8d94-0000f875c541"
codetype="application/x-oleobject"
id="omsgrapp" width="0" height="0"＞
＜/object＞
＜style＞
body
{
font-family: verdana, arial, helvetica;
font-size: 8pt;
}
input
{
font-family: verdana, arial, helvetica;
font-size: 8pt;
}
.clsheading
{
font-weight: bolder;
font-size: 10pt;
}
.clscontact
{
padding: 2px;
cursor: hand;
}
＜/style＞
＜/head＞
＜body onload="body_onload();"＞
＜script language="jscript"＞
// here are the definitions for the messenger enumerated values we use
var mstate_offline = 1;
var mstate_online = 2;
var mstate_busy = 10;
var mstate_be_right_back = 14;
var mstate_idle = 18;
var mstate_away = 34;
function body_onload()
{
// first, we need to make sure that the messenger controls got instantiated correctly
if ("undefined" != typeof(omsgrobj) && null != omsgrobj.object && "undefined"
!= typeof(omsgrapp) && null != omsgrapp.object)
{
// if so, let's check to see if we're online and (if so) populate our contacts ui
if (omsgrobj.localstate == mstate_online)
{
populatecontacts();
}
else if (omsgrobj.localstate == mstate_offline)
{
btnlogon.disabled = false;
}
}
else
{
// uh, oh - the controls didn't get instantiated correctly;
// the user probably needs to install messenger
alert("you need to install the latest version of msn messenger!
\ngo to http://messenger.msn.com right now!");
}
}
function populatecontacts()
{
var olist = omsgrobj.list(0);
var ocontact;
var i;
// to populate our contact list, we're going to iterate throught the
// default list collection, check the state of each contact,
// and add a div with the approppriate appearance to our ui
for (i = 0; i ＜ olist.count; i++)
{
ocontact = olist.item(i);
onewelement = document.createelement("div");
onewelement.innertext = ocontact.friendlyname;
switch (ocontact.state)
{
case mstate_online:
// don't need to do anything
break;
case mstate_offline:
onewelement.innertext += " (offline)";
onewelement.style.color = "graytext";
break;
case mstate_busy:
onewelement.innertext += " (busy)";
break;
case mstate_be_right_back:
onewelement.innertext += " (be right back)";
break;
case mstate_idle:
onewelement.innertext += " (idle)";
break;
case mstate_away:
onewelement.innertext += " (away)";
break;
default:
onewelement.innertext += "(just plain not around!)";
onewelement.style.color = "graytext";
break;
}
onewelement.classname = "clscontact";
// to enable us to respond to the onclick event,
// we're programmatically setting the event
// handler and we're defining an expando property
// on the contact div whose value is set to
// the index of the contact in the default list (so we can find them later)
onewelement.onclick = sendmessage;
onewelement.setattribute("contactid", i.tostring());
divcontacts.appendchild(onewelement);
}
}
function dologon()
{
// to logon, we just ask messenger to display its logon ui
if (omsgrobj.localstate == mstate_offline)
{
btnlogon.disabled = true;
omsgrapp.launchlogonui();
}
}
function sendmessage()
{
// to send a message, we likewise just ask messenger to do the heavy
// lifting (we just have to
// pass it a contact from the default list)
var ncontactid = parseint(window.event.srcelement.getattribute("contactid"));
if (!isnan(ncontactid))
{
var ocontact = omsgrobj.list(0).item(ncontactid);
omsgrapp.launchimui(ocontact);
}
}
＜/script＞
＜script language="jscript" event="onlocalstatechangeresult(hr)" for="omsgrobj"＞
if (hr == 0)
{
if (omsgrobj.localstate == mstate_online)
{
// now we're online
window.settimeout("populatecontacts();", 3000);
}
else if (omsgrobj.localstate == mstate_offline)
{
// now we're offline
divcontacts.innerhtml = "";
btnlogon.disabled = false;
} }
＜/script＞
＜div class="clsheading"＞contacts (click on a contact to send a message!)＜/div＞
＜div id="divcontacts" style="margin-top: 8px;
margin-bottom: 8px; border: 1px solid steelblue"＞＜/div＞
＜input type="button" id="btnlogon" value="logon" onclick="dologon();" disabled="yes"＞
＜/body＞
＜/html＞ 将 xml 发送回服务器
