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" οnclick="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="查询" οnclick="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
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
