文章目录
基本特性
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX是基于现有的Internet标准，并且联合使用它们：
XMLHttpRequest 对象 (异步的与服务器交换数据)
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
//对应浏览器不同有新旧方法
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET 请求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
POST 请求
xmlhttp.open(“POST”,"/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址：
xmlhttp.open(“GET”,“ajax_test.html”,true);
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open(“GET”,“ajax_test.html”,true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
Async=true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
实例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState4 && xmlhttp.status200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,"/try/ajax/ajax_info.txt",true);
xmlhttp.send();
Async = false
如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
xmlhttp.open(“GET”,“test1.txt”,false);
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
实例
xmlhttp.open(“GET”,"/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
实例
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
实例
请求 cd_catalog.xml 文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName(“ARTIST”);
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + “
”;
}
document.getElementById(“myDiv”).innerHTML=txt;
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
lamp AJAX应用程序与浏览器和平台无关的！
传统web模型中，对于每一次的用户行为，将生成一次HTTP请求
而在ajax应用开发模型中，将变成对ajax引擎的一次JavaScript调用。在ajax应用开发模型中可以通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低网络流量，
局部刷新，异步处理，服务端的处理不会打断用户的操作，
提供跨浏览器的兼容性支持。
服务器端构架
服务器端控件，扩展控件，远程webservice桥
web程序的客户端代理。
客户端构架
应用程序接口。api函数基础类库，封装的xmlhttpRequeset对象，xml引擎和ajax客户端控件。
ScriptManager
1, ScriptManager(脚本控制器)是asp.net ajax存在的基础.
2, 一个页面只允许有一个ScriptManager,并且放在其他ajax控件的前面.
3,ScriptManager掌管着客户端Ajax页的多有脚本,并在页面中注册Ajax类库,用来实现页面的局部更新和对Web服务的调用.
scriptManager控件负责管理page页面中的所有ajax服务器控件，，是ajax的核心，有scriptManager控件才能够让page局部更新起作用，所用的JavaScript才会自动管理。
scriptManager控件的声明。scriptmanger控件必须放置在依赖于asp.net ajax控件或脚本的前面，否则页面将发生脚本错误
scriptManager控件一般放置在web窗体页的form元素之后
EnablePartialRendering: (默认局部渲染)比较重要,用来表示此页面是否允许局部刷新(默认为true)
AllowCustomErrorsRedirect :当发生错误时候,是否导航到web.config中定义的错误页面,如果设置为false,则使用AsyncPostBackErrorMessage和OnAsyncPostBackError提示错误.
AsyncPostBackErrorMessage: 异步调用发生错误时的提示信息.
OnAsyncPostBackError: 异步调用发生错误时的事件 e, AsyncPostBackTimeOut: 异步调用的有效时间 默认为 90秒
AuthenticationService: 用来表示提供验证服务的路径.
ProfileService 表示提供个性化服务的路径
Scripts 对脚本的调用,可以恰套多个ScriptReference摸板对多个脚本文件的调用
Service 对服务的调用 也可以恰套多个ServiceReference摸板以实现多个服务的引用
添加 ScriptManager 控件
直接将 ScriptManager 控件从工具箱中拖到页面的 元素中即可得到如下的元素引用，这样，在它所有的页面就可以使用 ASP.NET AJAx 了。
<asp:ScriptManager ID=“ScriptManager1” runat=“server”></asp:ScriptManager>
scriptManager 属性
使用
引入service
### service实例
其中应用了[system.web.script.service.scriptservice]属性，该属性是asp.net ajax能够从客户端访问到定义的webservice所必须的属性
在后端程序中使用 类名.方法名的格式调用
updatePanel局部更新
将asp.net的控件拖放到updatePanel中即可使其拥有ajax异步功能
UpdatePanel的结构
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger />
<asp:PostBackTrigger />
</Triggers>
</asp:UpdatePanel>
updatePanel外的控件触发局部更新
triggers属性包含的AsyncPostBackTrigger触发器可以引发updatePanel控件的局部更新，在触发器中指定控件名称。该控件的某个服务端时间就可以使之外的控件触发局部更新
弹出对话框
timer定时控制器
ajax framework 构建了一个ajax timer服务器控件，设置时间间隔触发事件
Interval属性用于设置时间间隔
tick事件指定触发的事件
实例 聊天室
//全局应用程序类
global.asax
void application_start(object sender,EventArgs e)
{
//在应用程序启动时运行的代码
Application["UserName"]="111”；
Application["Mag"]=string.Empty;//留言信息
Application["Count"]=0;//人数
//Application变量的作用域为应用程序的运行区间
}
void Session_Start(object sender, EventArgs e)
{
// 在新会话启动时运行的代码
Application.Lock();
Application["Count"] = int.Parse(Application["Count"].ToString()) + 1;
Application.UnLock();
}
void Session_End(object sender, EventArgs e)
{
// 在会话结束时运行的代码。
// 注意: 只有在 Web.config 文件中的 sessionstate 模式设置为
// InProc 时，才会引发 Session_End 事件。如果会话模式设置为 StateServer
// 或 SQLServer，则不引发该事件。
Application.Lock();
Application["Count"] = int.Parse(Application["Count"].ToString()) - 1;
//离开公告
Application.Set("Msg", Application["Msg"].ToString() + "<br/><sapn style='color:#666666;font-size=12px'>♠" + Session["UserName"].ToString() + "离开了聊天室♠</span>");
string[] arr = Application["UserName"].ToString().Split(new char[] { '/' });//分裂字符串
Application["UserName"] = string.Empty;
Application["UserName"] = arr[0].ToString();
//遍历数组arr，移除当前用户
for(int i=0;i<arr.Length;i++)
{
if(arr[i].ToString()!=Session["UserName"].ToString())
{
//保存实时在线用户
Application.Set("UserName", Application["UserName"] + "/" + arr[i].ToString());
}
}
Application.UnLock();
}
//chat.aspx
protected void Button1_Click(object sender, EventArgs e)
{
string a =Application["Msg"]+ "<br/><span style='color:#666666;font-size=12px'>【<span style='font-weight:bold'>"+Session["UserName"];
//发送用户、聊天对象、发送时间内容
Application.Set("Msg",a
+ "</span>】 在["
+ DateTime.Now.ToString()
+ "]对【<span style='font-weight:bold'>"
+ tb_user.Text.ToString() + "</span>】说：</span><br/><span style='text-indent:20px'>"
+ tb_msg.Text.ToString() + "</span>");
}
protected void ltnBind()
{
string[] arr = Application["UserName"].ToString().Split(new char[] { '/' });
Ltb_use.Items.Clear();
foreach(string s in arr)
{
ListItem li = new ListItem(s, s);//在线人列表
Ltb_use.Items.Add(li);
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
ltnBind();
}
//content.aspx
protected void Timer1_Tick(object sender, EventArgs e)
{
try
{
//获取聊天信息
lb_Msg.Text = Application["Msg"].ToString();
//统计在线人数
lb_count.Text = "聊天室在线人数： " + Application["count"].ToString() + "人";
}
catch(Exception ex)
{
throw new Exception(ex.Message, ex);
}
}
扫一扫
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
