AJAX(Asynchronous JavaScript And XML 异步JavaScript和XML技术)
第一章 揭开AJAX的面纱
1. 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;
2. AJAX的缺陷
(1) 不被搜索引擎支持。
(2) 不支持浏览器的后退功能。因为使用AJAX局部刷新后,浏览器中的网页地址根本没有改变;
(3) 纯粹的JavaScript。JavaScript客户端,编写简单但调试困难。对于浏览器的兼容不太好;
(4) 不支持智能终端设备。如PDA和智能手机等软件程序;
3. AJAX 组成要素
4. 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>
5.
6.
第二章 Ajax 技术与传统技术的比较
1. 使用Iframe框架技术实现无刷新
Iframe成为浮动的框架(D:/学习总结/Javascript&Ajax/AJAX/征服ASP.NET2.0AJAX/征服ASP.NET2.0AJAX书对应的代码/asp[1].net2.0+ajax光盘文件1-15/C01/AsyncAjax)。
2. 使用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实现,也可以使用正则表达式实现;
第三章 AJAX目前的应用趋势
1. Ajax异步调用返回的数据类型
在使用Ajax的异步处理对象XMLHttpRequest时,通常有两种返回形式:ResponseText和ReponseXML
ResponseText:一般返回的是字符串类型,可以是一个页面也可能一句话。
ResponseXML:一般返回的是标准XML类型的数据,注意返回的格式一定是标准XML格式,否则在读取数据时出错。
2. Ajax 不需要在IE浏览器中注册组件
在IE5.0版本中就包含了XMLHttp组件,它提供了Ajax中的关键对象XMLHttpRequest.
3. Ajax和Web Service组件
Web Service属于服务器端程序,而Ajax属于客户端程序,两者可以比较的地方就是异步处理机制;Web Service的开发不受浏览器控制,其运行在通用的标准上。而Ajax使用的XMLHttpRequest组件还未成为标准,受到浏览器的制约,并且Ajax必须在浏览器中开发实现,而Web Service可以独立开发运行。
4.
5.
第四章 创建CSS样式表
1. CSS设计工具为TopStyle,下载地址:www.NewsGator.com
Vs2005创建样式表,通过单击样式表的编辑菜单栏上添加“生成样式规则”菜单按钮,然后单击“生成样式”按钮,创建样式完毕;
第五章 CSS样式表的高级应用
1. CSS优化工具(网络在线),网址:http://www.cssdrive.com/index.php/main/csscompressor
2. CSS效果查看工具—CSSVista
3.
4.
第六章 JavaScript技术简介
1. JavaScrpt数据类型
基本类型有3中:数值型、文本型和布尔型;负责类型为对象;说没有类型是指声明时;
2. function中有Return语句为函数否则为方法;函数中的所有方法都可以用arguments对象获得
3.
4.
5.
第七章 JavaScript编辑与调试
1. JavaScript 编辑工具Antechinus JavaScript Editor v10.0,下载地址(要钱的)http://www.c-point.com/javascript_editor.php,有破解版的;
2. JavaScript测试工具,开源不用安装http://www.jsunit.net
3. JavaScript的调试方法:(1)把IE的禁用脚本调试去掉,然后在程序中引用脚本调试(2)把IE的禁用脚本调试去掉,然后在脚本程序中添加debugger;语句,执行时就会到本语句;