Ajax原理

简介: 引用:http://www.cnblogs.com/xugang/archive/2007/10/16/925993.html 看了“坐断东南 笑煞之”的那篇 .net组件开发系列(二)之武林系列 太极拳 开发ajax控件 总有一种意犹味尽的感觉。

引用:http://www.cnblogs.com/xugang/archive/2007/10/16/925993.html

看了“坐断东南 笑煞之”的那篇 .net组件开发系列(二)之武林系列 太极拳 开发ajax控件 总有一种意犹味尽的感觉。没有想到 金色海洋(jyk)竟“晕了”,我感觉写得挺不错的,就是少了点盐味,所以斗胆补充以下。

声明:本代码是引用自奚江华的著作,但我没有在网络找到相关地址,所以没有添加相关引用。这个例子是我手动敲打进来的,一是为了自己练习一下,二来也方便大家学习和指教。

为了让各为能够了解什么是AJAX,以下是一个AJAX的手工范例(即不引用任何的Library或AJAX framework),此范例颇为精要易懂,其作用主要是透过Client 端的Browser来即时监控Web 服务器资源或效能变化,各位只要做过一遍范例就能够了解AJAX在网页开发上是多么具有威力了。

先来看看效果图:


本范例是一个简单的AJAX例子,但麻雀虽小五脏俱全,可由此窥见原始AJAX非同技术是如何运作。不需要安装任何特殊的AJAX套件,步骤说明如下:

一 建立Web项目
首先在VS 2005(或VS.NET 2003)建立一个普通的WEB项目,或者您没有VS开发工具,直接用记事本建立也行。

二 建立Client端页面 在Web专案中加入一个Client端页面Client.htm,并将此页面设定为起始页,这个页面会向Web伺服器网页发出非同步呼叫请求,并且将伺服器回传资料更新到网页元素中,代码如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< script  language ="javascript" >
var  XmlHttp = new  ActiveXObject( " Microsoft.XMLhttp " );
function  sendAJAX()
{
XmlHttp.Open("POST","Server.aspx",true);
XmlHttp.send(null);
XmlHttp.onreadystatechange=ServerProcess;
}
function  ServerProcess()
{
if  (XmlHttp.readystate == 4   ||  XmlHttp.readystate == 'complete')
{
document.getElementById('nameList').innerHTML
= XmlHttp.responsetext;
}
}
setInterval('sendAJAX()', 1000 );
</ script >
</ head >
< body >
< div  id ="nameList" ></ div >
</ body >
</ html >


三 建立Server端处理程式
另外在专案中加入一个Server.aspx网页(含.cs),Server.aspx 不需要添加任何代码。
Server.aspx.cs 程序码如下:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Diagnostics;
public partial  class Server : System.Web.UI.Page
{
     protected  void Page_Load( object sender, EventArgs e)
    {
        PerformanceCounter myMemory =  new PerformanceCounter();
        myMemory.CategoryName = "Memory";
        myMemory.CounterName = "Available KBytes";
         string txtResult = "-->服务器可以用记忆体大小:" +
        myMemory.NextValue().ToString() + "KB";
        Response.Write(DateTime.Now.ToLongTimeString() + txtResult);
    }
}


说明: 
首先记得引用 System.Diagnostics 命名空间,因为 PerformanceCounter 必须使用该命名空间,而 PerformanceCounter 类别可让您监控 Windows作业系统的各种效能计数器,在此透过它取得服务器每秒可用记忆体大小的变化情形。

执行 Client.htm 页面,大约会花5秒启始 Performance-Counter 物件,之后透过 AJAX 便可每秒获得 Server 可用记忆
体变化情形。当然用 Server Side 的 Timer 也可以实现,但那种方式会造成 Server 的 Loading 爆增,人多的话还可能搞垮你的 Server,但 AJAX 就具有极佳的弹性与灵巧,透过 AJAX 您可以即时侦测到资料库或事件的变化即时显现在网页上

相关文章
|
2月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用JavaScript与`XMLHttpRequest`异步通信,结合DOM操作、CSS样式和XML数据格式,实现页面无刷新更新。Google Suggest在2005年通过此技术提升了用户体验,用户输入时动态获取搜索建议,展示了AJAX的平台无关性和创新交互。
|
3月前
|
XML 前端开发 JavaScript
ajax原理是什么?如何实现?
ajax原理是什么?如何实现?
60 0
|
2月前
|
XML 前端开发 JavaScript
AJAX 工作原理
AJAX是一种利用XMLHttpRequest对象、JavaScript/DOM、CSS和XML进行异步数据交换的技术,实现浏览器和平台无关的动态Web界面。Google Suggest在2005年通过使用AJAX,实现了用户输入关键词时实时显示搜索建议的功能,极大提升了用户体验。
|
3月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用XMLHttpRequest与服务器异步交互数据,结合JavaScript/DOM处理显示,CSS样式设计及XML数据格式,实现平台无关的动态Web应用。Google Suggest于2005年通过AJAX技术提供实时搜索建议,增强了用户体验。
|
2月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用**XMLHttpRequest**进行异步数据交换,结合**JavaScript/DOM**更新页面,借助**CSS**样式和**XML**数据格式,实现跨平台的动态Web应用。谷歌的**Google Suggest**在2005年展示了AJAX的力量,用户输入时即刻获取搜索建议,无需刷新页面。
|
2月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用**XMLHttpRequest**进行异步数据交换,结合**JavaScript/DOM**更新页面,借助**CSS**样式呈现,有时使用**XML**传输数据,实现跨平台的Web交互。标志性应用是2005年**Google Suggest**,它在用户输入时动态提供搜索建议,展示了AJAX提升用户体验的能力。
|
3月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用JavaScript与`XMLHttpRequest`对象异步通信,结合DOM操作、CSS样式及XML数据格式,实现页面无刷新更新。Google Suggest在2005年借助AJAX技术,展示了动态输入建议功能,提升了用户体验。此技术跨浏览器、跨平台,促进了Web交互性的革命。
|
3月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用**XMLHttpRequest**进行异步数据交换,结合JavaScript/DOM操控页面,CSS美化,XML处理数据,实现平台无关的动态交互。Google Suggest(2005)是其典范,输入关键词即实时获取搜索建议,提升用户体验。
|
3月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用**XMLHttpRequest**进行异步数据交换,结合**JavaScript/DOM**更新页面,**CSS**处理样式,**XML**传输数据,实现跨平台的交互。谷歌的**Google Suggest**(2005)展示了AJAX的力量,它在用户输入时动态获取建议,提升Web界面的互动体验。
|
2月前
|
XML 前端开发 JavaScript
AJAX 工作原理
**AJAX**利用JavaScript与`XMLHttpRequest`对象异步通信,结合DOM操作、CSS样式和XML数据格式,实现页面无刷新更新。Google Suggest在2005年推动了AJAX的普及,它实时向服务器发送用户输入并动态显示搜索建议,展示了AJAX跨平台的潜力。