Web开发基础务实之《浅唱Ajax》
下文的总结分享来自我的另一个blog青藤屋，因为博客园比较热闹，所以同步过来晒晒，喜欢的朋友可以常来这两个blog上逛逛：）
一、引言
这两天一直在想，虽然出道刚不久，但毕竟在学校实验室里也折腾过不少ASP.NET Web项目，自认为对Web开发比较熟悉，然而蓦然回首，却又发现知识都很凌乱。曾经以为自己很懂，尝试给学弟学妹们讲有关ASP.NET Web开发的知识时，呵呵，每次都是讲得没头没尾，其实不是我不懂，而是因为缺乏总结，导致很多基础的东西都是东一块西一块，讲起来自然就会比较凌乱了。 所以我决定，从现在开始慢慢总结基础的东西，就像高考前老师告诉我们要学会梳理基础知识一样，我就在这里边总结边梳理，并做好及时与大家分享的准备。
接下来我准备将自己在开发ASP.NET Web项目过程中的一些基础点滴以专题的形式进行总结并呈现给大家。由于ASP.NET Web开发这个范围实在是比较大，包括前端、后台、服务器、架构等等，所以我只好总结自己能力之内的方面，希望我总结到的一些能给路过的ASP.NET Web开发初学者带来一定的帮助。
PS:由于现在在工作了，时间有限，所以基本上是只能一周总结一次，有兴趣听我唠叨的朋友可以关注我的博客，我尽量吧！
二、浅唱Ajax -- 开篇唠叨
Ajax，几乎每一个web开发人员，无论是初学的还是老手，都会将它当作关注的焦点之一。然而很多朋友，尤其是初学者，都只是在疯狂地使用 Ajax，至于Ajax是什么原理、什么时候适合用Ajax等等方面可能很多都不会有太多的关注，然而恰恰这些都是基础的东西，不搞明白，你就会像我一 样，一到讲课的时候，就开始胡言乱语，令人啼笑皆非。好了，那今天我就尝试来总结一下有关ajax方面的基础知识，本文将从多个角度展开探讨，有兴趣的朋 友也可以在评论中补充，或者短信或者Email联系我，我会酌情补充进去。在此提前感谢一起参与的朋友，当然更感谢支持推荐的朋友：）
三、浅唱Ajax -- 揭开神秘的面纱
Ajax是神马？呵呵，这时候你可能就在google或者baidu了，很快，你找到了答案：AJAX 即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是一种使用JavaScript的 XMLHttpRequest对象来直接与服务器进行同步或者异步通信的技术，它是xhtml、css、javascript等技术的结合体，可以大大提 高用户体验。这里我同样的话就不重复了，为了方便大家理解Ajax的原理，我就来打一个比方来揭开它神秘的面纱吧：假设你是大明星（需要和 server通信的浏览器），有一个如花似玉但又很厉害的老婆，另外你又很风流，外面养了10个小三（10个服server请求）。有一天你想和小三们约 会了（需要和server通信），但你的手机什么的通讯工具被你那厉害的老婆监视着，直接联系肯定会被老婆发现，到时候就惨了，怎么办呢，确实想小三们了 啊，呵呵，发个暗号给你的经纪人（XMLHttpRequest对象，也可以看作代理）吧，让经纪人帮你搞定约会信息的发送吧，你继续可以和你的老婆缠绵 （这就是异步带来的好处，两不误啊），而不用10个电话亲自一个个打过来，等你经纪人把约会的信息传达完成以后，你和你老婆也缠绵完了，既不耽误时间，又 讨好了你老婆，可以出去和小三约会了，哈哈！
其实，Ajax中最主要的就是XMLHttpRequest这个对象，他充当了与服务器直接交互的代理，浏览器可以把一些需要长时间等待的事务交给 XMLHttpRequest对象，让他去做，自己可以继续干别的事情，比如和老婆缠绵，当XMLHttpRequest对象和服务器通信完了后会发送一 些事件给浏览器，让浏览器去处理完成后的结果（用Javascript更新DOM之类的）。怎么样，Ajax的基本原理是不是也挺简单的。
这里附上XMLHttpRequest对象的几个属性：
onreadystatechange //每次状态改变所触发事件的事件处理程序。
responseText //从服务器进程返回数据的字符串形式。
responseXML //从服务器进程返回的DOM兼容的文档数据对象。
status //从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text //伴随状态码的字符串信息
readyState //对象状态值
0 //(未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 //(初始化) 对象已建立，尚未调用send方法
2 //(发送数据) send方法已调用，但是当前的状态及http头未知
3 //(数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 //(完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
四、浅唱Ajax -- 基本使用
这里我主要结合ASP.NET讲讲如何用原生JS实现Ajax和用jQuery实现Ajax
1、用原生JS：
var request = false;
//根据不同浏览器创建XMLHttpRequest对象
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
function AjaxTest() {
var url = "test.aspx"; //指定url
request.open("GET", url, true); //打开ajax，并指定为异步请求
request.onreadystatechange = updatePage; //指定回调函数
request.send(null); //发送ajax请求
}
function updatePage() {
alert(request.responseText);
}
AjaxTest();
2、用jQuery：
用jquery就要简单很多了，这里有用jQuery实现ajax的4种方法，原文《深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法》，就不多说了。
五、浅唱Ajax -- 推荐几个优秀的Ajax框架
这年代一般的程序要学会用框架，厉害的程序员要玩转框架，牛叉的程序员要能写框架，好吧，我是一般的程序员，那就学学如何用框架吧。
现在市面上比较流行的ajax框架比较多，这里我推荐初学者选用下面几个框架（当然对于初学者最好的学习就是用原生的JS）
1、jQuery（强力推荐）
jQuery最大的特点就是简洁、灵活，代码很小，以操作DOM的选择器为核心，可别小看它，现在互联网上基于jQuery的开源插件可是同类中最多的，而且大部分都兼容主流的浏览器，对于像我这样的懒人就直接拿来用过很多现成的插件。下面推荐几个学习jQuery的网站：
jQuery官方网站：http://jquery.com/
jQuery UI 官方网站：http://jqueryui.com/
jQuery插件大全：http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html
另外还有一些jQuery专题博客、中文jQuery论坛
上面的地方初学者可以常去框框，会有帮助的：）
2、Prototype
一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，之上还有 rico/script.aculo.us实现一些JS组件功能和效果，以prototype为核心，形成了一个外围的各种各样的JS扩展 库，是相当有前途的JS底层框架，突出特点就是非常易学易用，门槛很低，常常是一两行JS代码就可以搞定一个相关的功能。同时它也是RoR集成的AJAX JS库。
Prototype官方网站：http://www.prototypejs.org/
3、ExtJs
貌似这个现在不叫ExtJs了，但我还是这样叫他吧，大家明白就好。这个框架怎么说好呢，对于初学者如果看到他的各种界面组件，一定会 深深地爱上他，包括以前我也一样，整整为他折腾了一个暑假。但是我不是非常推荐用ext，因为他的库实在是太大了，我上次用过的版本压缩后都有 400K+，而且在IE下性能表现一般甚至比较低，还比较难学。当然了，有兴趣的朋友也可以去看看，还是值得一看的，ext官方网站：http://www.sencha.com/
还有许多其他框架，如Mootools、YUI、Dojo等等，由于我也没用过，况且可能也不常用，有兴趣的朋友去看看吧，就不介绍了。
六、浅唱Ajax -- 优点和缺点
优点：
1、不刷新页面就可以和服务器通信，因此解决了复杂事务白屏等待的缺陷，提高了用户体验。
2、异步操作可以让浏览器在发出ajax请求后不打断继续其他的工作，因此具有更好的响应能力。
3、由于是“按需获取、局部更新”，所以减少了冗余数据，节省了服务器带宽。
Ajax也不是万能的，下面重点谈谈缺点：
1、过多的ajax对网站SEO不是很友好，因为搜索引擎还不能搜索由js产生的dom数据。
2、安全问题，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax 的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚本攻击、 SQL注入攻击和基于credentials的安全漏洞等。
3、过于复杂的ajax框架对于程序调试十分麻烦，因此设计成本相对太高，而且要做到很好的可控性成本更高。
4、如果使用不当不仅不能起到节约带宽的作用，反而增加了和服务器的http连接（本来一次http连接就能完成的你分n个ajax去完成），一次send就建立了连接，而服务器处理同时http连接的能力又是有限的。
所以不是任何时候使用ajax都是合理的，使用ajax前请先做好项目评估并做好相关设计，切不能为了ajax而ajax。
七、浅唱Ajax -- 总结
最后做个总结吧，ajax在我们项目中用的十分广泛，但是用好它就要先了解他，这样我们才能更好的把握它，才能够让我们正确的判断出是否该使用ajax，该使用什么ajax框架。以上是我个人对ajax的一些简单梳理，希望给初学朋友带来帮助。
