页面优化改写时使用的一些技术

 William Chen 2010-07-21

近日，在公司的一个项目中做页面优化改写动作，使用了下面的方法：

1.  服务器端控件改为html原生控件（GridView --> table）

2.  table 操作 新增行，删除行

3.  webservice使用

4.  序列化，反序列化

5.  XDocument linq to xml

6.  window.showModalDialog 参数与传值。

 

改写后成果：

主要源码修改结果:

SparePartsMaintainNewBom.aspx.cs 源码从1761行到377行

SparePartsMaintainNewBom.aspx    源码从1165行到687行

SparePartsMaintainNewBom.js      源码从1258行到1375行

SparePartsNewBomBusiness.cs      源码从1152行到1186行

SpacePartsItemNewBom.aspx        源码从502行到673行

SpacePartsItemNewBom.aspx.cs     源码从687行到60行

总代码行数 6525行到4358          总代码行数减少了33%

 

运行后操作性能比较，

以一笔有600个子孙料号的BOM为例：

测试环境：客户端，服务器端在同1台机器，2.2G双核CPU 1.5G内存

1.  SparePartsMaintainNewBom.aspx在浏览器端生成的Html从原来的40000行下降到700行， Html源码行数减少了98%，文件大小从3MB到120KB，Html源码大小减少了96%

2.  PageLoad功能 从服务器耗时2分钟 --> 服务器6s + 客户端19s. 效率提高80%

3.  button Add(P)，Replace(R)，Add Alt(A)，Add Incomplitable(C)

  四个功能按钮从原来要传回服务器处理耗时>2分钟 --> 纯客户端操作耗时<10s 效率提高90%

4.  button check 从原来要传回服务器处理耗时>2分钟 --> 纯客户端操作耗时<10s 效率提高90%

5.  button save,send 从原来要传回服务器处理耗时>2分钟 --> 纯客户端+webservice操作耗时<20s. 效率提高80%

 

 

 

 

 

 

一、 服务器端控件改写为html标签控件

在页面中，请优先使用html控件。这样的控件不需要服务器端解释，而是直接输出，对服务器压力小。下面是一些功能相同的常见控件的改写方式。

 

1.      Label

Asp:

<asp:Label ID="lblSelectNum" runat="server">0</asp:Label>

 

HTML:

<span id="lblSelectNum">0</span>

<label id="lblSelectNum">0</label>

 

2.      TextBox

Asp:

<asp:TextBox ID="txtOrignalItemtype" runat="server"/>

 

HTML:

<input type="text" id="txtOrignalItemtype"/>

 

3.      Button

Asp:

<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick="return btnOk_ClientClick();" />

 

HTML:

<input type="button" value="OK" id="btnOk" onclick="return btnOk_ClientClick();"/>

 

4.  CheckBox

Asp:

<asp:CheckBox ID="cbRepLevel" runat="server" Text="Include RepLevel"/>

 

HTML:

<input id="cbRepLevel" type="checkbox" />

<label for="cbRepLevel">

     Include RepLevel

</label>

 

5. RadioButton

Asp:

<asp:RadioButton ID="rbSelectAll" runat="server" Text="Select All" TextAlign="Left"                             Width="90px" GroupName="cbSelect3" onclick="return CheckAllgv1(true,'cbSelect')" />

<asp:RadioButton ID="rbClearAll" runat="server" Text="Clear All" TextAlign="Left"                            Width="90px" GroupName="cbSelect3" onclick="return CheckAllgv1(false,'cbSelect')" />

 

HTML:

<span style="width: 90px;">

<label for="rbSelectAll">Select All</label>

<input id="rbSelectAll" type="radio" name="cbSelect3" value="rbSelectAll"                                   onclick="selectNumAll(true,'table1');selectNumAll(false,'table2');" />

</span>

<span style="width: 90px;">

<label for="rbClearAll">Clear All</label>

<input id="rbClearAll" type="radio" name="cbSelect3" value="rbClearAll"                                    onclick="selectNumAll(false,'table1');selectNumAll(true,'table2');" />

</span>

 

6. Panel

Asp:

<asp:Panel ID="Panel1" ScrollBars="Both" Height="400px" runat="server" Width="97%">

</asp:Panel>

 

HTML:

<div style="height: 400px; width: 97%; overflow: scroll; position: relative;">

</div>

 

7. GridView

Asp:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%"                                    EmptyDataText="No Data Found." OnRowDataBound="GridView1_RowDataBound" GridLines="None"                                    DataKeyNames="No">

……

</asp:GridView>

 

HTML:

<table class="myGV" cellspacing="0" rules="all" border="1" id="table1" style="border-width: 1px;                                border-style: Solid; width: 150%; border-collapse: collapse;">

<tr class="DGTitle">

        ……

</tr>

……

</table>

 

在使用asp控件时，如果它不需要回传给服务器，那么尽量把它的ViewState给禁掉，即设置为EnableViewState="false"。

 

二、 HTML table 操作

1.  新增行

tableObject.insertRow(index)

返回一个 TableRow，表示新插入的行对象

新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。

如果没有此参数，则新行将被附加到表的末尾。

 

应用示例：

var newTr = tableobject.insertRow();//在tableobject最后一行增加新的一行。

 

2.  删除行

tableObject.deleteRow(index)

参数 index 指定了要删除的行在表中的位置。

 

应用示例：

table2.deleteRow(i); //删除table2的rowindex = i的这一行

 

3.  新增单元格

tablerowObject.insertCell(index)

一个 TableCell 对象，表示新创建并被插入的 <td> 元素对象

新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

如果没有此参数，则新单元格将被附加到行的末尾。

 

应用示例：

newTd[0] = newTr.insertCell();

 

4.  删除单元格

tablerowObject.deleteCell(index)

参数 index 是要删除的表元在行中的位置。

该方法将删除表行中指定位置的表元。

 

5.      innerHTML

设置或返回对象的开始标签和结束标签之间的 HTML

object.innerHTML=HTML;

 

6. innerText

设置或返回该 HTML 元素的开始标签和结束标签之间的所有文本。特殊字符会被自动转换为 HTML 实体。

object.innerText = text;

 

 

 

 

应用示例：

var newTr = tableobject.insertRow();

    newTr.setAttribute("class", "GVDataTR");

    if (rowclick) {

        newTr.setAttribute("onclick", "selectrow(this)");

    }

    newTr.setAttribute("Cpprod", bomInfo.Cpprod);

 

newTd[5] = newTr.insertCell();

    if (isEdit) {

        var repl = bomInfo.Repl;

        if (repl == undefined || repl == null) {

            repl = "";

        }

        repl = repl.trim();

        var td5InnerHTML = "<select name=\"ddlRepl\" class=\"DropDownList\" style=\"width:95%;\">";

        var count = ArrayRepl.length;

        for (var i = 0; i < count; i++) {

            td5InnerHTML += "<option value=\"" + ArrayRepl[i].trim() + "\">" + ArrayRepl[i].trim() + " </option>";

        }

        td5InnerHTML += "</select>";

        newTd[5].innerHTML = td5InnerHTML;

        newTd[5].childNodes[0].value = repl;

    }

    else {

        newTd[5].innerHTML = bomInfo.Repl;

}

 

newTd[12] = newTr.insertCell();

    newTd[12].setAttribute("align", "right");

    if (isEdit) {

        newTd[12].innerHTML = "<input name=\"txtCust\" type=\"text\" maxlength=\"16\" class=\"EditTextBox\" onkeypress=\"keyNumber();\" onblur=\"return checkPrice(this);\" style=\"width:95%;" value=\"" + bomInfo.Cust + "\" /> ";

    }

   else {

        newTd[12].innerHTML = bomInfo.Cust;

}

在要求极高性能的情况下，可以用table 替代GridView，不过这回要求写一些javascript.

在某种情况下， GridView(或者table) 要求有隐藏栏位，请使用方法 elementNode.setAttribute(name,value) 和 elementNode.getAttribute(name)

三、 WebService的使用

一种是aspx页面调用后台cs文件中的public static 的WebMothod方法，另一种是调用指定位置的WebService.

第一中情况, 调用后台WebMothod方法

1. aspx文件启用Ajax. EnablePageMethods 设置为true.

<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ToolkitScriptManager1"

            AsyncPostBackTimeout="1200" EnablePageMethods="true">

        </ajaxToolkit:ToolkitScriptManager>

此处也可以使用 <asp:ScriptManager></asp:ScriptManager>

 

2. 后台cs函数。必须是public static,并且是webMethod的。

[System.Web.Services.WebMethod]

    public static string SaveData(string dataxml)

    {

        // 相关逻辑处理

        SparePartsNewBomBusiness sparePartsNewBomBusiness = new SparePartsNewBomBusiness();

        var result = sparePartsNewBomBusiness.SaveData(dataxml);

        return result;

}

 

3.      aspx文件中的javascript 调用后台方法

 

<script language="javascript" type="text/javascript">   

 

function SaveData() {  

    var sendxml = GetDataXml();

    PageMethods.SaveData(sendxml, saveDataSucceededCallback, saveDataFailedCallback);

    return false;

}

 

function saveDataSucceededCallback(serializeSavaResult) {

    //成功后的一些事后处理

}

 

function saveDataFailedCallback(failResult) {

//失败后的一些事后处理，典型应用如下：

    $get("Showmsg").innerText = " Fail. " + failResult.get_message();

}

 

</script>

 

 

 

第二中情况是异步调用指定位置的WebService 方法

var webRequest = Sys.Net.WebServiceProxy.invoke(path, methodName, useHttpGet, parameters, succeededCallback, failedCallback, userContext, timeout);

 

各参数含义如下：

path:  WebService URL。path 可设置为完全限定URL (http://www.mySite.com/myService.asmx)、没有主机名或完全限定域名 (FQDN) 的绝对 URL (/myService.asmx)，或者相对 URL (../myService.asmx)。

mothodName: 要调用的 Web 服务方法的名称。

useHttpGet: （可选）如果 Web 请求 HTTP 谓词为 POST，则为 false；否则为 true。默认值为 false。

parameters:
（可选）一个 JavaScript 字典，包含与要调用的方法的参数相对应的命名属性（字段），如下例所示：

{"param1":196610,"param2":"Hello"}

字典中的字段名必须与 Web 服务方法的名称匹配。

如果 Web 服务器方法不接受任何参数，则 parameters 可省略、可为 null，也可为空字典 ({})。这种情况下，传递的任何值都将被忽略。

如果字典包含的键/值对不对应于 Web 服务器方法的参数，则它们也将被忽略。

succeededCallback:
 （可选）在 Web 服务方法调用成功返回时，所调用的回调函数。

如果不需要 succeededCallback，并且必须为其余参数指定值，则该回调函数可设置为 null。

如果未提供任何回调函数，则在 Web 服务方法成功完成后，不会执行任何操作。

failedCallback:
（可选）在 Web 服务方法调用失败时，所调用的回调函数。
如果不需要 failedCallback，并且必须为其余参数指定值，则该回调函数可设置为 null。
如果未提供任何回调函数，则在 Web 服务方法调用期间出现错误时，不会执行任何操作。

userContext:

（可选）任何特定于用户的信息。userContext 可以为任何 JavaScript 基元类型、数组或对象。

userContext 的内容（如果有）将传给回调函数。如果未提供 userContext，则 null 将传递给回调函数。

timeout:

 （可选）在 Web 请求超时之前，网络执行器必须等待的时间（以毫秒为单位）。timeout 可以为整数或 null。通过定义超时时间间隔，可以控制应用程序必须等待回调完成的时间。

 

返回值

用于调用该方法的 WebRequest 实例。此实例可用于停止调用。

 

示例：

Sys.Net.WebServiceProxy.invoke(webServicePath,

        webMethod, false,

        {"greeting":"Have a nice day", "name":" to You (via POST)!"},

        OnSucceeded,OnFailed, "User Context",100);

 

 

 

四、序列化，反序列化

1. C# 中

每个要求可序列化的类必须加上[Serializable]属性

例如:

 

[Serializable]

    public class BqSpLine

{

   ……

}

//System.SerializableAttribute

 

 

using System.Web.Script.Serialization;

JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();

 

序列化：

将对象转换为 JSON 字符串。

string serializerListRefBomInfo = javaScriptSerializer.Serialize(listRefBomInfo);

 

反序列化：

将指定的 JSON 字符串转换为对象图。

object listRefBomInfo = javaScriptSerializer. DeserializeObject(serializerListRefBomInfo);

 

将指定的 JSON 字符串转换为 T 类型的对象。

T listRefBomInfo = javaScriptSerializer. Deserialize <T> (serializerListRefBomInfo);

 

2. Ajax javascript 中

序列化：

将 ECMAScript (JavaScript) 对象图转换为 JSON 字符串。

var result = JavaScriptSerializer.serialize(value);

参数 value 要序列化的 JavaScript 对象图

 

反序列化：

将 JSON 字符串转换为 ECMAScript (JavaScript) 对象图。

var result = JavaScriptSerializer.deserialize(value);

参数 value 要反序列化的 JSON 字符串。

 

 

 

 

 

五、 XML

C#3.0(dotnet3.5)新增了xml操作。

 

System.Xml.Linq.XDocument类

下面是他的一些常用方法介绍：

 

1. 静态Load方法。(载入xml格式字符串)

public static XDocument Load(

          TextReader textReader

)

从 TextReader 创建新的 XDocument.

例如：

TextReader tr = new StringReader("<Root>Content</Root>");

XDocument doc = XDocument.Load(tr);

 

2. 静态Load方法。(从文件创建新 XDocument)

public static XDocument Load(

          string uri

)

例如：

XDocument doc = XDocument.Load("PurchaseOrder.xml");

 

3. 属性 Root

获取此文档的 XML 树的根元素。

public XElement Root { get; }

 

4. Element 方法

获取具有指定 XName 的第一个（按文档顺序）子元素。

public XElement Element(

          XName name

)

例如：

XElement srcTree = new XElement("Root",

    new XElement("Element1", 1),

    new XElement("Element2", 2),

    new XElement("Element3", 3),

    new XElement("Element4", 4),

    new XElement("Element5", 5)

);

srcTree.Element("Element3").ToString() 的结果为 "<Element3>3</Element3>"

 

5. Elements 方法

按文档顺序返回此元素或文档的子元素集合.

public IEnumerable<XElement> Elements()

此方法使用延迟执行。

例如：

XElement xmlTree = new XElement("Root",

    new XElement("Child1", 1),

    new XElement("Child2", 2),

    new XElement("Child3", 3),

    new XElement("Child4", 4),

    new XElement("Child5", 5)

);

IEnumerable<XElement> elements =

    from el in xmlTree.Elements()

    where (int)el <= 3

    select el;

foreach (XElement el in elements)

    Console.WriteLine(el);

 

该示例产生下面的输出：

<Child1>1</Child1>

<Child2>2</Child2>

<Child3>3</Child3>

 

下面看一个综合示例。

 

Xml 字符串string p_Dataxml有下列值

<XML>

 <ISSEND>false</ISSEND>

 <SITE>QCS</SITE>

 <FACILITY>CQ</FACILITY>

 <PARTNO>9J.0QE71.72M</PARTNO>

 <MODEL>Q7101</MODEL>

 <LOGINNAME>Kidd.Huang</LOGINNAME>

 <GID>GA</GID>

 <FORMKIND>GBP</FORMKIND>

 <FORMSERIALNO>E003639</FORMSERIALNO>

 <TABLE1>

    <TR>

      <LINEID><![CDATA[1]]></LINEID>

      <CPPROD><![CDATA[9J.0QE71.72M]]></CPPROD>

      <NO><![CDATA[1]]></NO>

      <REF><![CDATA[false]]></REF>

      <SELECT><![CDATA[true]]></SELECT>

      <LEVEL><![CDATA[1]]></LEVEL>

      <ACTION><![CDATA[]]></ACTION>

      <REPL><![CDATA[ ]]></REPL>

      <PARTNO><![CDATA[5G.0QE71.72M]]></PARTNO>

      <ITEMTYPE><![CDATA[0]]></ITEMTYPE>

      <DESC><![CDATA[CASE ASSY Q7101]]></DESC>

      <REPLACE><![CDATA[]]></REPLACE>

      <FACTOR1><![CDATA[0]]></FACTOR1>

      <SPO><![CDATA[0]]></SPO>

      <CUST><![CDATA[0]]></CUST>

      <MOQ><![CDATA[1]]></MOQ>

      <REPAIR><![CDATA[]]></REPAIR>

      <REMARK><![CDATA[ ]]></REMARK>

      <LEADTIME><![CDATA[0]]></LEADTIME>

      <CRITICAL><![CDATA[ ]]></CRITICAL>

      <EFFDATE><![CDATA[20100511]]></EFFDATE>

      <DISDATE><![CDATA[20491231]]></DISDATE>

    </TR>

    <TR>

      <LINEID><![CDATA[2]]></LINEID>

      <CPPROD><![CDATA[5G.0QE71.72M]]></CPPROD>

      <NO><![CDATA[2]]></NO>

      ….

    </TR>

 </TABLE1>

 <TABLE2></TABLE2>

</XML>

 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Xml.Linq;

 

private void GetBomInfoByXml(string p_Dataxml, ref bool p_IsSend, ref string p_Site, ref string p_Facility, ref string p_Partno, ref string p_Model, ref string p_Loginname, ref string p_Gid, ref string p_Formkind, ref string p_Formserialno, ref IList<BOMInfo> p_ListBomInfo1, ref IList<BOMInfo> p_ListBomInfo2)

{

 

    TextReader textReader = new StringReader(p_Dataxml);

    XDocument xdocument = XDocument.Load(textReader);

 

    //使用查询语法获取指定的section集合

    var root = xdocument.Root;

    p_IsSend = string.IsNullOrEmpty((root.Element("ISSEND").Value ?? string.Empty).Trim())

                   false

                   : bool.Parse(root.Element("ISSEND").Value.Trim());

    p_Site = root.Element("SITE").Value;

    p_Facility = root.Element("FACILITY").Value;

    p_Partno = root.Element("PARTNO").Value;

    p_Model = root.Element("MODEL").Value;

    p_Loginname = root.Element("LOGINNAME").Value;

    p_Gid = root.Element("GID").Value;

    p_Formkind = root.Element("FORMKIND").Value;

    p_Formserialno = root.Element("FORMSERIALNO").Value;

 

    var table1 = root.Element("TABLE1");

    var table2 = root.Element("TABLE2");

 

    p_ListBomInfo1 = new List<BOMInfo>();

    p_ListBomInfo2 = new List<BOMInfo>();

 

 

    if (table1 != null && table1.HasElements)

    {

        p_ListBomInfo1 = GetBomInfoList(table1);

    }

 

    if (table2 != null && table2.HasElements)

    {

        p_ListBomInfo2 = GetBomInfoList(table2);

    }

}

 

private IList<BOMInfo> GetBomInfoList(XElement xelement)

{

    var bomInfos = xelement.Elements("TR")

        .Select(t =>

            FormatBOMInfo(

            new BOMInfo()

            {

                No = (t.Element("NO").Value ?? string.Empty).Trim() == string.Empty ? 0 : int.Parse(t.Element("NO").Value),

                Ref = (t.Element("REF").Value ?? string.Empty).Trim() == string.Empty ? false : bool.Parse(t.Element("REF").Value),

                Select = (t.Element("SELECT").Value ?? string.Empty).Trim() == string.Empty ? false : bool.Parse(t.Element("SELECT").Value),

                Level = (t.Element("LEVEL").Value ?? string.Empty).Replace(".", ""),

                Action = t.Element("ACTION").Value,

                Repl = t.Element("REPL").Value,

                Partno = t.Element("PARTNO").Value,

                Itemtype = t.Element("ITEMTYPE").Value,

                Desc = t.Element("DESC").Value,

                Replace = t.Element("REPLACE").Value,

                Factor1 = t.Element("FACTOR1").Value,

                Spo = t.Element("SPO").Value,

                Cust = t.Element("CUST").Value,

                Moq = t.Element("MOQ").Value,

                Repair = t.Element("REPAIR").Value,

                Remark = t.Element("REMARK").Value,

                Leadtime = t.Element("LEADTIME").Value,

                Critical = t.Element("CRITICAL").Value,

                Effdatefrom = t.Element("EFFDATE").Value,

                Effdateto = t.Element("DISDATE").Value,

                Cpprod = t.Element("CPPROD").Value,

                LineId = (t.Element("LINEID").Value ?? string.Empty).Trim() == string.Empty ? 0 : int.Parse(t.Element("LINEID").Value)

            })

            )

        .OrderBy(t => t.No);

 

    return bomInfos.ToList();

}

 

再看一个从文件中读取xml的示例：

Connection.xml 文件具有如下内容：

 

<?xml version="1.0" encoding="utf-8" ?>

<ConnectionConfig>

 <Items>

    <Item Name="Entities" Metadata="res://*/EntityModel.csdl|res://*/EntityModel.ssdl|res://*/EntityModel.msl" Provider="System.Data.SqlClient" ProviderConnectionString="CBC791316B24A4F25078E75496770FF635CBD4E89AF3E32C915BE0F0718381D745D2EC6B5B55F6BA3CC74B74DFA9C9CA3ACA8BC78F028436FA61F082A11B0A6D287AC209A7CE488F50CE3C8B12D335DF2B4A7380DFDFFD83001AC7EDE3E2B6D9BA0899F4569ED8B10A5CB79CCC5128C6F02453E1BAE8DD607246F7511174B27AE8DC27FCB26AE35C" ProviderName="System.Data.EntityClient"></Item>

 </Items>

</ConnectionConfig>

 

用法如下：

string XmlPath = XmlPath = HttpContext.Current.Server.MapPath(@"~/Connection.XML");

 

/// <summary>

/// 加载文件

/// </summary>

public static void LoadXML(string xmlPath, string itemName)

{

    // 加载指定的xml文件

    XDocument xml = XDocument.Load(xmlPath);

    // 使用查询语法获取指定的section集合

    var query = from p in xml.Root.Elements("Items").Elements("Item")

                where p.Attribute("Name").Value == itemName

                       select p;

 

    if( query.Count() <= 0 )

    {

        return;

    }

 

    var item = query.First();

    name = item.Attribute("Name").Value;

    metadata = item.Attribute("Metadata").Value;

    provider = item.Attribute("Provider").Value;

    providerConnectionString = item.Attribute("ProviderConnectionString").Value;

    providerName = item.Attribute("ProviderName").Value;

}

 

 

 

 

 

 

 

JavaScript解析XML的一种方法

 

xml文件Login.xml如下：

<?xml version="1.0" encoding="utf-8" ?>

<Login>

 <Character>

    <C Text="热血" Value="0"></C>

    <C Text="弱气" Value="1"></C>

    <C Text="激情" Value="2"></C>

    <C Text="冷静" Value="3"></C>

    <C Text="冷酷" Value="4"></C>

 </Character>

 <Weapon>

    <W Text="光束剑" Value="0"></W>

    <W Text="光束配刀" Value="1"></W>

 </Weapon>

 <EconomyProperty>

    <P Text="平均型" Value="0"></P>

    <P Text="重视攻击" Value="1"></P>

    <P Text="重视敏捷" Value="2"></P>

    <P Text="重视防御" Value="3"></P>

    <P Text="重视命中" Value="4"></P>

 </EconomyProperty>

</Login>

 

现在需要对这个xml文件的内容进行操作。

首先,需要加载这个xml文件,JavaScript中加载xml文件,是通过XMLDOM来进行的：

 

// 加载xml文档

loadXML = function(xmlFile) {

    var xmlDoc;

    if (window.ActiveXObject) {

        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');

        xmlDoc.async = false;

        xmlDoc.load(xmlFile);

    }

    else if (document.implementation && document.implementation.createDocument) {

        xmlDoc = document.implementation.createDocument('', '', null);

        xmlDoc.load(xmlFile);

    }

    else {

        return null;

    }

    return xmlDoc;

}

 

xml文件对象出来了, 接下去就要对这个文档进行操作了。

 

比如说,现在需要得到节点Login/Weapon/W的第一个节点的属性,那么我们可以如下进行：

// 首先对xml对象进行判断

checkXMLDocObj = function(xmlFile) {

    var xmlDoc = loadXML(xmlFile);

    if (xmlDoc == null) {

        alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');

        window.location.href = '/Index.aspx';

    }

    return xmlDoc;

}

 

// 然后开始获取需要的Login/Weapon/W的第一个节点的属性值

var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');

var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text');

 

在程序中的写法可以这样

initializeSelect = function(oid, xPath) {

    var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');

    var n;

    var l;

    var e = $(oid);

    if (e != null) {

        n = xmlDoc.getElementsByTagName(xPath)[0].childNodes;

        l = n.length;

        for (var i = 0; i < l; i++) {

            var option = document.createElement('option');

            option.value = n[i].getAttribute('Value');

            option.innerHTML = n[i].getAttribute('Text');

            e.appendChild(option);

        }

    }

}

 

上面的访问代码中,是通过xmlDoc.getElementsByTagName(xPath)来进行的。

还可以通过 xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text') 进行访问。

 

一些常用方法：

xmlDoc.documentElement.childNodes(0).nodeName,可以得到这个节点的名称；

xmlDoc.documentElement.childNodes(0).nodeValue,可以得到这个节点的值. 这个值是来自于这样子的xml格式：＜a＞b＜/b＞, 于是可以得到b这个值；

xmlDoc.documentElement.childNodes(0).hasChild,可以判断是否有子节点。

根据经验,最好是使用getElementsByTagName(xPath)的方法对节点进行访问,因为这样子可以直接通过xPath来定位节点,这样子会有更好的性能。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

六、 window.showModalDialog

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框

vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

 

参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于100px，IE4中dialogHeight 和 dialogWidth 默认的单位是em，而IE5中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

 

传入参数：
要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，

 

可以通过window.returnValue向打开对话框的窗口返回信息，也可以是对象.

 

示例如下：

 

var surl = "SpacePartsItemNewBom.aspx";

    var vArguments = new Array(type, site, facility, fnpartno, bomInfo);

    var sFeatures = "";

    if (type == "P") {

        sFeatures = "dialogHeight:260px;dialogWidth:650px;status:no;help:no;scroll:no";

    }

    else {

        sFeatures = "dialogHeight:460px;dialogWidth:650px;status:no;help:no;scroll:no";

    }

 

    //弹出新编辑窗口

    var returnValue = window.showModalDialog(surl, vArguments, sFeatures);

 

    if (returnValue == undefined || returnValue == null) {

        return false;

    }

 

    var newbomInfo = returnValue[0];

    var orignalAction = returnValue[1];

    var orignalEffdateto = returnValue[2];

 

再来看看SpacePartsItemNewBom.aspx中是如何接受参数的：

function pageLoad() {

    var vArguments = window.dialogArguments;

    ArgumentsType = vArguments[0];

    ArgumentsSite = vArguments[1];

    ArgumentsFacility = vArguments[2];

    ArgumentsFnpartno = vArguments[3];

    ArgumentsBomINfo = vArguments[4];

……

    return;

}

 

SpacePartsItemNewBom.aspx 向主窗口回传数据：

function btnOk_ClientClick() {

    if (!checkConditionBeforeOK()) {

        return false;

    }

    var bomInfo = getBomInfo();

    var orignalAction = txtOrignalAction.value;

    var orignalEffdateto = txtOrignalDisdate.value;

 

    var returnValue = new Array(bomInfo, orignalAction, orignalEffdateto);

    closeWindows(returnValue);

    return false;

}

 

function btnCancel_ClientClick() {

    closeWindows(null);

    return false;

}

 

function closeWindows(returnValue) {

    window.returnValue = returnValue;

    window.opener = null;

    window.close();

    return false;

}

 

 

标签: html, table, webservice 调用, 序列化, xml, showModalDialog