Ajax与Atlas开发笔记

什么是AJAX
AJAX是Ajax是Asynchronous JavaScript and
XML的缩写。
• 使用XHTML和CSS标准化呈现;
• 使用DOM实现动态显示和交互;
• 使用XML和XSLT进行数据交换与处理;
• 使用XMLHttpRequest进行异步数据读取;
• 最后用JavaScript绑定和处理所有数据;

什么是SOA
• 由于SOA是在计算环境下设计、开发、应用、管
理分散的逻辑（服务）单元的一种规范，这就决
定了SOA的广泛性。SOA要求开发者从服务集成
的角度来设计应用软件，即使这么做的利益不会
马上显现。SOA要求开发者超越应用软件来思
考，并考虑复用现有的服务，或者检查如何让服
务被重复利用。SOA鼓励使用可替代的技术和方
法（例如消息机制），通过把服务联系在一起而
非编写新代码来构架应用。经过适当构建之后，
这种消息机制的应用允许公司仅通过调整原有服
务模式而非被迫进行大规模应用代码的开发，使
得在商业环境许可的时间内对变化的市场条件做
出快速的响应。
WEB 2.0
• 纯静态页面(Web 1.0)→CMS+数据库(Web
1.5) →用户导向的社会化网络(Web 2.0)
• 相关技术：
CSS + XHTML
AJAX通过RSS/ATOM同步数据
通过RSS/ATOM聚合数据
友好的URL(好记的域名，比如
http://blog.csdn.net/jiangtao)
支持按照blog的方式来发表
采用REST（Representational State Transfer）的API或
者XML的web service
社会性，能把东西分享给朋友等
WEB 2.0
• 用户操作非常友好，注重用户体验
• 去中心化、用户主导、用户参与、用户建
设
• 社会化网络，内容开放和共享，支持API
• 内容通过聚合来组织
• 分散化的微内容网站受欢迎
WEB 2.0相关技术
要点：CSS+XHTML的方式控制网页元素
好处：
• 页面更小、加载更快
• 页面更规范、减少了和程序的交互
• 可以轻松支持多种样式，提供更个性化服务
局限：
• 还没有好的可视化编辑器，加大了美术设计师的工作
WEB 2.0相关技术－ RSS/ATOM
要点：是内容格式化输出的一个规范，XML格式
好处：
• 用户可以选择RSS订阅，实现定向阅读
• 开发者可以利用RSS交换信息，实现聚合等功能(如CSDN
CMS系统)
局限：
• 目前规范的版本很多，有些站点输出的格式也不规范
• 交换的数据信息有限，不适合内部数据的大量流转
建议：
• 有索引的地方尽量实现RSS输出
WEB 2.0相关技术AJAX
要点：客户端请求通过异步调用服务器数据，实现页面无刷新操作的技术
Ajax=Asynchronous JavaScript with XmlHttpRequest
例子：
• 商城：http://projects.backbase.com/RUI/shop.html
• 提醒：http://ajaxed.com/
好处：
• 用户不需要刷新页面就可以完成异步的数据交换
• 在Smart Client技术成熟之前，可以比较完美地实现富客户端(RIA)
局限：
• 某些浏览器版本对XmlHttpRequest、Javascript的支持还有很多不同的地方
建议：
• 从外观看来，适合那些对URL不敏感的Web应用。如果一个应用对URL的关
心程度大于对交互特性关心程度，那么就不要妄想整个应用采用Ajax, 否则可
以完全采用Ajax。
CSS
CSS是Cascading Style Sheets（层叠样式表
单）的简称。更多的人把它称作样式表。
顾名思义，它是一种设计网页样式的工具。
借助CSS的强大功能，
CSS元素的定义
选择符{属性：属性值}
选择符是可以是多种形式，一般是你要定义
样式的HTML标记，例如BODY、P、
TABLE……，你可以通过此方法定义它的
属性和值，属性和值要用冒号隔开：
CSS元素定义
• 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称
经常是几个单词的组合：
p {font-family: "sans serif"}
（定义段落字体为sans serif）
• 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性
和值分开：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
• 为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p{
text-align: center;
color: black;
font-family: arial
}
CSS元素组定义
• p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }
CSS类选择符定义
• 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在
自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右
对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其
功能和效果简要命名。
DOM
• 一个能够让程序和脚本动态访问和更新文
档内容、结构和样式的语言平台
• DOM提供了标准的HTML和XML对象集，
并有一个标准的接口来访问并操作他们
• DOM被分为不同的部分（核心，XML和
HTML）和不同的版本（DOM 1/2/3）
•HTML DOM
• HTML DOM将HTML文档视为嵌套其他元
素的树型结构元素。所有的元素，它们包
含的文字以及他们的树型都可以被DOM树
所访问到。它们的内容可以修改和删除，
并且可以通过DOM建立新的元素。元素的
文字和它们的属性被识别为点。
使用JS调用DOM实例
• Window.onload事件解说
在IE窗口被载入时调用
• getElementById方法解说
获取网页元素
• CreateElement方法解说
创建元素
• CreateTextElement方法解说
快速创建文本
• appendChild方法解说
加入元素
异步调用数据
• 创建IFrames.
• IFrmae是隐藏的框架页，可以作为DOM中
的一个元素进行编程。
• function fetchData(){
• var iframe=document.createElement('iframe');
• iframe.className='hiddenDataFeed';
• document.body.appendChild(iframe);
• var src='datafeeds/mydata.xml';
• loadDataAsynchronously(iframe,src);
• }
XmlDocument && XmlHttpRequest
• function getXMLDocument(){
• var xDoc=null;
• if (document.implementation
• && document.implementation.createDocument){
• xDoc=document.implementation
• .createDocument("","",null);
• }else if (typeof ActiveXObject != "undefined"){
• var msXmlAx==null;
• try{
• msXmlAx=new ActiveXObject
• ("Msxml2.DOMDocument");
• }catch (e){
• msXmlAx=new ActiveXObject
• ("Msxml.DOMDocument");
• }
• xDoc=msXmlAx;
• }
• if (xDoc==null || typeof xDoc.load=="undefined"){
• xDoc=null;
• }
• return xDoc;
• }
XmlDocument && XmlHttpRequest
• function getXMLHTTPRequest() {
• var xRequest=null;
• if (window.XMLHttpRequest) {
• xRequest=new XMLHttpRequest();
• }else if (typeof ActiveXObject != "undefined"){
• xRequest=new ActiveXObject
• ("Microsoft.XMLHTTP");
• }
• return xRequest;
• }
向服务器提交数据
function sendRequest(url,params,HttpMethod){
if (!HttpMethod){
HttpMethod="POST";
}
var req=getXMLHTTPRequest();
if (req){
req.open(HttpMethod,url,true);
req.setRequestHeader
("Content-Type",
"application/x-www-form-urlencoded");
req.send(params);
}}
HTTP解说－发送请求
• GET / HTTP/1.1
• Host: www.google.com
• User-Agent: Mozilla/5.0
• (Windows; U; Windows NT 5.0; en-US; rv:1.7)
• Gecko/20040803 Firefox/0.9.3
• Accept: text/xml,application/xml,
• application/xhtml+xml,text/html;q=0.9,
• text/plain;q=0.8,image/png,*/*;q=0.5
• Accept-Language: en-us,en;q=0.5
• Accept-Encoding: gzip,deflate
• Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
• Keep-Alive: 300
• Connection: keep-alive
• Cookie: PREF=ID=cabd38877dc0b6a1:TM=1116601572
• :LM=1116601572:S=GD3SsQk3v0adtSBP
HTTP解说－获得返回
• HTTP/1.x 302 Found
• Location: http://www.google.co.uk/cxfer?c=PREF%3D:
• TM%3D1116601572:S%3DzFxPsBpXhZzknVMF&prev=/
• Set-Cookie: PREF=ID=cabd38877dc0b6a1:CR=1:TM=1116601572:
• LM=1116943140:S=fRfhD-u49xp9UE18;
• expires=Sun, 17-Jan-2038 19:14:07 GMT;
• path=/; domain=.google.com
• Content-Type: text/html
• Server: GWS/2.1
• Transfer-Encoding: chunked
• Content-Encoding: gzip
• Date: Tue, 24 May 2005 17:59:00 GMT
• Cache-Control: private, x-gzip-ok=""
使用回调函数
• var READY_STATE_UNINITIALIZED=0;
• var READY_STATE_LOADING=1;
• var READY_STATE_LOADED=2;
• var READY_STATE_INTERACTIVE=3;
• var READY_STATE_COMPLETE=4;
• var req;
• function sendRequest(url,params,HttpMethod){
• if (!HttpMethod){
• HttpMethod="GET";
• }
• req=getXMLHTTPRequest();
• if (req){
• req.onreadystatechange=onReadyStateChange;
• req.open(HttpMethod,url,true);
• req.setRequestHeader
• ("Content-Type", "application/x-www-form-urlencoded");
• req.send(params);
• }
• }
• function onReadyStateChange(){
• var ready=req.readyState;
• var data=null;
• if (ready==READY_STATE_COMPLETE){
• data=req.responseText;
• }else{
• data="loading...["+ready+"]";
• }
• //... do something with the data...
• }
示例
前台代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
        <script type="text/javascript">
        var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
       
        function sendAJAX()
        {
            XmlHttp.Open("POST","receive.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>


后台代码
using System.Diagnostics;


public partial class Receive : 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);

    }
}