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);

    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值