本文由中国C#技术学习中心整理 如果你对本文有不明之处请到技术论坛讨论!
本文来源 http://www.smartkernel.com
-----------------------------------------
0001：
Ajax的几个缺点：
●不被搜索引擎支持。
●不支持浏览器的后退功能。因为使用Ajax局部刷新后，浏览器中的网页地址根本没有改变。
●调试复杂。
●不支持职能客户端。
--------------------------------------
0002：
Iframe是一种嵌入网页的框架形式，Web页面可以通过更改嵌入的部分，达到部分内容刷新，而其他内容不变的
效果。
------------------------------------
0003：
Iframe的常用属性：
●FrameBorder：是否显示框架的边框。
●MarginHeight：设置框架内容的上下相对高度。
●MarginWidth：设置框架内容的左右相对宽度。
●Src：设置框架要加载的页面地址。
●Scrolling：设置框架是否允许被滚动。
---------------------------------
0004：
使用Iframe实现局部刷新：
●Default主页面：
<script type="text/javascript">
function seekCity()
{
var city = document.getElementById("City").value;
if(city != "")
{
document.getElementById("MyIframe").src="MyIframe.aspx?City="+city;
}
}
</script>
<input id="Button1" type="button" value="button" onclick="seekCity();" /><input id="City" type="text" />
<br />
<iframe src="MyIframe.aspx" style="text-align:center; width: 208px; height: 190px;" id="MyIframe" />
●MyIframe页面：
protected void Page_Load(object sender, EventArgs e)
{
string city = this.Request.QueryString["City"];
switch (city)
{
case "北京":
this.Response.Write("-----------------");
break;
case "上海":
this.Response.Write("=================");
break;
}
}
------------------------------------
0005：
使用.NET2.0+JavaScript脚本实现局部刷新：
●HTML部分：
<script type="text/javascript">
function fillData(cityList)
{
var ddlCityList = document.getElementById("ddlCityList");
while(ddlCityList.length > 0)
{
ddlCityList.remove(0);
}
var indexOfCity;
var city;
while(cityList.length > 0)
{
indexOfCity = cityList.indexOf(",");
if(indexOfCity > 0)
{
city = cityList.substring(0,indexOfCity);
cityList = cityList.substring(indexOfCity + 1);
ddlCityList.add(new Option(city,city));
}
else
{
//最后一个城市
ddlCityList.add(new Option(cityList,cityList));
break;
}
}
}
</script>
<input id="Button1" type="button" value="button" onclick="seekCity()"/>
<input id="City" type="text" />
<select id="ddlCityList"></select>
●代码部分：
protected void Page_Load(object sender, EventArgs e)
{
string script = @"
function seekCity()
{
var city = document.getElementById('City').value;
switch(city)
{
case '北京':
fillData('" + GetCityList("北京") + @"');
break;
case '上海':
fillData('" + GetCityList("上海") + @"');
break;
}
}
";
this.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", script, true);
}
private string GetCityList(string city)
{
switch (city)
{
case "北京":
return "海淀,朝阳,丰台";
case "上海":
return "黄埔,浦东";
}
return "";
}
------------------------------
0006：
使用CallBack实现页面无刷新：
●HTML部分：
<script type="text/javascript">
function seekCity()
{
var city = document.getElementById("City").value;
<%=ClientScript.GetCallbackEventReference(this,"city","fillData",null)%>
}
function fillData(cityList)
{
var ddlCityList = document.getElementById("ddlCityList");
while(ddlCityList.length > 0)
{
ddlCityList.remove(0);
}
var indexOfCity;
var city;
while(cityList.length > 0)
{
indexOfCity = cityList.indexOf(",");
if(indexOfCity > 0)
{
city = cityList.substring(0,indexOfCity);
cityList = cityList.substring(indexOfCity + 1);
ddlCityList.add(new Option(city,city));
}
else
{
//最后一个城市
ddlCityList.add(new Option(cityList,cityList));
break;
}
}
}
</script>
<input id="Button1" type="button" value="button" onclick="seekCity()"/>
<input id="City" type="text" />
<select id="ddlCityList"></select>
●代码部分：
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
{
string cityList = "";
protected void Page_Load(object sender, EventArgs e)
{
}
public string GetCallbackResult()
{
return cityList;
}
public void RaiseCallbackEvent(string eventArgument)
{
switch (eventArgument)
{
case "北京":
cityList = "海淀,丰台,密云,朝阳";
break;
case "广州":
cityList = "天河,越秀,荔湾";
break;
}
}
}
------------------------------
0007：
使用Ajax实现无刷新：
●Default页面部分：
<script type="text/javascript">
var xmlHttp;
function seekCity()
{
var city = document.getElementById("City").value;
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange = function ()
{
//请求完成
if(xmlHttp.readystate == 4)
{
//请求成功
if(xmlHttp.status == 200)
{
fillData(xmlHttp.responseText);
}
}
}
xmlHttp.Open("POST","CityHandler.aspx?City="+city,true);
xmlHttp.Send();
}
function fillData(cityList)
{
var ddlCityList = document.getElementById("ddlCityList");
while(ddlCityList.length > 0)
{
ddlCityList.remove(0);
}
var indexOfCity;
var city;
while(cityList.length > 0)
{
indexOfCity = cityList.indexOf(",");
if(indexOfCity > 0)
{
city = cityList.substring(0,indexOfCity);
cityList = cityList.substring(indexOfCity + 1);
ddlCityList.add(new Option(city,city));
}
else
{
var index = cityList.indexOf("<");
cityList = cityList.substring(0,index);
//最后一个城市
ddlCityList.add(new Option(cityList,cityList));
break;
}
}
}
</script>
<input id="Button1" type="button" value="button" onclick="seekCity()"/>
<input id="City" type="text" />
<select id="ddlCityList"></select>
●CityHandler页面部分：
protected void Page_Load(object sender, EventArgs e)
{
string city = this.Request.QueryString["City"];//必须传递英文参数，中文识别不了
this.Response.Clear();
switch (city)
{
case "beijing":
this.Response.Write("海淀,丰台,大兴");
break;
case "shanghai":
this.Response.Write("黄埔,浦东");
break;
}
}
----------------------------------
0008：
以上几种刷新技术比较：如果数据量大，最慢的是Iframe技术，因为属于服务器端技术，会不断与服务器交互。
速度最快的是纯JavaScript脚本技术，只在第一次加载的时候初始化所有数据，然后就不再需要与服务器进行交互。
不过，过多的使用脚本，使瘦客户端变胖。综合比较不错的是Ajax技术。CallBack机制一般用于控件的开发。
------------------------------------
0009：
CSS样式中的一些属性：
●text-decoration：字的特殊修饰，如下划线设置
●background-position：背景图像的位置
●text-align：文本对齐方式（水平）
●vertical-align：文本对齐方式（垂直）
●letter-spacing：文本字母间的间距
●line-height：文本的行间距
●text-indent：文本流的缩进设置
●overflow：文本溢出时滚动条的设置
------------------------------------
0010：
CSS Compressor是国外的一款压缩优化工具，可以压缩CSS，使之提高载入速度。
-------------------------------------
0011：
可以获取网站CSS样式的工具：www.sitevista.com（收费软件）
--------------------------------------
0012：
CSS中几种滤镜：
●Alpha：设置透明度
●Blur：图像的迷糊处理
●Chroma：指定某一颜色为透明色
●DropShadow：添加对象的阴影效果
●Flip：Fliph代表水平翻转，Flipv代表垂直翻转
●Glow：字体边缘发光效果
●Invert：翻转所有可视化属性
●Light：光源从不同方向的透射效果
●Mask：为对象创建覆盖在表层的膜
●Xray：图片的X光效果
---------------------------------------
0013：
从解决方案中拖拽CSS文件到页面中，就会自动添加CSS文件的引用。
---------------------------------------
0014：
window对象的属性：
●Closed：判断窗口是否关闭
●Parent：窗口的父对象，一般用于框架中
●Frames[]：表示窗口内的框架数据
●Self：对自身的引用
---------------------------------------
0015：
window对象的方法：
●Close：执行关闭窗口的命令
●ClearTimeout：取消窗口设置的定时器
●Focus：获取窗口的键盘焦点
●Blur：失去窗口的键盘焦点
●MoveBy：移动打开的窗口
●MoveTo：移动打开的窗口
●ResizeBy：调整窗口大小
●ResizeTo：调整窗口大小
--------------------------------------
0016：
JavaScript常用的事件：
●OnBlur：控件失去焦点时触发的事件
●OnFocus：控件获得焦点时触发的事件
●OnClick：单击控件时触发的事件
●OnDblClick：双击控件时触发的事件
●OnMouseUp：鼠标按键抬起时触发的事件
●OnMouseOver：鼠标移动经过此控件时触发的事件
●OnKeyPress：当按下键盘某键时触发的事件
●OnLoad：当加载此控件时触发的事件
----------------------------------------
0017：
TDD：Test-Driven Development，测试驱动的开发。测试－>开发－>再测试。
-----------------------------------------
0018：
如果想让编译器在某行代码处挂起，可以设置“debugger;”，这样可以查看变量的值。
-----------------------------------------
0019：
一个可以获取天气信息的地址：http://php.weather.sina.com.cn/search.php?city=北京
-----------------------------------------
0020：
DOM必须有一个根节点。
----------------------------------------
0021：
HTML元素并不是实际DOM中的根节点，document才是根节点，HTML节点是document的子节点。
---------------------------------------
0022：
DOM中元素的属性：
●ChildNodes：返回当前元素的所有子节点。form的ChildNodes是div1和div2。
●FirstChild：返回当前元素的首子节点。form的FirstChild是div1。
●LastChild：返回当前预算努的最后一个子节点。form的LastChild是div2。
●ParentNode：返回当前元素的父元素。form的ParentNode是body。
●NextSibling：返回与当前元素平级的下一个元素。div1的NextSibling是div2。
●PreviousSibling：返回与当前元素平级的上一个元素。div2的PreviousSibling是div1。
●NodeValue：返回当前元素内的文本值。div1.firstChild.NodeValue是“世界你好”。文本也是一个子元素。
所以先取firstChild。
<html>
<head>
<title>
</title>
</head>
<body>
<form>
<div id="div1">世界你好</div>
<div id="div2"></div>
</form>
</body>
</html>
-----------------------------------------
0023：
获取元素的属性：例如获取div的width。
<div id="div1" style="color:Black; width:100px;">世界你好</div>
div1.getAttribute("style")["width"]
----------------------------------------------
0024：
DOM的常用方法：没有带参数，事实上都有参数
●document.createElement()：在页面中创建一个元素。
●document.createTextNode()：在页面的元素中创建文本。
●appendChild()：添加一个节点到当前元素内。
●setAttribute()：指定当前元素的属性值。
●insertBefore()：在指定元素前插入新节点。
●removeChild()：删除指定的节点。
●removeAttribute()：删除当前节点的指定属性。
●cloneNode()：复制节点。
●replaceChild()：将旧节点替换为新节点。
除了前两个为document调用外，其余的都可以由任意元素调用。
●HTML：下面的例子都这个HTML为操作对象
<form id="form1" runat="server">
<div id="div1">世界你好</div>
<div id="div2">www.smartkernel.com</div>
</form>
●createElement，createTextNode，appendChild的例子：
var form1 = document.getElementById("form1");
var newDiv = document.createElement("div");
var newText = document.createTextNode("www.smartkernel.com");//文本也是个元素
newDiv.appendChild(newText);
form1.appendChild(newDiv);
●removeChild的例子：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.replaceChild(div2.firstChild,div1.firstChild);//div1的文本替换为div2的，但是div2的文本就被删除了
●cloneNode的例子：
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var newDiv = div2.firstChild.cloneNode(true);//将div2的文本克隆一份。
div1.appendChild(newDiv);
●removeChild的例子：
var div1 = document.getElementById("div1");
div1.removeChild(div1.firstChild);//清除div1中的文本。
-------------------------------------
0025：
动态创建表格：
var tbl = document.createElement("table");
tbl.setAttribute("border","1px");
var tr1 = tbl.insertRow();//创建行
var td1 = tr1.insertCell();//创建列
td1.innerText = "姓名";
var td2 = tr1.insertCell();//创建列
td2.innerText = "性别";
for(var i = 0;i < 10 ; i++)
{
var tempTr = tbl.insertRow();//创建行
var tempTd1 = tempTr.insertCell();//创建列
tempTd1.innerText = "姓名"+i;
var tempTd2 = tempTr.insertCell();//创建列
tempTd2.innerText = "性别"+i;
}
var form1 = document.getElementById("form1");
form1.appendChild(tbl);
-------------------------------------
0026：
RSS（Really Simple Syndication）：是一种描述和同步网站内容的XML格式。RSS的中文可以有多个解释，如
简单同步技术，RDF站点摘要等。通常被用于新闻和其他按时间先后顺序排列的网站。
--------------------------------------
0027：
中文参数的问题：escape方法包装
var xmlHttp = null;
function GetData()
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readystate == 4 && xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
//中文参数必须用escape方法包装，否则服务器端获得不了这个参数
xmlHttp.open("POSE","Default.aspx?City="+escape("中国"),true);
xmlHttp.send(null);
}
---------------------------------------
0028：
CTP的全称是Community Technology Preview，表示还未被核心组件完全支持的一些特性，在运行稳定后，有可
能添加到新版本中。
--------------------------------------
0029：
Microsoft Ajax Library是Microsoft提供的一些类库文件。主要分为以下几个命名空间：
●Sys：
○Application类：提供支持客户端开发的一些方法和属性
○Component类：提供控件和行为的基础
○CultureInfo类：本地化信息的管理类
○Debug类：提供客户端代码的调试和跟踪所需要的方法和属性
○IContainer接口：组件包装器通用接口
○IDisposable接口：手动释放资源的通用接口
○INotifyDisposing接口：定义Disposing事件
○INotifyPropertyChange接口：定义PropertyChanged事件
○StringBuilder：提供一个连接字符串的优化机制
var aStringBuilder = new Sys.StringBuilder();
aStringBuilder.append("世界");
aStringBuilder.append("你好");
alert(aStringBuilder.toString());
○Exception类：定义异常的类型
●Sys.Net：
○WebServiceProxy类：通过此类实现异步访问Web服务的方法
○WebRequest类：提供一个脚本API去创建Web请求
○WebRequestExecutor类：提供网络执行的抽象类，不能实例化
○WebRequestManager类：管理网络请求和执行的类
○XMLHttpExecutor类：通过客户端的XMLHttp提交异步请求
●Sys.Serialization：主要包含一些序列化的类
●Sys.Services：包含一些服务
●Sys.WebForms：主要包含一些处理局部刷新的类
●Sys.UI：
○Behavior：为所有Ajax的行为提供基类
○Bounds：创建一个指定坐标和宽度的Object对象
○Control：Ajax控件的基类
○DomElement：定义了一些访问DOM元素的静态方法
○Key：键盘上按键的枚举
○MouseButton：鼠标上按键的枚举
○Point：创建一个指定坐标的对象
○VisibilityMode：描述当一个元素设置为Visible时在页面上的布局
●全局对象：全局静态方法都以$开头。
○$addHandler方法：为指定元素添加事件
○$addHandlers方法：为指定的元素添加一组事件
○$clearHandlers方法：删除指定元素的所有事件
○$create方法：创建组件类对象
○$find方法：通过ID搜索对象
var form1 = $get("form1");
var Button2 = $find("Button2",form1);
○$get方法：获取指定ID的对象，类似于getElementById
var form1 = $get("form1");
○$removeHandler方法：删除指定元素的指定事件
-------------------------------------
0030：
保持微笑。
-------------------------------------
0031：
写一个专门的MicrosoftAjax技术文档。
--------------------------------------
0032：
ScriptManagerProxy：一个页面中只能添加一个ScriptManager控件，页面中可以嵌套任意类型的控件，如用户
控件、母板页和内容页等，在用户控件中，如果调用内容控件的页已经存在一个ScriptManager控件，而用户控件又
需要使用它注册一些Ajax控件，那么需要使用ScriptManagerProxy控件，它起到代理控制器的作用。也就是说用户
控件中使用ScriptManagerProxy，而调用的内容页使用ScriptManager。
-------------------------------------
0033：
ScriptManager的属性：
●EnablePartiaRendering：用来标识此页内是否允许局部刷新。
●AllowCustomErrorsRedirect：表示当Ajax调用发生错误后，是否导航到Web.config中定义的错误配置。如果
设置为false，则可以使用下面的两个属性实现错误提示。
●AsyncPostBackErrorMessage：异步调用发生错误时的提示信息。
●OnAsyncPostBackError：异步调用发生错误时的事件（服务器端的事件）。
●AsyncPostBackTimeOut：表示异步调用的有效时间，默认是90秒。
●AuthenticationService：用来表示提供验证服务的路径。
●ProfileService：表示提供个性化服务的路径。
●Scripts：对脚本的调用。
●Services：对服务的调用。
-------------------------------------
0034：
调用Web服务的例子：
●HTML部分：
<script type="text/javascript">
function GetTime()
{
//注意，这里必须有命名空间，是全路径
AJAXCTPEnabledWebApplication1.WebService1.GetTime(GetTime_Handler);
}
function GetTime_Handler(result)
{
alert(result);
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="WebService1.asmx" />
</Services>
</asp:ScriptManager>
<input id="Button1" type="button" value="button" onclick="GetTime()"/>
●Web服务：
namespace AJAXCTPEnabledWebApplication1
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string GetTime()
{
return DateTime.Now.ToLongTimeString();
}
}
}
----------------------------------------
0035：
ScriptManager是服务器控件，所以所有属性都可以在服务器端通过代码设置。
----------------------------------------
0036：
按钮不放在UpdatePanel中，但是也需要引起UpdatePanel的局部刷新：
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
--------------------------------------
0037：
直接在页面绑定属性：<%=DateTime.Now.ToString() %>
-----------------------------------------
0038：
需要UpdatePanel中的按钮引起全部刷新时，可以使用PostBackTrigger触发器。
-----------------------------------------
0039：
直接绑定的页面属性，不能维护状态，所以页面属性赋值的代码不能放在IsPostBack==false的代码段中。必须
每次加载页面时都给绑定的页面属性赋值。
<%=Some %>
public string Some;
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false)
{
this.Some = DateTime.Now.ToLongTimeString();//页面提交刷新之后将不会再显示
}
this.Some = DateTime.Now.ToLongTimeString();//只有这样赋值才可以
}
----------------------------------------
0040：
一个页面只能有一个Timer控件的实例。
---------------------------------------
0041：
服务器控件隐藏的控制方法：
this.lblMsg.Visible = false;//服务器控件将不会创建
this.lblMsg.Style.Add("visibility","hidden");//会创建服务器控件，但是是隐藏的
----------------------------------------
0042：
系统时间错误会影响Atlas的使用。
--------------------------------------
0043：
限制输入类型的扩展控件：遗憾的是，不支持正则表达式
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:FilteredTextBoxExtender
ID="FilteredTextBoxExtender1"
runat="server"
TargetControlID="TextBox1"
ValidChars="1234567890">
</cc1:FilteredTextBoxExtender>
----------------------------------
0044：
限制输入类型的扩展控件：支持类似于正则表达式的通配符
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:MaskedEditExtender
ID="MaskedEditExtender1"
runat="server"
TargetControlID="TextBox1"
MaskType="Number"
Mask="99999.99">
</cc1:MaskedEditExtender>
-------------------------------------
0045：
验证控件的扩展：能弹出一个小提示信息框
<asp:TextBox
ID="TextBox1"
runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="TextBox1"
ErrorMessage="不能为空">
</asp:RequiredFieldValidator>
<cc1:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1"
runat="server"
TargetControlID="RequiredFieldValidator1"
Width="200px"
WarningIconImageUrl="警告信息的图片"
CloseImageUrl="关闭按钮的图片"
HighlightCssClass="样式">
</cc1:ValidatorCalloutExtender>
------------------------------------
0046：
弹出的日期选择控件：PopupControlExtender可以弹出任何控件
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<cc1:PopupControlExtender
ID="PopupControlExtender1"
runat="server"
TargetControlID="TextBox1"
Position="Right"
PopupControlID="Calendar1">
</cc1:PopupControlExtender>
-------------------------------------
0047：
动画效果：鼠标移入Panel和移出的显示效果
<asp:Panel
ID="Panel1"
runat="server"
Height="150px"
Width="150px" BackColor="#FFFFCC">
</asp:Panel>
<cc1:AnimationExtender
ID="AnimationExtender1"
runat="server"
TargetControlID="Panel1">
<Animations>
<OnMouseOver>
<Color Duration="0.2" PropertyKey="backgroundColor" StartValue="#FFFFFF" EndValue="#FF0000"/>
</OnMouseOver>
<OnMouseOut>
<Color Duration="0.2" PropertyKey="backgroundColor" StartValue="#FF0000" EndValue="#FFFFFF"/>
</OnMouseOut>
</Animations>
</cc1:AnimationExtender>
------------------------------
0048：
日期控件的扩展：遗憾的是不支持中文
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender
ID="CalendarExtender1"
runat="server"
TargetControlID="TextBox1"
Format="yyyy-MM-dd">
</cc1:CalendarExtender>
------------------------------------
0049：
yyyy-MM-dd：MM必须大写，其他两个小写。
--------------------------------------
本文由中国C#技术学习中心整理 如果你对本文有不明之处请到技术论坛讨论!
