`

《征服ASP.NET2.0AJAX》一书的读后总结(1-7章) 收藏

 
阅读更多



AJAX(Asynchronous JavaScript And XML 异步JavaScript和XML技术)
<!--[if !supportLists]-->第一章<!--[endif]--> 揭开AJAX的面纱
<!--[if !supportLists]-->1. <!--[endif]-->AJAX技术的应用范畴

(1)局部刷新(使用javascript使DOM对象搜索并更改表单中的元素)

(2)获取其他网页的内容。当本网页的内容基于其他网站(天气预报),填充在网页内;

(3)需要异步读取的地方(借助浏览器中提供的组件,来返回三种类型的局部数据,在创建异步调用对象时,要考虑到不同浏览器调用的组件不同。在IE中,异步调用使用的是XMLHttp组件中的XMLHttpRequest对象。

Var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE

在Firefox浏览器中则直接使用XMLHttpRequest组件。

Var xmlhttp=new XmlHttpRequest(); //Firefox

原理:通过AJAX技术把网络上(或服务器上)的数据全部下载到客户端的内存中,然后使用JavaScript语言根据实际需要整合这些资源,并用CSS和Dom实现页面的布局)。如Google Maps;

<!--[if !supportLists]-->2. <!--[endif]-->AJAX的缺陷

<!--[if !supportLists]-->(1) <!--[endif]-->不被搜索引擎支持。

<!--[if !supportLists]-->(2) <!--[endif]-->不支持浏览器的后退功能。因为使用AJAX局部刷新后,浏览器中的网页地址根本没有改变;

<!--[if !supportLists]-->(3) <!--[endif]-->纯粹的JavaScript。JavaScript客户端,编写简单但调试困难。对于浏览器的兼容不太好;

<!--[if !supportLists]-->(4) <!--[endif]-->不支持智能终端设备。如PDA和智能手机等软件程序;

<!--[if !supportLists]-->3. <!--[endif]-->AJAX 组成要素

 

javascrpt语言

AJAX的业务逻辑

Dom文档对象或XMLDOM文档对象

CSS样式表

AJAX的外观样式

XMLHttpRequest数据交互对象

AJAX数据交互

AJAX的数据表现形式

<!--[if !vml]--><!--[endif]-->

 

<!--[if !supportLists]-->4. <!--[endif]-->AJAX异步技术的实现步骤

第一步:创建异步对象

<script type="text/javascript">

var xmlhttp;

function createHTTP()

{

//根据不同的浏览器创建XMLHttpRequest

if(window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();

}

}

//开始调用

function startHTTP()

{

//创建对象

createHTTP();

//状态变化与事件挂钩

xmlhttp.onreadystatechange=StateDO;

//获取XML文件的数据

xmlhttp.open("GET","XMLFile.xml",true);

//GET:表示Http的请求方法,一共有五种:get,post,head,put,delete;

//地址:表示数据的地址。如果是本地文件,则指定具体路径;如果位于指定网站,则为网站的完全URL地址;

//True:表示是否异步获取

//不带任何参数

//可以对服务器端的内容设置参数有选择的挑选数据。

xmlhttp.send(null);

 

}

function StateDO()

{

//判断是否是完成状态

if(xmlhttp.readystate==4)

{

//判断是否执行成功

if(xmlhttp.status==200)

{

//更新页面上的某元素,最终获得的数据主要有两种形式:文本型(xmlhttp.responsetext)和XML类型(xmlhttp.responseXML)。

document.getElementById("mytext").innerHTML=xmlhttp.responsetext;

}

}

}

</script>

</head>

<body>

<div style="DIRECTION: ltr; LETTER-SPACING: normal; POSITION: static; BACKGROUND-COLOR: #cc99ff; TEXT-ALIGN: center" id="mytext">这是旧数据</div>

<input type="button" value="更新DIV" onclick="startHTTP()" />

</body>

</html>

<!--[if !supportLists]-->5. <!--[endif]-->

<!--[if !supportLists]-->6. <!--[endif]-->

<!--[if !supportLists]-->第二章<!--[endif]--> Ajax 技术与传统技术的比较
<!--[if !supportLists]-->1. <!--[endif]-->使用Iframe框架技术实现无刷新

Iframe成为浮动的框架(D:/学习总结/Javascript&Ajax/AJAX/征服ASP.NET2.0AJAX/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件1-15/C01/AsyncAjax)。

<!--[if !supportLists]-->2. <!--[endif]-->使用JavaScript技术实现无刷新

D:/学习总结/Javascript&Ajax/AJAX/征服ASP.NET2.0AJAX/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件1-15/C02/JsRefresh

3、

.net2.0 提供的CallBack回调技术(原理:从客户端接受一个参数,然后在服务器端获取这个参数,并执行一个实现所需功能的事件,最后返回客户端需要的结果数据。然后在调用客户端程序处理服务器端返回的结果。如果控件具备回调功能,则控件必须继承接口ICallbackEventHandler),如果要获取服务器端返回的结果,就必须调用方法GetCallbackEventReference。;

<% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>;

GetCallbackEventReference(Control control,string argument,string clientCallback,string context)

Control:表示处理客户端回调的服务器的控件。该控件必须实现ICallbackEventHandler接口

Argument:从客户端传递给服务器端的一个参数。应用在RaiseCallbackEvent方法中;

clientCallback: 一个客户端程序,接收成功的服务器端事件的返回结果;

context:启用回调之前在客户端计算的客户端脚本,脚本的结果传回客户端事件处理程序;

D:/学习总结/Javascript&Ajax/AJAX/征服ASP.NET2.0AJAX/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件1-15/C02/CallbackRefresh

// 摘要:

// 用于指示控件可以作为服务器的回调事件的目标。

public interface ICallbackEventHandler

{

// 摘要:

// 返回以控件为目标的回调事件的结果。

// 返回结果:

// 回调的结果。

string GetCallbackResult();

//

// 摘要:

// 处理以控件为目标的回调事件。

// 参数:

// eventArgument:

// 一个字符串,表示要传递到事件处理程序的事件参数。

void RaiseCallbackEvent(string eventArgument);

}

 

4、使用AJAX技术实现局部刷新

<head runat="server">

<title>无标题页</title>

<script type="text/javascript">

var xmlhttp;

function getData()

{

//获取用户填写的名称

var city=document.getElementById("txt").value;

//创建异步调用对象

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

//将对象状态与事件相关联

xmlhttp.onreadystatechange=statechange;

//加载要链接的页面

xmlhttp.Open("POST","datapage.aspx?city=" +city,true);

//发送请求

xmlhttp.Send();

}

function statechange()

{

//判断异步调用是否已经完成

if(xmlhttp.readystate==4)

{

//判断完成的提示代码是否是OK状态

if(xmlhttp.status==200)

{

//将返回数据作为参数,传递给填充方法

FillData(xmlhttp.responseText);

}

}

}

function FillData(strcity)

{

document.getElementById("DropDownList1").options.length=0;

var indexofcity;

var city;

//切割传递来的字符串

while(strcity.length>0)

{

//判断是否是最后一个字符串

indexofcity=strcity.indexOf(",");

if(indexofcity >0)

{

city=strcity.substring(0,indexofcity);

strcity=strcity.substring(indexofcity+1);

//填充下拉框

document.getElementById("DropDownList1").add(new Option(city,city));

}

else

{

// 如果是最后一个字符串

lastcity=strcity.substring(0,2);

document.getElementById("DropDownList1").add(new Option(lastcity,lastcity));

break;

}

};

}

</script>

</head>

<body>

<form id="form1" runat="server" method="post">

<div>

<table style="width: 463px; height: 152px">

<tr>

<td colspan="2" style="font-weight: bold; color: #0000ff; text-align: center">

Ajax实现局部刷新</td>

</tr>

<tr>

<td style="width: 265px">

填写城市名称</td>

<td>

<!--<asp:TextBox ID="TextBox1" runat="server" Width="252px"></asp:TextBox>-->

<input type="text" id="txt" style="width: 245px"/>

</td>

</tr>

<tr>

<td style="width: 265px">

</td>

<td>

<input id="Button1" style="width: 147px" type="button" value="查询" onclick="getData()" /></td>

</tr>

<tr>

<td style="width: 265px">

选择区域列表</td>

<td>

<asp:DropDownList ID="DropDownList1" runat="server" Width="255px">

</asp:DropDownList></td>

</tr>

</table>

 

</div>

</form>

</body>

D:/学习总结/Javascript&Ajax/AJAX/征服ASP.NET2.0AJAX/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件1-15/C02/AjaxRefresh

总结:如果数据量大,最慢的是IFrame技术,因为属于完全的服务器端技术,会与服务器进行交互。速度最快的应该是JavaScript脚本技术,因为全为客户端技术。但大量使用客户端为胖客户端,不宜调试。.net2.0提供的CallBack技术通常用在自定义的控件内,功能比较完善的为AJAX技术,提供异步对象XMLHttpRequest,可以实现至加载部分数据,而且可以有条件地选择数据,这些条件可以通过XMLDOM实现,也可以使用正则表达式实现;

 

<!--[if !supportLists]-->第三章<!--[endif]--> AJAX目前的应用趋势
<!--[if !supportLists]-->1. <!--[endif]-->Ajax异步调用返回的数据类型

在使用Ajax的异步处理对象XMLHttpRequest时,通常有两种返回形式:ResponseText和ReponseXML

ResponseText:一般返回的是字符串类型,可以是一个页面也可能一句话。

ResponseXML:一般返回的是标准XML类型的数据,注意返回的格式一定是标准XML格式,否则在读取数据时出错。

<!--[if !supportLists]-->2. <!--[endif]-->Ajax 不需要在IE浏览器中注册组件

在IE5.0版本中就包含了XMLHttp组件,它提供了Ajax中的关键对象XMLHttpRequest.

<!--[if !supportLists]-->3. <!--[endif]-->Ajax和Web Service组件

Web Service属于服务器端程序,而Ajax属于客户端程序,两者可以比较的地方就是异步处理机制;Web Service的开发不受浏览器控制,其运行在通用的标准上。而Ajax使用的XMLHttpRequest组件还未成为标准,受到浏览器的制约,并且Ajax必须在浏览器中开发实现,而Web Service可以独立开发运行。

<!--[if !supportLists]-->4. <!--[endif]-->

<!--[if !supportLists]-->5. <!--[endif]-->

 

<!--[if !supportLists]-->第四章<!--[endif]-->创建CSS样式表
<!--[if !supportLists]-->1. <!--[endif]-->CSS设计工具为TopStyle,下载地址:www.NewsGator.com

Vs2005创建样式表,通过单击样式表的编辑菜单栏上添加“生成样式规则”菜单按钮,然后单击“生成样式”按钮,创建样式完毕;

 

<!--[if !supportLists]-->第五章<!--[endif]-->CSS样式表的高级应用
<!--[if !supportLists]-->1. <!--[endif]-->CSS优化工具(网络在线),网址:http://www.cssdrive.com/index.php/main/csscompressor

<!--[if !supportLists]-->2. <!--[endif]-->CSS效果查看工具—CSSVista

 

<!--[if !supportLists]-->3. <!--[endif]-->

<!--[if !supportLists]-->4. <!--[endif]-->

 

<!--[if !supportLists]-->第六章<!--[endif]--> JavaScript技术简介
<!--[if !supportLists]-->1. <!--[endif]-->JavaScrpt数据类型

基本类型有3中:数值型、文本型和布尔型;负责类型为对象;说没有类型是指声明时;

<!--[if !supportLists]-->2. <!--[endif]-->function中有Return语句为函数否则为方法;函数中的所有方法都可以用arguments对象获得

<!--[if !supportLists]-->3. <!--[endif]-->

<!--[if !supportLists]-->4. <!--[endif]-->

<!--[if !supportLists]-->5. <!--[endif]-->

 

<!--[if !supportLists]-->第七章<!--[endif]--> JavaScript编辑与调试
<!--[if !supportLists]-->1. <!--[endif]-->JavaScript 编辑工具Antechinus JavaScript Editor v10.0,下载地址(要钱的)http://www.c-point.com/javascript_editor.php,有破解版的;

<!--[if !supportLists]-->2. <!--[endif]-->JavaScript测试工具,开源不用安装http://www.jsunit.net

<!--[if !supportLists]-->3. <!--[endif]-->JavaScript的调试方法:(1)把IE的禁用脚本调试去掉,然后在程序中引用脚本调试(2)把IE的禁用脚本调试去掉,然后在脚本程序中添加debugger;语句,执行时就会到本语句;

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/zhang_xiao_qing_c_s_/archive/2009/02/10/3873943.aspx

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics